vue中使用arcgis离线地图
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、线、点),结合业务完成操作。
更多推荐
已为社区贡献3条内容
所有评论(0)