天地图工具库
组件

图层

瓦片图层、WMS 图层、天地图标准图层、格网图层与图层组

图层组件写在 <TdtMap> 内部即自动上屏，卸载时自动移除。

地图加载中…

瓦片图层 TileLayer

<TdtTileLayer
  v-if="showAnno"
  :url="`http://t0.tianditu.gov.cn/cva_w/wmts?tk=你的浏览器端密钥`"
/>
Prop类型说明
urlstring瓦片服务 URL 模板（必填）
minZoom / maxZoomnumber缩放级别范围
opacitynumber透明度
zIndexnumber层级
errorTileUrlstring瓦片加载失败时显示的图片 URL
bounds[[swLng, swLat], [neLng, neLat]] | LngLatBounds图层显示范围

事件（全部瓦片图层通用）：loading load tileloadstart tileload tileunload tileerror

WMS 图层 TileLayer.WMS

<TdtTileLayerWMS url="…" layers="影像" :transparent="true" />

在瓦片图层 props 基础上追加：

Prop类型说明
layersstring用 "," 分隔的多个图层列表
stylesstring样式
formatstring输出图像类型，默认 image/jpeg
transparentboolean是否透明
versionstring请求服务的版本，默认 1.1.1
srsstring地图投影类型，默认 EPSG:900913

天地图标准图层 TileLayer.TDT

<TdtTileLayerTDT url="…" attribution="天地图" />

在瓦片图层 props 基础上追加 attribution（用来描述图层信息）。

格网图层 GridlineLayer

显示经纬网格与行列号、层级的辅助图层：

<TdtGridlineLayer />
Prop类型说明
tileSizenumber格网图层的网格大小，单位像素，默认 256
minZoom / maxZoomnumber缩放级别范围
opacitynumber透明度
outlineSizeobject边线的颜色、宽度、线样式，默认 { width: 1, style: 'solid', color: '#999' }
textSizeobject文字样式（行号、列号、层级），默认不显示

事件：loading load

图层组 LayerGroup

批量管理一组覆盖物的显隐与移除。<TdtMarker> 写在其内部即加入图层组：

<TdtLayerGroup>
  <TdtMarker :lnglat="[116.404, 39.915]" />
  <TdtMarker :lnglat="[116.418, 39.92]" />
</TdtLayerGroup>

Web Components

<tdt-map tk="…" center="116.404,39.915" zoom="12">
  <tdt-gridline-layer opacity="0.6"></tdt-gridline-layer>
  <tdt-tile-layer
    url="http://t0.tianditu.gov.cn/cva_w/wmts?tk=你的浏览器端密钥"
    z-index="2"
  ></tdt-tile-layer>
</tdt-map>

四个图层元素与 Vue 端一一对应：tdt-tile-layer、tdt-tile-layer-wms、tdt-tile-layer-tdt、tdt-gridline-layer。attribute 随上方各表字段（kebab-case），bounds 写成 "swLng,swLat;neLng,neLat"，格网图层的 outline-size、text-size 为纯数据对象，用 JSON。事件以 tdt- 前缀派发（如 tdt-load）。

工具

测距、测面、圆、矩形、标注、画笔与坐标拾取

标绘

标号实体、标绘工具与标绘控件

Copyright © 2026