学习笔记 ---- 在Vue.js中加载天地图

写在前面：基于esri-loader插件的createMap实例，实现加载天地图，其中使用了arcgis api for javascript 加载天地图一文中的加载天地图方法。

插件版本号

• 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配置方式有所不同

转载于:https://juejin.im/post/5a406ad2f265da4326530f52