Cesium overlay sky map-China offshore ocean and other deep surface layer services

I accidentally discovered that the sky map has an offshore ocean layer. I thought it was good, so I tried to overlay it. After spending some time, the overlay was successful. I will share it here.

This article includes core code, complete code, and online examples.

In addition, here is an example of Openlayers overlay

core code

Mainly Cesium overlays WMTS layers.


const subdomains = ['0', '1', '2', '3', '4', '5', '6', '7'];

const token = '2b7cbf61123cbe4e9ec6267a87e7442f';

const layer = new Cesium.WebMapTileServiceImageryProvider({
    
    
    url: "http://t{s}.tianditu.gov.cn/shuishen_w/wmts?service=wmts&request=GetTile&" +
        "version=1.0.0&LAYER=shuishen&tileMatrixSet=w&TileMatrix={TileMatrix}&" +
        "TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=" + token,
    subdomains: subdomains,
    layer: "shuishen",
    style: "default",
    format: "image/jpeg",
    tileMatrixSetID: "GoogleMapsCompatible",
    show: true
})

viewer.imageryLayers.addImageryProvider(layer);

Insert image description here

Complete code:


<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Use correct character set. -->
    <meta charset="utf-8"/>
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <title>Cesium tianditu</title>
    <link rel="stylesheet" href="./popup.css" type="text/css">
    <script src="http://openlayers.vip/examples/csdn/Cesium.js"></script>
    <script src="./cesium_init.js"></script>
    <script src="http://www.openlayers.vip/examples/resources/jquery-3.5.1.min.js"></script>
    <style>
        @import url(./Widgets/widgets.css);

        html,
        body,
        #cesiumContainer {
      
      
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>

    <script>
        var _hmt = _hmt || [];
        (function () {
      
      
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?f80a36f14f8a73bb0f82e0fdbcee3058";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</head>
<body>
<button id="clearFunc" onClick="clearFunc()">清空</button>
<div id="cesiumContainer"></div>
<script>

    // 创建三维球
    const viewer = init();

    let layer;
    let addLayer = function () {
      
      

        const subdomains = ['0', '1', '2', '3', '4', '5', '6', '7'];

        const token = '2b7cbf61123cbe4e9ec6267a87e7442f';

        layer = new Cesium.WebMapTileServiceImageryProvider({
      
      
            url: "http://t{s}.tianditu.gov.cn/shuishen_w/wmts?service=wmts&request=GetTile&" +
                "version=1.0.0&LAYER=shuishen&tileMatrixSet=w&TileMatrix={TileMatrix}&" +
                "TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=" + token,
            subdomains: subdomains,
            layer: "shuishen",
            style: "default",
            format: "image/jpeg",
            tileMatrixSetID: "GoogleMapsCompatible",
            show: true
        })

        layer = viewer.imageryLayers.addImageryProvider(layer);

        // 定位到北京
        flyToRectangle([
            Cesium.Cartesian3.fromDegrees(
                101.06147602421068,
                2.63671875,
                0
            ),
            Cesium.Cartesian3.fromDegrees(
                126.81342914921068,
                46.23046875,
                0
            ),
        ]);
    }

    addLayer();

    /**
     * @description: 飞行定位到一个矩形
     * @return {*}
     */
    function flyToRectangle(RectangleCD) {
      
      

        // 添加定位信息
        RectangleCD = RectangleCD || [
            Cesium.Cartesian3.fromDegrees(
                104.15528644354428,
                30.752166584535513,
                0
            ),
            Cesium.Cartesian3.fromDegrees(
                104.27206271917905,
                30.827572468324576,
                0
            ),
        ];

        var rec = Cesium.Rectangle.fromCartesianArray(RectangleCD);
        var boundingSphere = Cesium.BoundingSphere.fromRectangle3D(rec);
        viewer.camera.flyToBoundingSphere(boundingSphere, {
      
      
            duration: 5,
            complete: function () {
      
      
            },
            offset: {
      
      
                heading: Cesium.Math.toRadians(0.0),
                pitch: Cesium.Math.toRadians(-90),
                range: 0.0,
            },
        });
    }

    let clearFunc = function () {
      
      
        layer && viewer.imageryLayers.remove(layer);
    }

</script>
</body>
</html>

Online example

Cesium online example: Cesium overlay sky map-China offshore ocean depth layer service

Cesium overlay sky map-China offshore ocean and other deep surface layer services

Cesium overlay sky map-China offshore ocean and other deep surface layer services

core code

Complete code:

Online example

Guess you like