欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-01 23:50:25
...

写在前面:基于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