vue中使用arcgis离线地图
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
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 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)