Leaflet 和 Cesium 加载天地图在线瓦片，天地图在线瓦片地址

您所在的位置：网站首页 › leaflet地图瓦片切换 › Leaflet 和 Cesium 加载天地图在线瓦片，天地图在线瓦片地址

Leaflet 和 Cesium 加载天地图在线瓦片，天地图在线瓦片地址

2023-11-14 10:09| 来源: 网络整理| 查看: 265

天地图地址

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

//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_wimg影像底图[1,18]cia_wcia影像标注[1,18]eia_weia影像英文标注[1,18]vec_wvec电子底图[1,18]cva_wcva电子标注[1,18]eva_weva电子英文标注[1,18]ter_wter地形底图[1,18]cta_wcta地形标注[1,18]ibo_wibo全球境界[3,10] Leaflet 添加代码

在线运行

DOCTYPE html> body { padding: 0; margin: 0; } html, body, #map { height: 100%; } 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) }) Cesium 添加代码

在线运行

DOCTYPE html> 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; } 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 } }) //添加点用于纠偏测试参考链接

天地图API：http://lbs.tianditu.gov.cn/server/MapService.html

【本文地址】

Leaflet 和 Cesium 加载天地图在线瓦片，天地图在线瓦片地址

Leaflet 和 Cesium 加载天地图在线瓦片，天地图在线瓦片地址

今日新闻

推荐新闻