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

天地图地址

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

//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 时无需纠偏。

{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 = TdtImageryProviderCesium.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

Leaflet 和 Cesium 加载天地图在线瓦片，天地图在线瓦片地址相关推荐

Leaflet 和 Cesium 加载纠偏后高德地图在线瓦片，高德地图最新最全在线瓦片地址
高德地图地址高德地图在线瓦片有两个访问地址. //wprd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&{p} /*访问 ...
leaflet、cesium加载百度地图，加载自定义样式百度地图
1 leaflet.cesium加载百度地图(官方预设样式) 预留,待补充 2 leaflet.cesium加载百度自定义样式地图样式编辑器新版地址:http://lbsyun.baidu.com/ ...
Cesium 加载离线的天地图影像瓦片
Cesium 加载离线的天地图影像瓦片一.下载天地图影像通过水经注软件下载天地图影像(也许有其他下载方式). 1.下载水经注软件链接:http://www.rivermap.cn/down ...
三维地图之cesium加载天地图（有代码）
天地图官网上写了cesium加载天地图的方法,http://lbs.tianditu.gov.cn/docs/#/sanwei/,但读起来,写起来,的确令人费解. 下面写一段非常简单的代码,用cesi ...
Cesium加载建筑物模型（shp转Geojson\3Dtiles）
本文主要介绍cesium加载Geojson和3dtile格式的建筑物模型文件,除此之外还介绍了Cesium工具栏的屏蔽方法.天地图的加载.地球初始状态设置等几个部分的内容,其中又不乏参照.优化诸如: ...
QGIS离线GeoJSON数据，使用Cesium加载并根据楼层高度拉伸（weixin公众号【图说GIS】）
前言往往好多事情是需求推动的,正好一个网友在群里问到"怎么让Cesium加载GeoJSON的白膜并贴在地形上?",联系到他,要了他的数据,完成了代码并测试通过.正好出差,而且一个 ...
Cesium加载3D Tiles数据
使用原生Cesium加载3D Tiles数据,并实现对图层的选中.样式的修改.图元的隐藏. 实现代码 <!DOCTYPE html> <html lang="en" ...
首次使用Cesium加载3D数据不成功
接此: https://blog.csdn.net/bcbobo21cn/article/details/110454547 参阅相关教程:Cesium加载3D数据是通过3D Tiles进行: 3D ...
cesium加载百度地图_Cesium专栏-百度地图加载（附源码下载）
Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以 ...

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

天地图地址

Leaflet 添加代码

Cesium 添加代码

参考链接

Leaflet 和 Cesium 加载天地图在线瓦片，天地图在线瓦片地址相关推荐

最新文章

热门文章