个人博客迁移到 https://biubu.cn/,此处停更

说明 :

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

1.项目环境搭建 :

• 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 ([
            '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'
    ])
   .then (this.loading)
   .then (obj => {
       this.initMap (obj);
   })
   .catch ((err) => {
       console.log (err.message);
   });

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 ({
                                'rows': 256,
                                'cols': 256,
                                'dpi': 300,
                                'format': 'PNG32',
                                'compressionQuality': 0,
                                'origin': {
                                    'x': -180,
                                    'y': 90
                                },
                                'spatialReference': {
                                    'wkid': 4326
                                },
                                'lods': [ {
                                    'level': 2,
                                    'resolution': 0.3515625,
                                    'scale': 147748796.52937502
                                }, {
                                    'level': 3,
                                    'resolution': 0.17578125,
                                    'scale': 73874398.264687508
                                }, {
                                    'level': 4,
                                    'resolution': 0.087890625,
                                    'scale': 36937199.132343754
                                }, {
                                    'level': 5,
                                    'resolution': 0.0439453125,
                                    'scale': 18468599.566171877
                                }, {
                                    'level': 6,
                                    'resolution': 0.02197265625,
                                    'scale': 9234299.7830859385
                                }, {
                                    'level': 7,
                                    'resolution': 0.010986328125,
                                    'scale': 4617149.8915429693
                                }, {
                                    'level': 8,
                                    'resolution': 0.0054931640625,
                                    'scale': 2308574.9457714846
                                }, {
                                    'level': 9,
                                    'resolution': 0.00274658203125,
                                    'scale': 1154287.4728857423
                                }, {
                                    'level': 10,
                                    'resolution': 0.001373291015625,
                                    'scale': 577143.73644287116
                                }, {
                                    'level': 11,
                                    'resolution': 0.0006866455078125,
                                    'scale': 288571.86822143558
                                }, {
                                    'level': 12,
                                    'resolution': 0.00034332275390625,
                                    'scale': 144285.93411071779
                                }, {
                                    'level': 13,
                                    'resolution': 0.000171661376953125,
                                    'scale': 72142.967055358895
                                }, {
                                    'level': 14,
                                    'resolution': 8.58306884765625e-005,
                                    'scale': 36071.483527679447
                                }, {
                                    'level': 15,
                                    'resolution': 4.291534423828125e-005,
                                    'scale': 18035.741763839724
                                }, {
                                    'level': 16,
                                    'resolution': 2.1457672119140625e-005,
                                    'scale': 9017.8708819198619
                                }, {
                                    'level': 17,
                                    'resolution': 1.0728836059570313e-005,
                                    'scale': 4508.9354409599309
                                }, {
                                    'level': 18,
                                    'resolution': 5.3644180297851563e-006,
                                    'scale': 2254.4677204799655
                                } ]
                            });
                            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方法:

initMap(obj){
    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.

如果看的懵懂,直接看demo:demo地址