Cesium 添加天地图三维地形

天地图三维地址

地址列表	地址
三维地形服务	`//t{s}.tianditu.gov.cn/mapservice/swdx?T=elv_c&tk={key}`
三维地名服务	`//t{s}.tianditu.gov.cn/mapservice/GetTiles?lxys={z},{x},{y}&tk={key}`
三维图标服务	`//t{s}.tianditu.gov.cn/mapservice/GetIcon?id={id}&tk={key}`

天地图三维官方支持较少，仅作学习，使用场景有限，项目使用可参考https://blog.csdn.net/qq_19689967/article/details/121063706

Cesium 添加代码

添加之前必须引入天地图的 Cesium 插件，引入方式：

<script src="https://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js" ></script>

插件支持的 Cesuim 版本只有1.52、1.58、1.63.1。
在线运行（加载较慢）

<!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; }</style><link rel="stylesheet" href="https://unpkg.com/cesium@1.63.1/Build/Cesium/Widgets/widgets.css" /><script src="https://unpkg.com/cesium@1.63.1/Build/Cesium/Cesium.js"></script><script src="https://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.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(117.829599, 29.542412, 118.788968, 29.946417) // 设置相机默认范围为自定义区域Cesium.Camera.DEFAULT_VIEW_FACTOR = 0// console.debug(viewer.camera.computeViewRectangle()) // 可以返回当前区域矩形，以弧度为单位 var viewer = new Cesium.Map("map", {animation: false, // 是否显示动画控件baseLayerPicker: false, // 是否显示图层选择控件vrButton: false, // 是否显示VR控件fullscreenButton: false, // 是否显示全屏按钮geocoder: false, // 是否显示地名查找控件homeButton: false, // 是否显示返回主视角控件sceneModePicker: false, // 是否显示投影方式控件selectionIndicator: false, // 是否显示选中指示框timeline: false, // 是否显示时间线控件navigationHelpButton: false, // 是否显示帮助信息控件infoBox: false // 是否显示点击要素之后显示的信息})viewer.imageryLayers.remove(viewer.imageryLayers.get(0)) //移除 Cesium 默认图层viewer.scene.globe.baseColor = new Cesium.Color(0, 0, 0, 1)  //设置地球背景色黑色viewer.imageryLayers.addImageryProvider(new Cesium.TdtImageryProvider("img_w", "d083e4cf30bfc438ef93436c10c2c20a"))viewer.imageryLayers.addImageryProvider(new Cesium.TdtImageryProvider("cia_w", "d083e4cf30bfc438ef93436c10c2c20a"))    viewer.terrainProvider = new Cesium.GeoTerrainProvider({ urls: "01234567".split("").map((o) => { return "//t" + o + ".tianditu.gov.cn/mapservice/swdx?T=elv_c&tk=d083e4cf30bfc438ef93436c10c2c20a" }) })var wtfs = new Cesium.GeoWTFS({ // 叠加三维地名服务, 三维地名服务，使用wtfs服务viewer: viewer,subdomains: "01234567",metadata: { boundBox: { minX: -180, minY: -90, maxX: 180, maxY: 90 }, minLevel: 1, maxLevel: 20 },depthTestOptimization: true,dTOElevation: 15000,dTOPitch: Cesium.Math.toRadians(-70),aotuCollide: true, // 是否开启避让collisionPadding: [5, 10, 8, 5], // 开启避让时，标注碰撞增加内边距，上、右、下、左serverFirstStyle: true, // 服务端样式优先labelGraphics: { font: "28px sans-serif", fontSize: 28, fillColor: Cesium.Color.WHITE, scale: 0.5, outlineColor: Cesium.Color.BLACK, outlineWidth: 2, style: Cesium.LabelStyle.FILL_AND_OUTLINE, showBackground: false, backgroundColor: Cesium.Color.RED, backgroundPadding: new Cesium.Cartesian2(10, 10), horizontalOrigin: Cesium.HorizontalOrigin.LEFT, verticalOrigin: Cesium.VerticalOrigin.TOP, eyeOffset: Cesium.Cartesian3.ZERO, pixelOffset: new Cesium.Cartesian2(5, 5), disableDepthTestDistance: undefined },billboardGraphics: { horizontalOrigin: Cesium.HorizontalOrigin.CENTER, verticalOrigin: Cesium.VerticalOrigin.CENTER, eyeOffset: Cesium.Cartesian3.ZERO, pixelOffset: Cesium.Cartesian2.ZERO, alignedAxis: Cesium.Cartesian3.ZERO, color: Cesium.Color.WHITE, rotation: 0, scale: 1, width: 18, height: 18, disableDepthTestDistance: undefined }})wtfs.getTileUrl = function () { return "//t{s}.tianditu.gov.cn/mapservice/GetTiles?lxys={z},{x},{y}&tk=d083e4cf30bfc438ef93436c10c2c20a" } // 三维地名服务，使用wtfs服务wtfs.getIcoUrl = function () { return "//t{s}.tianditu.gov.cn/mapservice/GetIcon?id={id}&tk=d083e4cf30bfc438ef93436c10c2c20a" } // 三维图标服务wtfs.initTDT([{ "x": 6, "y": 1, "level": 2, "boundBox": { "minX": 90, "minY": 0, "maxX": 135, "maxY": 45 } },{ "x": 7, "y": 1, "level": 2, "boundBox": { "minX": 135, "minY": 0, "maxX": 180, "maxY": 45 } },{ "x": 6, "y": 0, "level": 2, "boundBox": { "minX": 90, "minY": 45, "maxX": 135, "maxY": 90 } },{ "x": 7, "y": 0, "level": 2, "boundBox": { "minX": 135, "minY": 45, "maxX": 180, "maxY": 90 } },{ "x": 5, "y": 1, "level": 2, "boundBox": { "minX": 45, "minY": 0, "maxX": 90, "maxY": 45 } },{ "x": 4, "y": 1, "level": 2, "boundBox": { "minX": 0, "minY": 0, "maxX": 45, "maxY": 45 } },{ "x": 5, "y": 0, "level": 2, "boundBox": { "minX": 45, "minY": 45, "maxX": 90, "maxY": 90 } },{ "x": 4, "y": 0, "level": 2, "boundBox": { "minX": 0, "minY": 45, "maxX": 45, "maxY": 90 } },{ "x": 6, "y": 2, "level": 2, "boundBox": { "minX": 90, "minY": -45, "maxX": 135, "maxY": 0 } },{ "x": 6, "y": 3, "level": 2, "boundBox": { "minX": 90, "minY": -90, "maxX": 135, "maxY": -45 } },{ "x": 7, "y": 2, "level": 2, "boundBox": { "minX": 135, "minY": -45, "maxX": 180, "maxY": 0 } },{ "x": 5, "y": 2, "level": 2, "boundBox": { "minX": 45, "minY": -45, "maxX": 90, "maxY": 0 } },{ "x": 4, "y": 2, "level": 2, "boundBox": { "minX": 0, "minY": -45, "maxX": 45, "maxY": 0 } },{ "x": 3, "y": 1, "level": 2, "boundBox": { "minX": -45, "minY": 0, "maxX": 0, "maxY": 45 } },{ "x": 3, "y": 0, "level": 2, "boundBox": { "minX": -45, "minY": 45, "maxX": 0, "maxY": 90 } },{ "x": 2, "y": 0, "level": 2, "boundBox": { "minX": -90, "minY": 45, "maxX": -45, "maxY": 90 } },{ "x": 0, "y": 1, "level": 2, "boundBox": { "minX": -180, "minY": 0, "maxX": -135, "maxY": 45 } },{ "x": 1, "y": 0, "level": 2, "boundBox": { "minX": -135, "minY": 45, "maxX": -90, "maxY": 90 } },{ "x": 0, "y": 0, "level": 2, "boundBox": { "minX": -180, "minY": 45, "maxX": -135, "maxY": 90 } }])viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(118.159084, 29.908912, 18000.0),orientation: { heading: Cesium.Math.TWO_PI, pitch: -30.0 / Cesium.Math.DEGREES_PER_RADIAN, roll: 0.0 }})</script>
</html>

