初始化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_apilibrary4.10init.js
  
  将[HOSTNAME_AND_PATH_TO_JSAPI]替换成localhost:8080/arcgis_js_api/library/4.10/
- 修改文件：arcgis_js_apilibrary4.10dojodojo.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:false为autoOpenBrowser: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、生成地图
在这里插入图片描述