文章来源

天地图官网

解析

是基于Cesium的
扩展了Cesium插件
代码是压缩混淆的

这里主要记录以下：
如何使用天地图的影像、电子地图等

源生Cesium使用

1 UrlTemplateImageryProvider加载

类型说明
img_w：影像
vec_w：电子地图
cia_w：全球影像中文注记服务
cva_w:全球矢量中文注记服务

    var token = '你申请的key';// 服务域名var tdtUrl = 'https://t{s}.tianditu.gov.cn/';// 服务负载子域var subdomains=['0','1','2','3','4','5','6','7'];// cesium 初始化var viewer = new Cesium.Viewer('cesiumContainer', {});// 叠加影像服务var imgMap = new Cesium.UrlTemplateImageryProvider({url: tdtUrl + 'DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + token,subdomains: subdomains,tilingScheme : new Cesium.WebMercatorTilingScheme(),maximumLevel : 18});viewer.imageryLayers.addImageryProvider(imgMap);

2 WMTS服务加载

类型说明
img_w：影像
vec_w：电子地图
cia_w：全球影像中文注记服务
cva_w:全球矢量中文注记服务

    let url = `http://t{s}.tianditu.com/img_w/wmts?service=WMTS&version=1.0.0&request=GetTile&tilematrix={TileMatrix}&layer=img&style=default&tilerow={TileRow}&tilecol={TileCol}&tilematrixset=c&format=tiles&tk={你的key}`;const provider = new Cesium.WebMapTileServiceImageryProvider({url: url,layer: 'img',style: 'default',format: 'tiles',tileMatrixSetID: 'c',subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],maximumLevel: 17,tilingScheme: new Cesium.GeographicTilingScheme(),tileMatrixLabels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18']})const layer = viewer.imageryLayers.addImageryProvider(provider);

基于官方插件使用

<!DOCTYPE html>
<html lang="en">
<head><title>天地图三维服务接入</title>// cesium版本：1.58<script src="/static/cesium/Cesium.js"></script>// cesium扩展插件<script src="/static/cesium/cesiumTdt.js"></script>// cesium样式文件<link rel="stylesheet" type="text/css" href="/static/cesium/Widgets/widgets.css" /><style>html, body{margin: 0;padding: 0;overflow: hidden;}#cesiumContainer {width: 100%;height: 100%;}#cesiumContainer .cesium-viewer-bottom{display: none;}</style>
</head>
<body><div id="cesiumContainer"></div>
</body>
</html>

<script>var token = '你申请的key';// 服务域名var tdtUrl = 'https://t{s}.tianditu.gov.cn/';// 服务负载子域var subdomains=['0','1','2','3','4','5','6','7'];// cesium 初始化var viewer = new Cesium.Map('cesiumContainer', {shouldAnimate: true,selectionIndicator:true,infoBox:false});// 叠加影像服务var imgMap = new Cesium.UrlTemplateImageryProvider({url: tdtUrl + 'DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + token,subdomains: subdomains,tilingScheme : new Cesium.WebMercatorTilingScheme(),maximumLevel : 18});viewer.imageryLayers.addImageryProvider(imgMap); // 叠加国界服务var iboMap = new Cesium.UrlTemplateImageryProvider({url: tdtUrl + 'DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=' + token,subdomains: subdomains,tilingScheme : new Cesium.WebMercatorTilingScheme(),maximumLevel : 10});viewer.imageryLayers.addImageryProvider(iboMap);// 叠加地形服务var terrainUrls = new Array();for (var i = 0; i < subdomains.length; i++){var url = tdtUrl.replace('{s}', subdomains[i]) + 'mapservice/swdx?tk=' + token;terrainUrls.push(url);}var provider = new Cesium.GeoTerrainProvider({urls: terrainUrls});viewer.terrainProvider = provider;// 将三维球定位到中国viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),orientation: {heading :  Cesium.Math.toRadians(348.4202942851978),pitch : Cesium.Math.toRadians(-89.74026687972041),roll : Cesium.Math.toRadians(0)},complete:function callback() {// 定位完成之后的回调函数}});// 叠加三维地名服务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}}]);</script>

参考文章

https://zhuanlan.zhihu.com/p/267935427
https://www.cnblogs.com/laixiangran/p/5049198.html

补充

天地图官网工程库地址：https://github.com/ngcc-tdt/demo/tree/master/sanwei
工程测试结果可用（如下）
注意要将token修改为自己申请的key。
var token = '你申请的key';//修改为自己申请的字符串key

天地图三维帮助文档(Cesium)相关推荐

老子云携手福昕鲲鹏，首次实现3D OFD三维版式文档的重大突破
你见过能动起来的文档吗? 这可不是动图,也不是视频,而是可以直接自由交互3D模型的3D OFD文档! OFD可能有人不熟悉,它其实是国产"PDF",3D OFD则突破了以往文字.图 ...
Cesium 添加天地图三维地形
天地图三维地址地址列表地址三维地形服务 //t{s}.tianditu.gov.cn/mapservice/swdx?T=elv_c&tk={key} 三维地名服务 //t{s}.tia ...
《Cesium 进阶知识点》 - 加载天地图三维地名服务（无Cesium 版本依赖）
一.解决依赖天地图官网说只支持 1.52.1.58.1.63.1 这 3个版本,其它版本报错.但我只使用三维地名服务.所以做了如下修改. 我在 1.80 版和 1.84 版中测试有效.操作部署是: ...
Cesium中文API 文档
这个是我们进行HCZJ Earth项目时纯人工翻译的 API文档另:HCZJ Earth 介绍这个可以作为Cesium插件使用,可以快速开发特定功能
python3.5中文手册_Python 入门指南 — Python3 中文手册 3.5.2 文档 | 三维部落
Python 入门指南¶ Release:3.5.2 Date:2016 年 10 月 24 日 Python 是一门简单易学且功能强大的编程语言.它拥有高效的高级数据结构,并且能够用简单而又高效的方 ...
从单一图像中提取文档图像：ICCV2019论文解读
从单一图像中提取文档图像:ICCV2019论文解读 DewarpNet: Single-Image Document Unwarping With Stacked 3D and 2D Regressi ...
DirectX10 学习笔记2：在多文档框架中初始化DirectX 10
显示功能是在视图类中完成的,所以DX10的初始化及绘制工作都是视图类中完成. 首先建立一个多文档工程,工程名为02_01,在视图类头文件中加载相关的库,并包含头文件: 在视图类的头文件中添加DX10相 ...
实战：基于OpenCV实现偏斜文档校正
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达本文转自|OpenCV学堂纸质文档扫描中经常会发生扫描出来的图像有 ...
实战：使用 OpenCV 和 PyTesseract 对文档进行OCR
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达随着世界各地的组织都希望将其运营数字化,将物理文档转换为数字格式是 ...
测绘技术设计规定_1：2000地形图项目测绘(航测)技术设计书（文档可下载）
▐ 之前推过的可下载航测相关设计书激光雷达生产大比例地形图项目设计书 .docx 倾斜摄影与三维实景建模技术设计书.PDF 无人机倾斜摄影1:500房屋测量技术设计书.docx 1:1000地形图数 ...

天地图三维帮助文档(Cesium)

文章目录