在 ArcGIS 上使用天地图作为底图

目标:

1. ArcGIS 服务器在国外, 使用天地图在国内更快.
2. 涉及地理信息, 涵盖敏感数据.

基本步骤:

1. 在天地图注册, 注册开发者, 获得 key.
2. 使用瓦片创建 WebTileLayer 类用于设置 Map 底图.

1. 天地图

天地图网址: https://www.tianditu.gov.cn/

注册账户后, 在再申请开发者账户.

2. 天地图地图服务

进入开发资源:

在页面底部有请求资源的格式

地图服务提供了瓦片接口, 在 ArcGIS 中使用 WebTileLayer 类来加载资源.

注意携带 秘钥

在使用不同的 API 加载地图或注记时:

1. 需要使用球面墨卡托投影.
2. 注意第一段 url 路径, 需要用其值 (不含后缀), 来替换接口中的类型.

3. 创建 ArcGIS 地图

这里使用 VUE + TS 来描述

npm create vue@latest

这里尽可能使用少的模块.

进入项目目录, 安装依赖, 然后安装 ArcGIS

cd use-tiandi-in-arcgis
npm i
npm i @arcgis/core

清理一下代码:

<script setup lang="ts">
import { onMounted, ref } from 'vue';

const arcgis = ref<HTMLDivElement>()

</script>

<template>
  <div class="arcgis" ref="arcgis"></div>
</template>

<style>
* { margin: 0; padding: 0; }

.arcgis {
  width: 100vw;
  height: 100vh;
}
</style>

导入模块:

import Basemap from '@arcgis/core/Basemap'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import WebTileLayer from '@arcgis/core/layers/WebTileLayer'

加载 CSS:

import '@arcgis/core/assets/esri/themes/light/main.css'

创建 WebTileLayer:

// 影像底图
const layer0 = new WebTileLayer({
  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=您的密钥',
  subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7']
})

// 影像注记
const layer1 = new WebTileLayer({
  urlTemplate: 'http://{subDomain}.tianditu.gov.cn/cia_w/wmts?' 
              + 'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia' 
              + '&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}' 
              + '&tk=您的密钥',
  subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7']
})

创建 Basemap 实例, 再创建 Map:

const basemap = new Basemap({
  baseLayers: [ layer0, layer1 ]
})
const map = new Map({
  basemap: basemap
})

在 onMounted 声明周期中创建 MapView:

const mapView = new MapView({
  map: map,
  center: [120, 28],
  zoom: 4,
  container: arcgisDiv.value
})

预览: