《Cesium 进阶知识点》 - 加载天地图三维地名服务（无Cesium 版本依赖）

一、解决依赖

天地图官网说只支持 1.52、1.58、1.63.1 这 3个版本，其它版本报错。但我只使用三维地名服务。所以做了如下修改。

我在 1.80 版和 1.84 版中测试有效。操作部署是：

1. 根据官网安装 cesium-tdt 插件；

2. 将 node_modules\cesium-tdt\dist\cesiumTdt.js 文件拷贝出来。使用script标签方式引入。

但报如下错误。

找到错误位置，与可用的 1.58 版做对比，发现将 cesiumTdt.js 做如下修改即可：

e[P("0x71")](this[P("0xa4e")])?this[P("0xa4e")]=this[P("0xa4e")].slice():e[P("0x14")](this[P("0xa4e")])&&0<this[P("0xa4e")][P("0x0")]?this[P("0xa4e")]=this[P("0xa4e")][P("0x7f2")](""):this[P("0xa4e")]=["a","b","c"]

将上面一行代码找到，替换成下面即可。有点简单粗暴，但亲测有效。。。

this[P("0xa4e")]=['0','1','2','3','4','5','6','7']

二、实现

添加

// 天地图 token（这是乱写的，请自己申请）
var token = '3f2332132139e8c21af5e34a25ef0dc88';
// 服务域名
var tdtUrl = 'https://t{s}.tianditu.gov.cn/';
// 服务负载子域
var subdomains=['0','1','2','3','4','5','6','7'];
// 叠加三维地名服务
var wtfs = new Cesium.GeoWTFS({viewer,subdomains:subdomains,metadata:{boundBox: {minX: -180,minY: -90,maxX: 180,maxY: 90},minLevel: 1,maxLevel: 20},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: 5,style:Cesium.LabelStyle.FILL_AND_OUTLINE,showBackground:false,backgroundColor:Cesium.Color.RED,backgroundPadding:new Cesium.Cartesian2(10, 10),horizontalOrigin:Cesium.HorizontalOrigin.MIDDLE,verticalOrigin:Cesium.VerticalOrigin.TOP,eyeOffset:Cesium.Cartesian3.ZERO,pixelOffset:new Cesium.Cartesian2(0, 8)},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}
});
//三维地名服务，使用wtfs服务
wtfs.getTileUrl = function(){return tdtUrl + 'mapservice/GetTiles?lxys={z},{x},{y}&tk='+ token;
}
// 初始化
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}}]);

删除

wtfs.destroy();

透明度

// 字体透明度设置。但注意这是在加完之后才能设置，没有找到加载完的回调loaded方式。刚加载时wtfs.labelCache是空数组
wtfs.labelCache.forEach(entity => {entity.label.fillColor = entity.label.fillColor.getValue().withAlpha(alpha/100);entity.label.outlineColor = entity.label.outlineColor.getValue().withAlpha(alpha/100);
});

三、效果

四、注意

如果加载完成发现标注被遮挡，请这样设置

// 关闭地形深度检测
viewer.scene.globe.depthTestAgainstTerrain = false;

五、隐藏

暂无解决方案

六、完整代码

cesiumTdt.js-互联网文档类资源-CSDN下载https://download.csdn.net/download/sinat_31213021/44669390

《Cesium 进阶知识点》 - 加载天地图三维地名服务（无Cesium 版本依赖）相关推荐

(转载）arcgis for js - 解决加载天地图和WMTS服务,WMTS服务不显示的问题,以及wmts服务密钥。...
1 arcgis加载天地图和wmts服务 arcgis for js加载天地图的例子网上有很多,这里先不写了,后期有空再贴代码,这里主要分析下WMTS服务为什么不显示,怎么解决. 条件:这里的WMTS ...
开源三维GIS之Cesium基本设置与加载天地图(五)
嵌入三维地球Cesium到我们的应用中,往往需要对最原始的Cesium初始化参数进行调整.下面是Cesium不经过任何参数设置的三维球界面. 现在需要对右上角的按钮取舍进行选择,以及左下角的时间控件( ...
Cesium加载天地图山东WMTS服务（weixin公众号【图说GIS】）
前言有网友在群里说天地图山东的山东省线划电子地图暗色版服务加载不成功,抱着好奇及帮助别人的心态去试了下,结果可以,并记录下. 实现过程查看服务元数据访问http://124.128.48.215 ...
Cesium使用代理加载天地图CGCS2000切片数据
参见公众号文章(付费): https://mp.weixin.qq.com/s?__biz=MzU2ODYzNzc4OQ==&mid=2247485579&idx=1&sn=1 ...
ArcGis加载天地图山东WMTS服务
一.使用条件 1.软件:本次测试软件ArcMap 10.8 2.电脑可以连接互联网 3.进入山东省地理信息公共服务平台完成注册山东省地理信息公共服务平台 (sdmap.gov.cn)http://sd ...
SuperMap iClient3D for WebGL 用 WebMapTileServiceImageryProvider 接口加载天地图 WMTS 服务
SuperMap iClient3D for WebGL 用 WebMapTileServiceImageryProvider 接口加载天地图 WMTS 服务申请天地图开发者 token 读懂能力文 ...
三维地图之cesium加载天地图（有代码）
天地图官网上写了cesium加载天地图的方法,http://lbs.tianditu.gov.cn/docs/#/sanwei/,但读起来,写起来,的确令人费解. 下面写一段非常简单的代码,用cesi ...
Cesium 加载天地图
网上有很多就是没说加载天地图需要开发者秘钥,这个需要去天地图官网申请一个就可以了,下面贴上源码还有就是Cesium也是需要token的哈 <!DOCTYPE html> <ht ...
Cesium加载天地图
目录项目地址实现效果实现方法项目地址 https://github.com/zhengjie9510/webgis-demo 实现效果实现方法采用WebMapTileServiceImag ...