插件版本号
- esri-loader : ^1.4.0
- vue : ^2.5.3
- vue-template-compiler : ^2.5.3
准备:利用arcgis api for javascript 加载天地图的文件
- TdtLayer.js ---- 切片线划图
- TdtAnnoLayer.js ---- 切片标注
- TdtImageLayer.js ---- 切片影像图
在项目静态文件夹static内,新建tdtLayer文件夹,将以上三个文件放入tdtLayer文件夹内,用于dojo配置
开始:
1、在加载地图的.vue文件中,地图预加载部分,添加dojo配置
if (!esriLoader.isLoaded()) {
// dev模式与build模式判断,区分使用url
var locationUrl ='urlBuild'
if (process.env.NODE_ENV === 'development') {
locationUrl = 'urlDev';
};
esriLoader.bootstrap((err) => {
if (err) {
console.error(err);
}else{
createMap(esriLoader);
}
}, {
url: 'urlArcgisapi',
// 添加dojo配置
dojoConfig: {
async: true,
packages: [
{
location: location.pathname.replace(/\/[^/]+$/, "") + locationUrl,
name: 'tdtLayer'
}
]
}
});
}
复制代码
2、修改esrimap.js ---- createMap()函数的修改
esriLoader.dojoRequire([
"esri/map",
"esri/geometry/Extent",
"tdtLayer/TdtLayer",
"tdtLayer/TdtAnnoLayer",
"tdtLayer/TdtImageLayer"
], (Map,
Extent,
TdtLayer,
TdtAnnoLayer,
TdtImageLayer
) => {
const initExtent = new Extent({
"xmin": 119.78,
"ymin": 30.83,
"xmax": 120.66,
"ymax": 31.7,
"spatialReference": {
"wkid": 4326
}
});
const map = new Map("viewDiv", {
extent: initExtent,
isZoomSlider: false,
logo: false
});
/****加载天地图线划图、标注和影像图****/
const layerBasemap = new TdtLayer()
map.addLayer(layerBasemap);
const annolayer = new TdtAnnoLayer();
map.addLayer(annolayer);
const layerImage = new TdtImageLayer();
map.addLayer(layerImage);
if(map.loaded){
// 实现一些map加载完成后的操作
}
复制代码
写在最后:本次使用的是esri-loader 1.4.0版本,后期尝试使用1.5.0以上的版本,其中dojo配置方式有所不同