vue中使用arcgis离线地图

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、线、点),结合业务完成操作。

  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 19
    评论
评论 19
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值