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

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