天地图地址

天地图在线瓦片有两种访问方式。

//t{s}.tianditu.gov.cn/DataServer?t={t}&x={x}&y={y}&l={z}&tk={k} /*访问地址1*/
//t{s}.tianditu.gov.cn/{t}/wmts?service=WMTS&request=GetTile&version=1.0.0&layer={l}&style=default&tilematrixset=w&format=tiles&tilematrix={z}&tilecol={x}&tilerow={y}&tk={k} /*访问地址2*/

天地图本身采用的就是 WGS84 通用坐标系，叠加到 Leaflet 和 Cesium 时无需纠偏。

相关参数：

  • {s} 是可用的子域之一，用于克服浏览器对每个主机的并发请求数的限制，支持 01234567。
  • {t} 和 {l} 是天地图图层类型，具体参见下表。
  • {x} 是 WMTS 切片方案中的图块X坐标，其中0是最西端的图块。
  • {y} 是 WMTS 切片方案中的图块Y坐标，其中0是最北端的图块。
  • {z} 是 WMTS 切片方案中切片的级别，零级是四叉树金字塔的根。
  • {k} 是天地图访问所需的 key，需要自行去天地图官网申请。

{t} 和 {l}图形类型说明列表

{t}

{l}

图层

瓦片级别（测试得出，欢迎指正）

img_w

img

影像底图

[1,18]

cia_w

cia

影像标注

[1,18]

eia_w

eia

影像英文标注

[1,18]

vec_w

vec

电子底图

[1,18]

cva_w

cva

电子标注

[1,18]

eva_w

eva

电子英文标注

[1,18]

ter_w

ter

地形底图

[1,18]

cta_w

cta

地形标注

[1,18]

ibo_w

ibo

全球境界

[3,10]

Leaflet 添加代码


<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
      body { padding: 0; margin: 0; }
      html, body, #map { height: 100%; }
    </style>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.2/dist/leaflet.js"></script>
  </head>
  <body>
    <div id="map" />
  </body>
  <script type="text/javascript">
    L.TileLayer.TdtTileLayer = L.TileLayer.extend({ // 拓展天地图瓦片图层
      initialize: function (type, key, options) {
        var templateUrl = "//t{s}.tianditu.gov.cn/DataServer?T={t}&x={x}&y={y}&l={z}&tk={k}"
        // var templateUrl = "//t{s}.tianditu.gov.cn/{t}/wmts?service=WMTS&request=GetTile&version=1.0.0&layer={l}&style=default&tilematrixset=w&format=tiles&tilematrix={z}&tilecol={x}&tilerow={y}&tk={k}"
        options = L.extend({ t: type, l: type.substr(0, 3), k: key, subdomains: "01234567", minZoom: 0, maxZoom: 23, minNativeZoom: type === "ibo_w" ? 3 : 1, maxNativeZoom: type === "ibo_w" ? 10 : 18 }, options)
        L.TileLayer.prototype.initialize.call(this, templateUrl, options)
      }
    })
    L.tileLayer.tdtTileLayer = function (type, key, options) { return new L.TileLayer.TdtTileLayer(type, key, options) }

    var img_Layer = L.tileLayer.tdtTileLayer("img_w", "d083e4cf30bfc438ef93436c10c2c20a"),
      cia_Layer = L.tileLayer.tdtTileLayer("cia_w", "d083e4cf30bfc438ef93436c10c2c20a"),
      eia_Layer = L.tileLayer.tdtTileLayer("eia_w", "d083e4cf30bfc438ef93436c10c2c20a"),
      vec_Layer = L.tileLayer.tdtTileLayer("vec_w", "d083e4cf30bfc438ef93436c10c2c20a"),
      cva_Layer = L.tileLayer.tdtTileLayer("cva_w", "d083e4cf30bfc438ef93436c10c2c20a"),
      eva_Layer = L.tileLayer.tdtTileLayer("eva_w", "d083e4cf30bfc438ef93436c10c2c20a"),
      ter_Layer = L.tileLayer.tdtTileLayer("ter_w", "d083e4cf30bfc438ef93436c10c2c20a"),
      cta_Layer = L.tileLayer.tdtTileLayer("cta_w", "d083e4cf30bfc438ef93436c10c2c20a"),
      ibo_Layer = L.tileLayer.tdtTileLayer("ibo_w", "d083e4cf30bfc438ef93436c10c2c20a")

    var map = L.map("map", { center: [29.708050, 118.321499], zoom: 15, layers: [img_Layer], zoomControl: false, attributionControl: false, doubleClickZoom: false })
    var overlayLayers = {
      "影像底图": img_Layer, "影像注记": cia_Layer, "影像英文注记": eia_Layer,
      "电子底图": vec_Layer, "电子注记": cva_Layer, "电子英文注记": eva_Layer,
      "地形底图": ter_Layer, "地形注记": cta_Layer, "全球境界": ibo_Layer
    }
    L.control.layers([], overlayLayers, { autoZIndex: false }).addTo(map)
    L.marker([29.708050, 118.321499]).addTo(map) // 添加点用于纠偏测试
    // map.on('dblclick', function (e) { console.dir(e.latlng.lng + "," + e.latlng.lat) })
  </script>
