cesium集成三维天地图

最新推荐文章于 2025-04-14 15:45:27 发布

原创最新推荐文章于 2025-04-14 15:45:27 发布

· 842 阅读

1 ·

版权

文章标签：

#javascript #html5

示例将展示如何添加天地图的影像服务，国界服务，地形服务以及三维地名服务。

一：进入天地图的官网进行注册登录后，申请KEY值；

二：新建一个html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <title>天地图三维服务接入</title>
    <script type="text/javascript" cesium="true" src="https://api.tianditu.gov.cn/cdn/demo/sanwei/static/cesium/Cesium.js"></script>
    <script type="text/javascript" cesium="true" src="https://api.tianditu.gov.cn/cdn/plugins/cesium/Cesium_ext_min.js"></script>
    <script type="text/javascript" cesium="true" src="https://api.tianditu.gov.cn/cdn/plugins/cesium/long.min.js"></script>
    <script type="text/javascript" cesium="true" src="https://api.tianditu.gov.cn/cdn/plugins/cesium/bytebuffer.min.js"></script>
    <script type="text/javascript" cesium="true" src="https://api.tianditu.gov.cn/cdn/plugins/cesium/protobuf.min.js"></script>
    <link rel="stylesheet" cesium="true" href="https://api.tianditu.gov.cn/cdn/demo/sanwei/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>
    <script src="./index.js"></script>
</body>
</html>

三：引入index.js

var token = '*******************';
// 服务域名
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: false,
    baseLayerPicker: false,
    fullscreenButton: false,
    geocoder: false,
    homeButton: false,
    infoBox: false,
    sceneModePicker: false,
    timeline: false,
    navigationHelpButton: false,
    navigationInstructionsInitiallyVisible: false,
    showRenderLoopErrors: false,
    shadows: false,
});

// 抗锯齿
viewer.scene.fxaa = true;
viewer.scene.postProcessStages.fxaa.enabled=false;
// 水雾特效
viewer.scene.globe.showGroundAtmosphere = true;
// 设置最大俯仰角，[-90,0]区间内，默认为-30，单位弧度
viewer.scene.screenSpaceCameraController.constrainedPitch = Cesium.Math.toRadians(-20);
viewer.scene.screenSpaceCameraController.autoResetHeadingPitch = false;
viewer.scene.screenSpaceCameraController.inertiaZoom = 0.5;
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 50;
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 20000000;
viewer.scene.screenSpaceCameraController.zoomEventTypes = [
    Cesium.CameraEventType.RIGHT_DRAG,
    Cesium.CameraEventType.WHEEL,
    Cesium.CameraEventType.PINCH,
];
viewer.scene.screenSpaceCameraController.tiltEventTypes = [
    Cesium.CameraEventType.MIDDLE_DRAG,
    Cesium.CameraEventType.PINCH,
    {
        eventType: Cesium.CameraEventType.LEFT_DRAG,
        modifier: Cesium.KeyboardEventModifier.CTRL,
    },
    {
        eventType: Cesium.CameraEventType.RIGHT_DRAG,
        modifier: Cesium.KeyboardEventModifier.CTRL,
    },
];
// 取消默认的双击事件
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

// 叠加影像服务
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?T=elv_c&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,
    //三维地名服务，使用wtfs服务
    subdomains:subdomains,
    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:new Cesium.Cartesian2(10, 10),
        horizontalOrigin:Cesium.HorizontalOrigin.LEFT,
        verticalOrigin:Cesium.VerticalOrigin.TOP,
        eyeOffset:Cesium.Cartesian3.ZERO,
        pixelOffset: new Cesium.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服务
wtfs.getTileUrl = function(){
    return tdtUrl + 'mapservice/GetTiles?lxys={z},{x},{y}&VERSION=1.0.0&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}}]);

四：效果展示：