参考链接

天地图帮助文档：http://lbs.tianditu.gov.cn/docs/#/sanwei/

Cesium 添加天地图三维地形相关推荐

最新版Cesium使用天地图三维地形、地名服务
目录 1.项目地址 2.实现效果 3.实现方法 1.项目地址可直接运行. https://github.com/zhengjie9510/cesium-tdt 2.实现效果 3.实现方法参考博客修 ...
《Cesium 进阶知识点》 - 加载天地图三维地名服务（无Cesium 版本依赖）
一.解决依赖天地图官网说只支持 1.52.1.58.1.63.1 这 3个版本,其它版本报错.但我只使用三维地名服务.所以做了如下修改. 我在 1.80 版和 1.84 版中测试有效.操作部署是: ...
cesium开发加油站1：cesium场景添加多边形贴地形或模型
cesium开发加油站1:cesium场景添加多边形贴地形或模型前言原代码更改后代码前言本篇文章主要介绍ceisum场景中,用GroundPrimitive替换Primitive加载多边形时 ...
Cesium入门-2-增加地形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
第一章：Vue3.0+Openlayers+Cesium创建二三维联动项目
Vue3.0+Openlayers+Cesium创建二三维联动项目简介 Vue项目创建安装依赖框架结构地图加载显示效果结语简介大家好!从今天开始,我将分享我在GIS开发的过程中如何利用 ...
Cesium本地影像与地形服务发布
推荐:将 NSDT场景编辑器加入你的3D开发工具链. 1 数据切片目前遥感影像及数字高程模型切片主要包括 gdal 和 ctb 两种方式,相应的开源工具包可以在 Cesium 交流群(QQ 群:1 ...
（转）利用ArcScene进行三维地形模拟
本文摘自:http://www.sunzx.net/archive/1109.html 在ArcGIS Desktop中,可用于三维场景展示的程序为ArcGlobe和ArcScene,由于两者的差别, ...
见证一张CAD图如何蜕变成一个高大上的三维地形模型（一）
一般情况: 数据准备1.dem栅格图一张,2.对应dem位置的影像图一张即可软件准备:ArcScene(esri arcgis 的是一个三维扩展模块,版本:10以上,本文10.2)或者terraBu ...
WEB端显示三维地形模型
注:正常在WEB上显示三维地形首选Cesium,本文内容仅作为研究,展示文章用DEM制作通用三维地形模型中制作的局部三维地形模型 Cesium是可以很容易的实现在WEB端三维地形的,下面的图是分别是使 ...

Cesium 添加天地图三维地形

天地图三维地址

Cesium 添加代码

参考链接

Cesium 添加天地图三维地形相关推荐

最新文章

热门文章