vue-cli3.x/ArcGis开发实战

最近用vue-cli3.x结合ArcGis做了一个项目，因为此前并没有怎么接触过ArcGis for JavaScript,所以整个过程还是比较痛苦的，虽然GIS官网有例子，并没有起到什么实质作用，网上关于vue/gis的资料又少的可怜，好了废话不多说，直接上干货！

GIS引入及依赖安装

安装好cli后，开始引入GIS,在目录 src->assets下新建js文件，并在此文件夹下新建
ArcGisServe.js文件

此外，还需要安装依赖，这里主要用的是 esri-loader，可以通过install安装，也可以同vue-ui 直接搜索，并安装，这里就不细说了。

ArcGisServe.js主要内容

export const ServiceUrl = {
    ArcGISServer: '',  //图层服务地址
    baseMap:' ', //底图服务地址
    apiUrl: ' ',   //API地址
}

这里可以定义自己服务器上的底图的地址，默认情况下是官网地址，也可以添加其它服务地址，随意。

文件引入

在vue 组件中引入依赖

import * as esriLoader from 'esri-loader'

在vue组件中引入ArcGisServe.js文件

import { ServiceUrl } from '@/assets/js/ArcGisServe.js'
const option = {
  url: ServiceUrl.apiUrl
}

底图显示

mounted() {
   esriLoader.loadModules([
     "esri/basemaps",
     "esri/map",
     //……
  ],
  option).then(([
     esriBasemaps,
     Map,
     //……
  ])=>{
    //gis具体方法
    this.map = new Map("viewDiv", {
      basemap: "xx",//底图名，
      logo: false,
    }); 
  }).catch(err =>{
    console.log(err)
  })
}

加载自定义地图服务

esriBasemaps.delorme = {
  baseMapLayers: [
    {
      url: ServiceUrl.baseMap, //调用文件中设定好的服务
      id:"  ",
      opacity: 0.5
    }
  ],
};

加载其它图层

this.mapBase = new ArcGISTiledMapServiceLayer(ServiceUrl.ArcGISServer { id: " ", visible: true })
this.map.addLayer(this.mapBase)

如果报错，可以替换esri.layers.ArcGISTiledMapServiceLayer()

 new esri.layers.ArcGISTiledMapServiceLayer()