从零开始的VUE+ArcGIS API for JS项目——底图切换工具（天地图，高德）

hfhf45_

已于 2024-08-01 22:23:26 修改

阅读量1.8k

点赞数 26

于 2024-08-01 15:12:32 首次发布

本文链接：https://blog.csdn.net/hfhf45_/article/details/140843801

版权

前言

今天继续在之前的项目上进行自定义工具的编写。主要是实现自定义底图切换的工具，添加天地图，高德等地图作为底图。
上篇文章地址：
从零开始的VUE+ArcGIS API for JS项目——初始化地图应用

添加element plus

编写组件使用到了element plus的相关组件，所以首先需要在项目中引入element plus的依赖包,在package.json 文件中添加依赖，这上一篇文章的package.json中已经添加了。添加之后需要运行 run pnpm install 命令下载包。

  "dependencies": {
   
    ...
    "@element-plus/icons-vue": "2.3.1",
    "element-plus": "2.7.8",
    ...
  },

运行完成后，修改main.js文件将element 引入到项目中，之后就可以全局使用相关组件了。修改后的代码如下：

import {
    createApp } from 'vue'
import App from './App.vue'

// 引入arcgis 样式
import "@arcgis/core/assets/esri/themes/dark/main.css"

//引入elementui
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

//注册所有element图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   
  app.component(key, component)
}

app.use(ElementPlus)
app.mount('#app')

编写底图类库

上一篇文章中，已经初步编写了一个底图控制类，其中只添加了Arcgis的web服务。在这个文件的基础上，进行修改，使用**@arcgis/core/layers/WebTileLayer** 这个接口添加天地图，高德的地图api。使用天地图的地图，首先需要在天地图的官网申请地图key，可以自行百度。下列代码中天地图的地址中需要替换自己申请的key。地图的缩略图放在路径“src/assets”下，自己添加即可。详细代码如下：

import WebTileLayer from '@arcgis/core/layers/WebTileLayer'
import {
   reactive } from "vue";

const gdlayer = new WebTileLayer({
   
  id: 'gaode',
  urlTemplate:'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={col}&y={row}&z={level}',
  name: '高德地图',
})
//将地址中的key替换为你自己申请的key
const tdimgtLayer = new WebTileLayer({
   
  id:'tdimg',
  urlTemplate: 'http://{subDomain}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=你自己的key',
  subDomains: ['t0', '