arcgis模块化开发之vue.js

项目环境是用 vue-cli 搭建的vue项目;在项目中使用vue 配合 arcgis开发;加载的地图为天地图

• 1.1 这里不在废话,如果会用vue;就会用vue-cli;直接用命令vue init webpack 生成就好了.
• 1.2 安装 esri-loader;这个也是arcgis官方开发的,用命令npm install --save esri-loader安装就行了;详细文档参考这里
• 1.3 在vue的script标签中用import的方式引入esri-loader :
  
import esriLoader from 'esri-loader';

• 1.4 然后加载 css js 等资源:

   esriLoader.loadScript ({ // 加载js         url: 'http://jsapi.thinkgis.cn/dojo/dojo.js'    });         // 加载css    esriLoader.loadCss ('http://jsapi.thinkgis.cn/esri/css/esri.css');         // 加载模块    esriLoader.loadModules (modules.modulesList)    .then (this.loading)    .then (obj => {        this.initMap (obj);    })    .catch ((err) => {        console.log (err.message);    });

有几个问题 : 我是把 modules.modulesList分离到了单独的文件中,通过import引入的,模块是按需引入的,你需要什么,就加载什么.不一定要跟下面的一模一样.如果看不明白,将直接替换成这种:

        esriLoader.loadModules ([             'esri/map',             'esri/layers/TiledMapServiceLayer',             'esri/SpatialReference',             'esri/geometry/Extent',             'esri/layers/TileInfo',             'esri/geometry/Point',             'esri/symbols/PictureMarkerSymbol',             'esri/layers/FeatureLayer',             'esri/tasks/LengthsParameters',             'esri/tasks/AreasAndLengthsParameters',             'esri/tasks/GeometryService',             'esri/toolbars/draw',             'esri/InfoTemplate',             'esri/graphic',             'esri/layers/GraphicsLayer'         ])

esri-loader支持Promise;所以可以直接使用then方法;这里使用了Promise的链式调用;模块加载完了,就要加载天地图了,官方的地图不是天地图;所以只能自己加载: 就是上面this.loading方法:

            loading ([                              Map,                              TiledMapServiceLayer,                              SpatialReference,                              Extent,                              TileInfo,                              Point,                              PictureMarkerSymbol,                              FeatureLayer,                              LengthsParameters,                              AreasAndLengthsParameters,                              GeometryService,                              Draw,                              InfoTemplate,                              Graphic,                              GraphicsLayer                          ]) {                     console.log ('loading');                     dojo.declare ('TDT', TiledMapServiceLayer, {                          constructor (maptype) {                             this._maptype = maptype;                             this.spatialReference = new SpatialReference ({ wkid: 4326 });                             // this.initialExtent = (this.fullExtent = new Extent (97.83, 21.48, 105.60, 29,                             //     this.spatialReference));                             this.initialExtent = (this.fullExtent = new Extent (-180, -90, 180, 90,                                 this.spatialReference));                              this.tileInfo = new TileInfo (modules.titleInfo);                             this.loaded = true;                             this.onLoad (this);                         },                          getTileUrl (level, row, col) {                             return 'http://t' + col % 8 + '.tianditu.cn/' + this._maptype + '_c/wmts?' +                                 'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=' + this._maptype +                                 '&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=' +                                 level + '&TILEROW=' + row + '&TILECOL=' + col + '&FORMAT=tiles';                         }                     });                     return {                         Map,                         TiledMapServiceLayer,                         SpatialReference,                         Extent,                         TileInfo,                         Point,                         PictureMarkerSymbol,                         FeatureLayer,                         LengthsParameters,                         AreasAndLengthsParameters,                         GeometryService,                         Draw,                         TDT,                         InfoTemplate,                         Graphic,                         GraphicsLayer,                     };                 }

同样,到这里,天地图的加载就出来了,然后就是初始化地图了,就是initMap方法:

    this.mapObj = obj;// 将对象保存到vue data 的maoObj中,方便调用;     let map = new this.mapObj.Map ('map', { logo: false });// 创建地图实例     this.mapObj.map = map;     // 调用地图类型切换     this.mapType ();     // this.switchers('hotSpot',true);     var pt = new this.mapObj.Point (this.mapCenter.lon, this.mapCenter.lat); // 设置中心点     this.mapObj.map.centerAndZoom (pt, this.mapCenter.zoom); // 设置中心点和缩放级别;

这里,天地图就加载完成了.应该就能看见地图了.如果有问题,就是初始值没设置,换成相应的地理坐标就行了,等有空了我自己在写个详细的demo

文章来源: arcgis模块化开发之vue.js