Cesium 天地图倾斜摄影 矩阵变换 更改经纬度

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模型矩阵</title>
    <link href="src/Cesium/Widgets/widgets.css" rel="stylesheet" />
    <script src="src/Cesium/Cesium.js"></script>
    <script src="src/dat.gui.min.js"></script>
    <script src="src/cesium-transform.js"></script>
    <!--<script src="https://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js"></script>-->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body,
        #viewer-container {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        #btn {
            position: absolute;
            top: 50px;
            left: 50px;
        }
    </style>
</head>

<body>
    <div id="viewer-container"></div>
    <script>
        // init
        function initPage() {

            //gltf错误处理
            var fixGltf = function (gltf) {
                if (!gltf.extensionsUsed) {
                    return;
                }

                var v = gltf.extensionsUsed.indexOf('KHR_technique_webgl');
                var t = gltf.extensionsRequired.indexOf('KHR_technique_webgl');
                // 中招了。。
                if (v !== -1) {
                    gltf.extensionsRequired.splice(t, 1, 'KHR_techniques_webgl');
                    gltf.extensionsUsed.splice(v, 1, 'KHR_techniques_webgl');
                    gltf.extensions = gltf.extensions || {};
                    gltf.extensions['KHR_techniques_webgl'] = {};
                    gltf.extensions['KHR_techniques_webgl'].programs = gltf.programs;
                    gltf.extensions['KHR_techniques_webgl'].shaders = gltf.shaders;
                    gltf.extensions['KHR_techniques_webgl'].techniques = gltf.techniques;
                    var techniques = gltf.extensions['KHR_techniques_webgl'].techniques;

                    gltf.materials.forEach(function (mat, index) {
                        gltf.materials[index].extensions['KHR_technique_webgl'].values = gltf.materials[index].values;
                        gltf.materials[index].extensions['KHR_techniques_webgl'] = gltf.materials[index].extensions['KHR_technique_webgl'];

                        var vtxfMaterialExtension = gltf.materials[index].extensions['KHR_techniques_webgl'];

                        for (var value in vtxfMaterialExtension.values) {
                            var us = techniques[vtxfMaterialExtension.technique].uniforms;
                            for (var key in us) {
                                if (us[key] === value) {
                                    vtxfMaterialExtension.values[key] = vtxfMaterialExtension.values[value];
                                    delete vtxfMaterialExtension.values[value];
                                    break;
                                }
                            }
                        };
                    });

                    techniques.forEach(function (t) {
                        for (var attribute in t.attributes) {
                            var name = t.attributes[attribute];
                            t.attributes[attribute] = t.parameters[name];
                        };

                        for (var uniform in t.uniforms) {
                            var name = t.uniforms[uniform];
                            t.uniforms[uniform] = t.parameters[name];
                        };
                    });
                }
            }
            Object.defineProperties(Cesium.Model.prototype, {
                _cachedGltf: {
                    set: function (value) {
                        this._vtxf_cachedGltf = value;
                        if (this._vtxf_cachedGltf && this._vtxf_cachedGltf._gltf) {
                            fixGltf(this._vtxf_cachedGltf._gltf);
                        }
                    },
                    get: function () {
                        return this._vtxf_cachedGltf;
                    }
                }
            });
            //结束gltf错误处理

            //天地图开始
            // 服务域名
            var tdtUrl = 'https://t{s}.tianditu.gov.cn/';
            // 服务负载子域
            var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7'];
            var tdt_tk = "";


            //天地图URL配置
            //在线天地图影像服务地址(墨卡托投影)
            var TDT_IMG_W = "https://t{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
                "&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
                "&style=default&format=tiles&tk=" + tdt_tk;
            //在线天地图矢量地图服务(墨卡托投影)
            var TDT_VEC_W = "https://t{s}.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
                "&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
                "&style=default&format=tiles&tk=" + tdt_tk;
            //在线天地图影像中文标记服务(墨卡托投影)
            var TDT_CIA_W = "https://t{s}.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=" + tdt_tk;
            //在线天地图矢量中文标记服务(墨卡托投影)
            var TDT_CVA_W = "https://t{s}.tianditu.gov.cn/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
                "&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
                "&style=default.jpg&tk=" + tdt_tk;
            //在线天地图影像服务地址(经纬度)
            var TDT_IMG_C = "https://t{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
                "&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
                "&style=default&format=tiles&tk=" + tdt_tk;
            //在线天地图矢量地图服务(经纬度)
            var TDT_VEC_C = "https://t{s}.tianditu.gov.cn/vec_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
                "&LAYER=vec&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
                "&style=default&format=tiles&tk=" + tdt_tk;
            //在线天地图影像中文标记服务(经纬度)
            var TDT_CIA_C = "https://t{s}.tianditu.gov.cn/cia_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
                "&LAYER=cia&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
                "&style=default&format=tiles&tk=" + tdt_tk;
            //在线天地图矢量中文标记服务(经纬度)
            var TDT_CVA_C = "https://t{s}.tianditu.gov.cn/cva_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
                "&LAYER=cva&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
                "&style=default&format=tiles&tk=" + tdt_tk;
            //天地图结束



            // 切换自己的token
            Cesium.Ion.defaultAccessToken = '..rk-n3tDfpFCaqLvsklRWMI9z5TZhjrv9VfUbMjpWyA';

            // 初始化
            viewer = new Cesium.Viewer("viewer-container", {
                infoBox: false,
                shouldAnimate: true,
                vrButton: true,
                geocoder: false,
                homeButton: false,
                sceneModePicker: false,
                baseLayerPicker: true,
                navigationHelpButton: false,
                animation: false,
                timeline: false,
                fullscreenButton: true,
                // 天地图影像服务（经纬度）
                imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
                    url: TDT_IMG_C,
                    layer: "tdtImg_c",
                    style: "default",
                    format: "tiles",
                    tileMatrixSetID: "c",
                    subdomains: subdomains,
                    tilingScheme: new Cesium.GeographicTilingScheme(),
                    tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],
                    maximumLevel: 50,
                    show: false
                })
                //加载天地图影像地图，WebMapTileServiceImageryProvider该接口是加载WMTS服务的接口
                //imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
                //    url: 'http://t0.tianditu.gov.cn/img_w/wmts?tk=ebf64362215c081f8317203220f133eb',
                //    layer: 'img',
                //    style: 'default',
                //    tileMatrixSetID: 'w',
                //    format: 'tiles',
                //    maximumLevel: 18
                //})
            });

            //天地图开始
            // 天地图影像中文标记服务
            //viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileSericeImageryProvider({
            //    url: TDT_CIA_C,
            //    layer: "tdtImg_c",
            //    style: "default",
            //    format: "tiles",
            //    tileMatrixSetID: "c",
            //    subdomains: subdomains,
            //    tilingScheme: new Cesium.GeographicTilingScheme(),
            //    tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],
            //    maximumLevel: 50,
            //    show: false
            //}));

            // 叠加影像服务
            var imgMap = new Cesium.UrlTemplateImageryProvider({
                url: tdtUrl + 'DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + tdt_tk,
                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=' + tdt_tk,
                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 url11 = tdtUrl.replace('{s}', subdomains[i]) + 'DEM90M/DataServer?T=elv_c&tk=' + tdt_tk;
            //    terrainUrls.push(url11);
            //}

            //var provider = new Cesium.GeoTerrainProvider({
            //    urls: terrainUrls
            //});

            //viewer.terrainProvider = provider;

            //天地图结束
            // 去掉logo
            viewer._cesiumWidget._creditContainer.style.display = "none";
            // 抗锯齿
            viewer.scene.postProcessStages.fxaa.enabled = false;
            // 水雾特效
            viewer.scene.globe.showGroundAtmosphere = true;
            // 设置最大俯仰角，[-90,0]区间内，默认为-30，单位弧度
            viewer.scene.screenSpaceCameraController.constrainedPitch = Cesium.Math.toRadians(-20);
            // 取消默认的双击事件
            viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);


            // tilset地址
            const url = 'http://earthsdk.com/v/last/Apps/assets/dayanta/tileset.json'
            //const url = 'http://127.0.0.1:8080/75343/tileset.json'
            // 基础参数
            let tileModelParam = {
                url: url,
                scale: 1.0,
                //longitude: 116.29393709916772,
                //latitude: 39.935457593075405,
                longitude: 113.79891698,
                latitude: 34.790739139999999,
                height: 0.0,
                rx: 0,
                ry: 0,
                rz: 0,
                alphaEnble: false,
                alpha: 1.0
            }
            // 调用调整面板
            TilesetMatrixPanel(viewer, { tileModelParam: tileModelParam })

        }

        // load
        window.onload = function () {
            initPage()
        }
    </script>
</body>

</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Jeely/p/14768028.html