学习笔记 -- esri-loader 1.5.3 添加天地图

写在前面

之前在vue.js框架中，使用esri-loader 1.4.0 添加天地图。目前该插件更新到1.5.3版本，并且写法上存在一定差异，因此本文使用1.5.3版本添加天地图。

---

版本

esri-loader 1.5.3

---

开始

• 预加载部分 ---- 添加所需使用的arcgis api版本及dojo配置 在需要加载地图服务的vue文件中，mounted(){} 内：

    // dev模式与build模式判断，区分使用url
    var locationUrl ='buildUrl';
    if (process.env.NODE_ENV === 'development') {
        locationUrl = 'devUrl';
    };
    
    const options = {
        // 需使用的arcgis api版本地址
        url: arcgisUrl,
        // 添加dojo配置
        dojoConfig: {
            async: true,
            packages: [
            {
                location: location.pathname.replace(/\/[^/]+$/, "") +  locationUrl,
                name: 'tdtLayer'
            }
            ]
        }
    };
    
    // 预加载部分
    this.loadScriptPromise = esriLoader.loadScript(options);
    this.loadScriptPromise
    .then(() => {
        // 加载地图服务的函数
        createMap(esriLoader);
    })
    .catch(err => {
        console.error(err);
    });
  复制代码

• 加载地图服务的函数内部

    esriLoader.loadModules([
        "esri/map", 
        "esri/geometry/Extent",
        "tdtLayer/TdtLayer",
        "tdtLayer/TdtAnnoLayer",
        "tdtLayer/TdtImageLayer"
    ]).then(([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加载完成后的操作
        }
    })
    .catch(err => {
        console.error(err);
    });
  复制代码

---

总结

esri-loader 1.5.3 中，不再使用 isLoaded()进行懒加载，bootstrap()进行预加载，dojoRequire()进行地图模块加载，而是使用 loadScript() 进行预加载，loadModules()进行地图模块加载，好像1.5.3版本弱化了懒加载的方式，目前理解的还不够透彻，在以后的使用中，还会不断学习记录。

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