</html>

Cesium 添加代码

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css">
      body { padding: 0; margin: 0; }
      html, body, #map { height: 100%; }
      .cesium-viewer .cesium-viewer-bottom { display: none; }
      .cesium-viewer .cesium-baseLayerPicker-item { display: block; width: auto; margin: 3px 10px; }
      .cesium-viewer .cesium-baseLayerPicker-itemIcon, .cesium-viewer .cesium-baseLayerPicker-sectionTitle { display: none; }
      .cesium-viewer .cesium-baseLayerPicker-itemLabel { text-align: left; }
      .cesium-viewer .cesium-baseLayerPicker-dropDown { width: 100px; padding: 0; margin: 0; }
      .cesium-viewer .cesium-baseLayerPicker-choices { border: none; }
      .cesium-viewer .cesium-baseLayerPicker-selectedItem .cesium-baseLayerPicker-itemLabel { color: #00cbff; }
    </style>
    <link rel="stylesheet" href="https://unpkg.com/cesium@1.98.1/Build/Cesium/Widgets/widgets.css" />
    <script src="https://unpkg.com/cesium@1.98.1/Build/Cesium/Cesium.js"></script>
  </head>
  <body>
    <div id="map" />
  </body>
  <script type="text/javascript">
    class TdtImageryProvider extends Cesium.UrlTemplateImageryProvider {
      constructor (type, key, options = {}) {
        var templateUrl = "//t{s}.tianditu.gov.cn/DataServer?T={t}&x={x}&y={y}&l={z}&tk={k}"
        // var templateUrl = "//t{s}.tianditu.gov.cn/{t}/wmts?service=WMTS&request=GetTile&version=1.0.0&layer={l}&style=default&tilematrixset=w&format=tiles&tilematrix={z}&tilecol={x}&tilerow={y}&tk={k}"
        var myUrl= templateUrl.replace(/\{t\}/g, type).replace(/\{l\}/g, type.substr(0, 3)).replace(/\{k\}/g, key)
        super(Object.assign({}, { url: myUrl, subdomains: "01234567", minimumLevel: type === "ibo_w" ? 3 : 1, maximumLevel: type === "ibo_w" ? 10 : 18 }, options))
      }
    }
    Cesium.TdtImageryProvider = TdtImageryProvider

    Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwNGNmNWUwMi02NWEyLTQxNzItOTNhNC1mY2NiZTcxNDc2OWYiLCJpZCI6MTU5NDQsInNjb3BlcyI6WyJhc2wiLCJhc3IiLCJhc3ciLCJnYyJdLCJpYXQiOjE1NjkyMjk3MTN9.PYUfCHykW23NuwRzzz04yW7JyZ4vQlcb4kToZ44r42w"
    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(118.282527, 29.692229, 118.360733, 29.724694) // 设置相机默认范围为自定义区域
    Cesium.Camera.DEFAULT_VIEW_FACTOR = 0
    // console.debug(viewer.camera.computeViewRectangle()) // 可以返回当前区域矩形，以弧度为单位 
    var viewer = new Cesium.Viewer("map", {
      animation: false, // 是否显示动画控件
      baseLayerPicker: true, // 是否显示图层选择控件
      vrButton: false, // 是否显示VR控件
      fullscreenButton: false, // 是否显示全屏按钮
      geocoder: false, // 是否显示地名查找控件
      homeButton: false, // 是否显示返回主视角控件
      sceneModePicker: false, // 是否显示投影方式控件
      selectionIndicator: false, // 是否显示选中指示框
      timeline: false, // 是否显示时间线控件
      navigationHelpButton: false, // 是否显示帮助信息控件
      infoBox: false, // 是否显示点击要素之后显示的信息
    })
    viewer.imageryLayers.removeAll(viewer.imageryLayers.get(0)) // 移除 Cesium 默认图层
    viewer.scene.globe.baseColor = new Cesium.Color(0, 0, 0, 0)  // 设置地球背景色黑色

    var img_Layer = new Cesium.TdtImageryProvider("img_w", "d083e4cf30bfc438ef93436c10c2c20a"),
      cia_Layer = new Cesium.TdtImageryProvider("cia_w", "d083e4cf30bfc438ef93436c10c2c20a"),
      eia_Layer = new Cesium.TdtImageryProvider("eia_w", "d083e4cf30bfc438ef93436c10c2c20a"),
      vec_Layer = new Cesium.TdtImageryProvider("vec_w", "d083e4cf30bfc438ef93436c10c2c20a"),
      cva_Layer = new Cesium.TdtImageryProvider("cva_w", "d083e4cf30bfc438ef93436c10c2c20a"),
      eva_Layer = new Cesium.TdtImageryProvider("eva_w", "d083e4cf30bfc438ef93436c10c2c20a"),
      ter_Layer = new Cesium.TdtImageryProvider("ter_w", "d083e4cf30bfc438ef93436c10c2c20a"),
      cta_Layer = new Cesium.TdtImageryProvider("cta_w", "d083e4cf30bfc438ef93436c10c2c20a"),
      ibo_Layer = new Cesium.TdtImageryProvider("ibo_w", "d083e4cf30bfc438ef93436c10c2c20a")

    viewer.baseLayerPicker._dropPanel.children[0].innerHTML = "底图"
    viewer.baseLayerPicker.viewModel.imageryProviderViewModels = [
      new Cesium.ProviderViewModel({ creationFunction: function () { return img_Layer }, name: "影像底图" }),
      new Cesium.ProviderViewModel({ creationFunction: function () { return cia_Layer }, name: "影像注记" }),
      new Cesium.ProviderViewModel({ creationFunction: function () { return eia_Layer }, name: "影像英文注记" }),
      new Cesium.ProviderViewModel({ creationFunction: function () { return vec_Layer }, name: "电子底图" }),
      new Cesium.ProviderViewModel({ creationFunction: function () { return cva_Layer }, name: "电子注记" }),
      new Cesium.ProviderViewModel({ creationFunction: function () { return eva_Layer }, name: "电子英文注记" }),
      new Cesium.ProviderViewModel({ creationFunction: function () { return ter_Layer }, name: "地形底图" }),
      new Cesium.ProviderViewModel({ creationFunction: function () { return cta_Layer }, name: "地形注记" }),
      new Cesium.ProviderViewModel({ creationFunction: function () { return ibo_Layer }, name: "全球境界" })
    ]
    viewer.baseLayerPicker.viewModel.selectedImagery = viewer.baseLayerPicker.viewModel.imageryProviderViewModels[0]

    viewer.baseLayerPicker._dropPanel.children[2].innerHTML = "地形"
    viewer.baseLayerPicker.viewModel.terrainProviderViewModels = []    
    viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(118.321499, 29.708050), point: { pixelSize: 5, color: Cesium.Color.RED } }) //添加点用于纠偏测试
  </script>
</html>