个人博客迁移到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地址
