天地图地址
天地图在线瓦片有两种访问方式。
//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/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/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/[email protected]/Build/Cesium/Widgets/widgets.css" />
<script src="https://unpkg.com/[email protected]/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>
参考链接
天地图API：http://lbs.tianditu.gov.cn/server/MapService.html
![怎样使用SpringMVC控制页面[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)