vue项目使用esri loader加载arcgis

效果如下图:
在这里插入图片描述

操作如下:

  1. 引入esri loader

  1. 加载进相应的js和css文件

在这里插入图片描述

  1. 像普通html那样操作即可

完整代码如下:

},
beforeDestroy() {
if (this.view) {
// destroy the map view
this.view.container = null
}
}
}

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue使用 esri-loader 加载 ArcGIS API for JavaScript 并显示中文地图,可以按照以下步骤进行操作: 1. 首先,确保已经安装了 esri-loader 库,可以通过 npm 进行安装: ```shell npm install esri-loader --save ``` 2. 在需要使用地图的组件中,引入 esri-loaderArcGIS 相关资源: ```vue <template> <div id="map-view"></div> </template> <script> import { loadModules } from 'esri-loader'; export default { name: 'MapView', mounted() { this.initMap(); }, methods: { async initMap() { // 加载地图模块和相关资源 const [Map, MapView] = await loadModules(['esri/Map', 'esri/views/MapView'], { css: true, // 加载 CSS 文件 }); // 创建地图实例 const map = new Map({ basemap: 'streets', }); // 创建地图视图实例 const view = new MapView({ container: 'map-view', map, }); // 设置地图视图的中心和缩放级别 view.center = [114.07, 22.54]; // 设置中心点的经纬度坐标(这里以深圳为例) view.zoom = 12; // 设置缩放级别 // 加载中文地图模块 await loadModules(['esri/layers/WebTileLayer'], { url: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}', }).then(([WebTileLayer]) => { const tileLayer = new WebTileLayer(); map.add(tileLayer); }); }, }, }; </script> <style> #map-view { height: 500px; } </style> ``` 3. 在上述代码中,首先通过 `loadModules` 方法加载需要的地图模块和相关资源。然后,创建地图实例和地图视图实例,并设置中心点和缩放级别。最后,通过加载中文地图模块(`esri/layers/WebTileLayer`)来显示中文地图。 注意:上述代码中的地图服务链接是使用的是[国家地理信息公共服务平台](http://map.geoq.cn/)提供的在线地图服务,可以根据需要选择其他地图服务链接。 希望以上信息能够帮助到你!如有任何疑问,请随时提出。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值