文章来源
解析
- 是基于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
