cesium + 天地图三维服务接入代码示例
let timelineShow = true;
// Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID. //cesium令牌
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhY2M2ODUzOC0zYzE1LTQ0MzItYTFkMy04ZjZmNzU5NmQwMmUiLCJpZCI6NzQ1NjQsImlhdCI6MTYzNzg1NDI1Nn0.wrCzL91sccSTI36lQl4gc6muClTN3JHx1vJoDOg8SaA';
const viewer = new Cesium.Viewer('cesiumContainer', {
timeline: timelineShow,//是否显示时间轴
animation: true,//是否创建动画小器件，左下角仪表
skyAtmosphere: new Cesium.SkyAtmosphere(), // 大气外光圈
// terrainProvider : Cesium.createWorldTerrain({
// requestWaterMask: true//水波纹开启
// })
});
// viewer.cesiumWidget.creditContainer.style.display = "none"; // 去除logo
// viewer.extend(Cesium.viewerCesiumInspectorMixin); //打开页面指示器
viewer.scene.debugShowFramesPerSecond = true; //帧数显示
if (timelineShow){
//修改cesium默认的clock时间从utc时间到系统时间
const DateTimeFormatter = (datetime, viewModel, ignoredate) => {
let julianDT = new Cesium.JulianDate();
Cesium.JulianDate.addHours(datetime, 8, julianDT);
let gregorianDT = Cesium.JulianDate.toGregorianDate(julianDT);
let objDT;
if (ignoredate)
objDT = '';
else {
objDT = new Date(gregorianDT.year, gregorianDT.month - 1, gregorianDT.day);
objDT = gregorianDT.year + '年' + objDT.toLocaleString('zh-cn', {month: 'short'}) + gregorianDT.day + '日';
if (viewModel || gregorianDT.hour + gregorianDT.minute === 0)
return objDT;
objDT += ' '
}
return objDT + gregorianDT.hour + ":" + gregorianDT.minute + ":" + gregorianDT.second;
};
const TimeFormatter = (time, viewModel) => {
return DateTimeFormatter(time, viewModel, true)
};
viewer.animation.viewModel.dateFormatter = DateTimeFormatter;
viewer.animation.viewModel.timeFormatter = TimeFormatter;
viewer.timeline.makeLabel = DateTimeFormatter;
}
const token = '407d63a2a755581f4f7d78dde5318fb7'//天地图token
// 服务域名
const tdtUrl = 'https://t{s}.tianditu.gov.cn/';
// 服务负载子域
const subdomains = ['0', '1', '2', '3', '4', '5', '6', '7'];
//天地图影像注记（省市区、地方名称标注图）
// let tdtimganourl = "http://t0.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile"
// + "&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}"
// + "&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg"
// + "&tk=" + token;
// let tdtannoimageryProvider = new Cesium.WebMapTileServiceImageryProvider({
// url: tdtimganourl,
// layer: "tdtimganoLayer",
// style: "default",
// format: "image/jpeg",
// tileMatrixSetID: "GoogleMapsCompatible",
// show: true
// });
// viewer.imageryLayers.addImageryProvider(tdtannoimageryProvider)//初始添加到cesium图层上;
// // 叠加影像服务
// const 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);
//
// 叠加国界服务
const 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);
//
// // 叠加地形服务
// const terrainUrls = new Array();
//
// for (let i = 0; i < subdomains.length; i++) {
// const url = tdtUrl.replace('{s}', subdomains[i]) + 'mapservice/swdx?T=elv_c&tk=' + token;
// terrainUrls.push(url);
// }
// const provider = new Cesium.GeoTerrainProvider({
// urls: terrainUrls
// });
//
// viewer.terrainProvider = provider;
// 叠加三维地名服务
const 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.getIcoUrl = function () {
return tdtUrl + 'mapservice/GetIcon?id={id}&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}}]);
// 将三维球定位到中国
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 15000000),
orientation: {
heading: Cesium.Math.toRadians(348.4202942851978),
pitch: Cesium.Math.toRadians(-89.74026687972041),
roll: Cesium.Math.toRadians(0)
},
complete: function callback() {
// 定位完成之后的回调函数
}
});
教程参考 https://blog.csdn.net/qq_38000851/article/details/130661151
