1、下载arcgis地图包
2、将arcgis离线地图包放到vue的静态资源目录下,我这个项目是放在根目录public文件夹下,配置arcgis地图包资源路径,arcgis包里面有一个init.js文件,将里面的baseUrl换成arcgis文件在项目中的路径
在这里插入图片描述
这个pnr_app_path是我在公众配置路径的js中定义的arcgis在项目中的路径
3、初始化地图,vue直接用arcgis官方提供加载模块的esri-loader插件,如下代码所示

  • npm i esir-loader
  • 配置arcgis的文件路径
            initMap(){
                const options = {
                    url: "/newGIS/arcgis/3.8compact/init.js",//arcgis静态资源地址
                }
            loadModules(["esri/map", "js/gaodeLayer", "dojo/domReady!"],options)
                .then(([Map, gaodeLayer]) => {
                    this.map = new Map("map", {
                        center: [114.50, 38.04],
                        zoom:8,
                        logo : false, //logo
                        slider : true //缩小按钮
                    });
                    var baselayer = new gaodeLayer();//默认加载矢量 new gaodeLayer({layertype:"road"});也可以
                    // var baselayer = new gaodeLayer({layertype: "st"});//加载卫星图
                    // var baselayer = new gaodeLayer({layertype: "label"});//加载标注图
                    this.map.addLayer(baselayer);//添加高德地图到map容器
                    this.$nextTick(()=> {
                        let component = this.$refs.tabChild[0]
                        if(component.carSeperateString){
                            this.handleData(component.carSeperateString,component.oilSeperateString)
                        }
                    });
            });
        },

4、初始化完成地图后即可在地图上添加矢量物(marker、线、点),结合业务完成操作。

Logo

前往低代码交流专区

更多推荐