初始化webgis项目

1.技术路线

  • 前端:vue+sass+axios+webpack
  • 数据接口:node
  • 地图接口:ArcGIS Server
  • 数据库:Sql Server

2.配置本地SDK 4.10和ArcGIS API 4.10

2.1 部署nginx

  • 下载nginx

  • 进入解压后文件夹(nginx.exe所在文件夹),输入cmd命令start nginx启动nginx

2.2 下载SDK和API

  • 百度网盘,提取码(cqlb)

  • 将解压后的arcgis_js_v410_sdk下的sdk文件夹,和arcgis_js_v410_api文件夹中的arcgis_js_api放入nginx文件夹的html中

2.3 修改文件

  • 修改nginx配置文件conf/nginx.conf
       location /arcgis_js_api {
           root  html;
           add_header	'Access-Control-Allow-Origin' '*';
       }
       location /arcgis_js_sdk {
           root  html;
           add_header	'Access-Control-Allow-Origin' '*';
       }

  • 修改API地址文件

    • 修改 文件arcgis_js_api\library\4.10\init.js

      [HOSTNAME_AND_PATH_TO_JSAPI]替换成localhost:8080/arcgis_js_api/library/4.10/

    • 修改文件:arcgis_js_api\library\4.10\dojo\dojo.js

      [HOSTNAME_AND_PATH_TO_JSAPI]替换成localhost:8080/arcgis_js_api/library/4.10/

3 初始化Vue项目

3.1 准备

  • 安装 node
  • 安装 vue: npm install vue -g
  • 安装 vue-cli: npm install vue -cli -g

3.2 初始化

$ vue init webpack first-test-vue // 初始化命令
? Project name first-test-vue // 项目名称
? Project description A Vue.js project // 项目描述
? Author NathanYang // 作者
? Vue build standalone  // 独立构建
? Install vue-router? Yes  // 安装路由
? Use ESLint to lint your code? Yes  // 安装 ESLint 代码检测工具
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? No // 端到端测试

3.3 目录结构

目录/文件 说明
build 项目构建(webpack)相关代码
config 配置目录,包括端口号代理等
node_modules npm 加载的项目依赖模块
src 这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:assets: 放置一些图片,如logo等。components: 目录里面放了一个组件文件,可以不用。App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。main.js: 项目的核心文件。
static 静态资源目录,如图片、字体等。
test 初始测试目录,可删除
.xxxx文件 这些是一些配置文件,包括语法配置,git配置等。
index.html 首页入口文件,你可以添加一些 meta 信息或统计代码啥的。
package.json 项目配置文件。
README.md 项目的说明文档,markdown 格式

3.4 安装包

  • esri-loader: 一个小型库,可帮助在非Dojo应用程序中加载ArcGIS API for JavaScript模块

    npm install --save esri-loader

  • Sass: Sass 是对 CSS 的扩展,让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能, 并且完全兼容 CSS 语法

    npm install --save-dev sass-loader

    npm install --save-dev node-sass

3.5 项目配置

  • 自动打开浏览器:修改config/index.js autoOpenBrowser:falseautoOpenBrowser:true
  • 热启动: 修改呢config.json 在scripts/dev/webpack-dev-server 后添加--hot

4 搭建第一个地图

4.1 引入组件

1、App.vue引入css文件,对应本地部署的路径.
@import url('http://localhost:8080/arcgis_js_api/library/4.10/esri/themes/light/main.css');

2、通过esriLoader的loadModules方法引入ArcGIS中模块

      const options = { 
        url: 'http://localhost:8080/arcgis_js_api/library/4.10/dojo/dojo.js'
      }
      esriLoader.loadModules([
          'esri/Map',
          'esri/views/MapView',
      ],options).then(([Map,MapView])=>{
          this.Map=Map;
          this.MapView=MapView;
      }).catch(error => console.log(error))

3、初始化地图

      let _this = this; 
      // 初始化地图
      this.currentMap = new this.Map({
        basemap: 'streets'
      });
      this.currentView = new this.MapView({
        map: _this.currentMap,
        container: "map",
        center: [121.256151, 31.328742],
        zoom: 18
      });
      this.currentView.ui.remove("attribution");

4、生成地图

你可能感兴趣的:(WebGIS)