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。
在线运行（加载较慢）

<!DOCTYPEhtml><html><head><title></title><metacharset="utf-8"/><styletype="text/css">body{padding: 0;margin: 0;}html, body, #map{height: 100%;}.cesium-viewer .cesium-viewer-bottom{display: none;}</style><linkrel="stylesheet"href="https://unpkg.com/[email protected]/Build/Cesium/Widgets/widgets.css"/><scriptsrc="https://unpkg.com/[email protected]/Build/Cesium/Cesium.js"></script><scriptsrc="https://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js"></script></head><body><divid="map"/></body><scripttype="text/javascript">classTdtImageryProviderextendsCesium.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(117.829599,29.542412,118.788968,29.946417)// 设置相机默认范围为自定义区域
    Cesium.Camera.DEFAULT_VIEW_FACTOR=0// console.debug(viewer.camera.computeViewRectangle()) // 可以返回当前区域矩形，以弧度为单位 var viewer =newCesium.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 =newCesium.Color(0,0,0,1)//设置地球背景色黑色

    viewer.imageryLayers.addImageryProvider(newCesium.TdtImageryProvider("img_w","d083e4cf30bfc438ef93436c10c2c20a"))
    viewer.imageryLayers.addImageryProvider(newCesium.TdtImageryProvider("cia_w","d083e4cf30bfc438ef93436c10c2c20a"))    
    viewer.terrainProvider =newCesium.GeoTerrainProvider({urls:"01234567".split("").map((o)=>{return"//t"+ o +".tianditu.gov.cn/mapservice/swdx?T=elv_c&tk=d083e4cf30bfc438ef93436c10c2c20a"})})var wtfs =newCesium.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:newCesium.Cartesian2(10,10),horizontalOrigin: Cesium.HorizontalOrigin.LEFT,verticalOrigin: Cesium.VerticalOrigin.TOP,eyeOffset: Cesium.Cartesian3.ZERO,pixelOffset:newCesium.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/

标签：前端

本文转载自: https://blog.csdn.net/jingjing_n/article/details/127321735
版权归原作者 XGJ一九 所有，如有侵权，请联系我们删除。

Cesium 添加天地图三维地形

天地图三维地址

Cesium 添加代码

参考链接

发表评论

“Cesium 添加天地图三维地形”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航