高德地图地址
高德地图在线瓦片有两个访问地址。
//wprd0{s}./appmaptile?x={x}&y={y}&z={z}&{p} /*访问地址1*///webst{s}./appmaptile?x={x}&y={y}&z={z}&{p} /*访问地址2*/
高德地图采用 GCJ02 火星坐标系，叠加到 Leaflet 和 Cesium 默认的 WGS84 通用坐标系需要进行纠偏。
相关参数：
{s} 是可用的子域之一，用于克服浏览器对每个主机的并发请求数的限制，支持 1234。{x} 是 WMTS 切片方案中的图块 X 坐标，其中 0 是最西端的图块。{y} 是 WMTS 切片方案中的图块 Y 坐标，其中 0 是最北端的图块。{z} 是 WMTS 切片方案中切片的级别，零级是四叉树金字塔的根。{p} 是以下加载代码中封装的自定义请求参数 param，具体参见下表和代码，下表内容在测试中得出，欢迎指正和补充。
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%; }#param-test {position: absolute; z-index: 999; left: 10px; top: 10px; background: white; padding: 0 3px; line-height: 28px; font-size: 14px }#url-input {width: 450px; height: 18px; margin-bottom: 3px; }</style><link rel="stylesheet" href="/leaflet@1.9.2/dist/leaflet.css" /><script src="/leaflet@1.9.2/dist/leaflet.js"></script><script src="/gcoord@0.3.2/dist/gcoord.js"></script></head><body><div id="param-test">测试参数：<input id="url-input" type="text" placeholder="输入地址参数, 例：style=6&lang=zh_cn<ype=0&scl=0&size=0, 并回车" onkeydown="loadTile(this.value)" /></div><div id="map" /></body><script type="text/javascript">L.TileLayer.GaoDeTileLayer = L.TileLayer.extend({initialize: function (param, options) {var templateUrl = "//wprd0{s}./appmaptile?x={x}&y={y}&z={z}&{p}"// var templateUrl = "//webst{s}./appmaptile?x={x}&y={y}&z={z}&{p}"options = L.extend({p: param, subdomains: "1234", minZoom: 0, maxZoom: 23, minNativeZoom: 1, maxNativeZoom: 18 }, options)L.TileLayer.prototype.initialize.call(this, templateUrl, options)},_setZoomTransform: function (level, center, zoom) {center = L.latLng(gcoord.transform([center.lng, center.lat], gcoord.WGS84, gcoord.GCJ02).reverse()) // 采用 gcoord 库进行纠偏L.TileLayer.prototype._setZoomTransform.call(this, level, center, zoom)},_getTiledPixelBounds: function (center) {center = L.latLng(gcoord.transform([center.lng, center.lat], gcoord.WGS84, gcoord.GCJ02).reverse()) // 采用 gcoord 库进行纠偏return L.TileLayer.prototype._getTiledPixelBounds.call(this, center)},})L.tileLayer.gaoDeTileLayer = function (param, options) {return new L.TileLayer.GaoDeTileLayer(param, options) }var c6000_Layer = L.tileLayer.gaoDeTileLayer("lang=zh_cn&style=6<ype=0&scl=0&size=0"), // 影像底图c8000_Layer = L.tileLayer.gaoDeTileLayer("lang=zh_cn&style=8<ype=0&scl=0&size=0"), // 影像标注，路网 + 注记c8200_Layer = L.tileLayer.gaoDeTileLayer("lang=zh_cn&style=8<ype=2&scl=0&size=0"), // 影像标注，路网c8400_Layer = L.tileLayer.gaoDeTileLayer("lang=zh_cn&style=8<ype=4&scl=0&size=0"), // 影像标注，注记c7000_Layer = L.tileLayer.gaoDeTileLayer("lang=zh_cn&style=7<ype=0&scl=0&size=0"), // 电子地图，区域面 + 路网 + 注记 + 楼块c7100_Layer = L.tileLayer.gaoDeTileLayer("lang=zh_cn&style=7<ype=1&scl=0&size=0"), // 电子底图，区域面c7200_Layer = L.tileLayer.gaoDeTileLayer("lang=zh_cn&style=7<ype=2&scl=0&size=0"), // 电子标注，路网c7300_Layer = L.tileLayer.gaoDeTileLayer("lang=zh_cn&style=7<ype=3&scl=0&size=0"), // 电子底图，区域面 + 路网c7400_Layer = L.tileLayer.gaoDeTileLayer("lang=zh_cn&style=7<ype=4&scl=0&size=0"), // 电子标注，注记c7500_Layer = L.tileLayer.gaoDeTileLayer("lang=zh_cn&style=7<ype=5&scl=0&size=0"), // 电子底图，区域面 + 注记c7600_Layer = L.tileLayer.gaoDeTileLayer("lang=zh_cn&style=7<ype=6&scl=0&size=0"), // 电子标注，路网 + 注记c7700_Layer = L.tileLayer.gaoDeTileLayer("lang=zh_cn&style=7<ype=7&scl=0&size=0"), // 电子底图，区域面 + 路网 + 注记c7800_Layer = L.tileLayer.gaoDeTileLayer("lang=zh_cn&style=7<ype=8&scl=0&size=0"), // 电子底图，楼块c7020_Layer = L.tileLayer.gaoDeTileLayer("lang=zh_cn&style=7<ype=0&scl=2&size=0") // 电子底图，区域面 + 路网 + 楼块var n7000_Layer = L.tileLayer.gaoDeTileLayer("style=7<ype=0&scl=0&size=0"), // 旧版电子地图，中文标注e0000_Layer = L.tileLayer.gaoDeTileLayer("lang=zh_en&style=7<ype=0&scl=0&size=0") // 旧版电子地图，英文标注var map = L.map("map", {center: [29.708050, 118.321499], zoom: 15, zoomControl: false, attributionControl: false, doubleClickZoom: false })var overlayLayers = {"影像底图": c6000_Layer, "影像标注，路网 + 注记": c8000_Layer, "影像标注，路网": c8200_Layer, "影像标注，注记": c8400_Layer,"电子地图，区域面 + 路网 + 注记 + 楼块": c7000_Layer, "电子底图，区域面": c7100_Layer, "电子标注，路网": c7200_Layer, "电子底图，区域面 + 路网": c7300_Layer, "电子标注，注记": c7400_Layer, "电子底图，区域面 + 注记": c7500_Layer, "电子标注，路网 + 注记": c7600_Layer, "电子底图，区域面 + 路网 + 注记": c7700_Layer, "电子底图，楼块": c7800_Layer, "电子底图，区域面 + 路网 + 楼块": c7020_Layer,"旧版电子地图，中文标注": n7000_Layer, "旧版电子地图，英文标注": e0000_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) })var test_Layer = nullfunction loadTile (param) {if (!window.event || window.event.keyCode === 13) {// keyCode ===13 表示按下回车if (test_Layer !== null) {map.removeLayer(test_Layer)test_Layer = null}if (!param) returntest_Layer = L.tileLayer.gaoDeTileLayer(param)map.addLayer(test_Layer)}}var param = "lang=zh_cn&style=6<ype=0&scl=0&size=0"document.getElementById("url-input").value = paramloadTile(param)</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%; }#param-test {position: absolute; z-index: 999; left: 10px; top: 10px; background: white; padding: 0 3px; line-height: 28px; font-size: 14px }#url-input {width: 450px; height: 18px; margin-bottom: 3px; }.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: 250px; 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="/cesium@1.98.1/Build/Cesium/Widgets/widgets.css" /><script src="/cesium@1.98.1/Build/Cesium/Cesium.js"></script><script src="/gcoord@0.3.2/dist/gcoord.js"></script></head><body><div id="param-test">测试参数：<input id="url-input" type="text" placeholder="输入地址参数, 例：style=6&lang=zh_cn<ype=0&scl=0&size=0, 并回车" onkeydown="loadTile(this.value)" /></div><div id="map" /></body><script type="text/javascript">class GaoDeMercatorProjection extends Cesium.WebMercatorProjection {project (cartographic, result) {const correct = gcoord.transform([Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude)], gcoord.WGS84, gcoord.GCJ02)cartographic.longitude = Cesium.Math.toRadians(correct[0])cartographic.latitude = Cesium.Math.toRadians(correct[1])return super.project(cartographic, result)}unproject (cartesian, result) {result = super.unproject(cartesian, result)const correct = gcoord.transform([Cesium.Math.toDegrees(result.longitude), Cesium.Math.toDegrees(result.latitude)], gcoord.GCJ02, gcoord.WGS84)result.longitude = Cesium.Math.toRadians(correct[0])result.latitude = Cesium.Math.toRadians(correct[1])return result}} Cesium.GaoDeMercatorProjection = GaoDeMercatorProjectionclass GaoDeMercatorTilingScheme extends Cesium.WebMercatorTilingScheme {constructor (options) {super(options)this._projection = new Cesium.GaoDeMercatorProjection(this._ellipsoid);}}Cesium.GaoDeMercatorTilingScheme = GaoDeMercatorTilingSchemeclass GaoDeImageryProvider extends Cesium.UrlTemplateImageryProvider {constructor (param, options = {}) {var templateUrl = "//wprd0{s}./appmaptile?x={x}&y={y}&z={z}&{p}"// var templateUrl = "//webst{s}./appmaptile?x={x}&y={y}&z={z}&{p}"var myUrl = templateUrl.replace(/\{p\}/g, param)super(Object.assign({}, {url: myUrl, subdomains: "1234", minimumLevel: 1, maximumLevel: 18, tilingScheme: new Cesium.GaoDeMercatorTilingScheme() }, options))}}Cesium.GaoDeImageryProvider = GaoDeImageryProviderCesium.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(puteViewRectangle()) // 可以返回当前区域矩形，以弧度为单位 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 c6000_Layer = new Cesium.GaoDeImageryProvider("lang=zh_cn&style=6<ype=0&scl=0&size=0"), // 影像底图c8000_Layer = new Cesium.GaoDeImageryProvider("lang=zh_cn&style=8<ype=0&scl=0&size=0"), // 影像标注，路网 + 注记c8200_Layer = new Cesium.GaoDeImageryProvider("lang=zh_cn&style=8<ype=2&scl=0&size=0"), // 影像标注，路网c8400_Layer = new Cesium.GaoDeImageryProvider("lang=zh_cn&style=8<ype=4&scl=0&size=0"), // 影像标注，注记c7000_Layer = new Cesium.GaoDeImageryProvider("lang=zh_cn&style=7<ype=0&scl=0&size=0"), // 电子地图，区域面 + 路网 + 注记 + 楼块c7100_Layer = new Cesium.GaoDeImageryProvider("lang=zh_cn&style=7<ype=1&scl=0&size=0"), // 电子底图，区域面c7200_Layer = new Cesium.GaoDeImageryProvider("lang=zh_cn&style=7<ype=2&scl=0&size=0"), // 电子标注，路网c7300_Layer = new Cesium.GaoDeImageryProvider("lang=zh_cn&style=7<ype=3&scl=0&size=0"), // 电子底图，区域面 + 路网c7400_Layer = new Cesium.GaoDeImageryProvider("lang=zh_cn&style=7<ype=4&scl=0&size=0"), // 电子标注，注记c7500_Layer = new Cesium.GaoDeImageryProvider("lang=zh_cn&style=7<ype=5&scl=0&size=0"), // 电子底图，区域面 + 注记c7600_Layer = new Cesium.GaoDeImageryProvider("lang=zh_cn&style=7<ype=6&scl=0&size=0"), // 电子标注，路网 + 注记c7700_Layer = new Cesium.GaoDeImageryProvider("lang=zh_cn&style=7<ype=7&scl=0&size=0"), // 电子底图，区域面 + 路网 + 注记c7800_Layer = new Cesium.GaoDeImageryProvider("lang=zh_cn&style=7<ype=8&scl=0&size=0"), // 电子底图，楼块c7020_Layer = new Cesium.GaoDeImageryProvider("lang=zh_cn&style=7<ype=0&scl=2&size=0") // 电子底图，区域面 + 路网 + 楼块var n7000_Layer = new Cesium.GaoDeImageryProvider("style=7<ype=0&scl=0&size=0"), // 旧版电子地图，中文标注e0000_Layer = new Cesium.GaoDeImageryProvider("lang=zh_en&style=7<ype=0&scl=0&size=0") // 旧版电子地图，英文标注viewer.baseLayerPicker._dropPanel.children[0].innerHTML = "底图"viewer.baseLayerPicker.viewModel.imageryProviderViewModels = [new Cesium.ProviderViewModel({creationFunction: function () {return c6000_Layer }, name: "影像底图" }),new Cesium.ProviderViewModel({creationFunction: function () {return c8000_Layer }, name: "影像标注，路网 + 注记" }),new Cesium.ProviderViewModel({creationFunction: function () {return c8200_Layer }, name: "影像标注，路网" }),new Cesium.ProviderViewModel({creationFunction: function () {return c8400_Layer }, name: "影像标注，注记" }),new Cesium.ProviderViewModel({creationFunction: function () {return c7000_Layer }, name: "电子地图，区域面 + 路网 + 注记 + 楼块" }),new Cesium.ProviderViewModel({creationFunction: function () {return c7100_Layer }, name: "电子底图，区域面" }),new Cesium.ProviderViewModel({creationFunction: function () {return c7200_Layer }, name: "电子标注，路网" }),new Cesium.ProviderViewModel({creationFunction: function () {return c7300_Layer }, name: "电子底图，区域面 + 路网" }),new Cesium.ProviderViewModel({creationFunction: function () {return c7400_Layer }, name: "电子标注，注记" }),new Cesium.ProviderViewModel({creationFunction: function () {return c7500_Layer }, name: "电子底图，区域面 + 注记" }),new Cesium.ProviderViewModel({creationFunction: function () {return c7600_Layer }, name: "电子标注，路网 + 注记" }),new Cesium.ProviderViewModel({creationFunction: function () {return c7700_Layer }, name: "电子底图，区域面 + 路网 + 注记" }),new Cesium.ProviderViewModel({creationFunction: function () {return c7800_Layer }, name: "电子底图，楼块" }),new Cesium.ProviderViewModel({creationFunction: function () {return c7020_Layer }, name: "电子底图，区域面 + 路网 + 楼块" }),new Cesium.ProviderViewModel({creationFunction: function () {return n7000_Layer }, name: "旧版电子地图，中文标注" }),new Cesium.ProviderViewModel({creationFunction: function () {return e0000_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 } }) //添加点用于纠偏测试var test_Layer = nullfunction loadTile (param) {if (!window.event || window.event.keyCode === 13) {// keyCode === 13 表示按下回车if (test_Layer !== null) {viewer.imageryLayers.remove(test_Layer, true)test_Layer = null}if (!param) returntest_Layer = viewer.imageryLayers.addImageryProvider(new Cesium.GaoDeImageryProvider(param))}}var param = "lang=zh_cn&style=6<ype=0&scl=0&size=0"document.getElementById("url-input").value = paramloadTile(param)</script></html>
参考链接
其他文章：/nodegis/p/11206642.html
高德地图控制台：/
