cesium-添加水面动态贴图效果

最新推荐文章于 2025-07-17 15:37:45 发布

孙霸天

最新推荐文章于 2025-07-17 15:37:45 发布

阅读量3.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： # cesium 文章标签：贴图 javascript cesium webgis 水面

本文链接：https://blog.csdn.net/qq_36213352/article/details/122621929

cesium 专栏收录该内容

54 篇文章

订阅专栏

本文介绍如何在 Cesium 中实现水面动态贴图效果。通过使用 primitives 方法及自定义材质，可以在指定区域创建逼真的动态水面。具体包括设置水面高度、纹理映射速度等参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

cesium-添加水面动态贴图效果

介绍

真实的水面是动态的，这里可以使用primitives方法来实现效果

核心代码

            /**
             *
             * @param {*} targetHeight 目标高度
             * @param {*} areaCoor  范围坐标
             */
            drawWater(targetHeight, areaCoor) {
                let that = this;
                that._viewer.entities.remove(that.waterEntityEnd);
                that.waterEntityEnd = that._viewer.scene.primitives.add(new Cesium.Primitive({
                    geometryInstances: new Cesium.GeometryInstance({
                        geometry: new Cesium.PolygonGeometry({
                            polygonHierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights(areaCoor)),
                            height: targetHeight,
                        }),
                    }),
                    appearance: new Cesium.EllipsoidSurfaceAppearance({
                        aboveGround: true,
                        material: new Cesium.Material({
                            fabric: {
                                type: 'Water',
                                uniforms: {
                                    normalMap: '../../static/img/water.png',
                                    frequency: 1000.0,
                                    animationSpeed: 0.05,
                                    amplitude: 10.0
                                }
                            }
                        })
                    }),
                    show: true
                }))
            }

完整代码

<!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-水面动画</title>
    <script src="../lib/Cesium-1.89/Build/Cesium/Cesium.js"></script>
    <script src="../../static/lib/vue.min.js"></script>
    <style>
        @import url(../lib/Cesium-1.89/Build/Cesium/Widgets/widgets.css);

        html,
        body, #temp {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="temp">
    <div style="display: -webkit-flex;display: flex;width: 100%;height: 100%">
        <div style="width: 90%;height: 100%">
            <div id="cesiumContainer"></div>
        </div>
        <div style="width: 10%;height: 100%;background-color: #d3d3d3;padding: 30px">
            <button class="btn" @click="addWaterAnimate">添加水面动画</button>
        </div>
    </div>
</div>
<script>

    let EarthComp = new Vue({
        el: "#temp",
        data: {
            _earth: undefined, // 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！
            _viewer: undefined,
            model: null,//切片模型
            marks: [],
            marksIndex: 1,
            pitchValue: -10,
            remainTime: 0,
            usedTime: 0,
        },
        mounted: function () {
            let that = this;
            this.earthInit();
        },
        methods: {
            /**
             * 地球初始化
             */
            earthInit() {
                //天地图token
                let TDT_tk = "tdt_token";
                //Cesium token
                let cesium_tk = "token";

                //标注
                let TDT_CIA_C = "http://{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;

                // 添加mapbox自定义地图实例
                let layer = new Cesium.MapboxStyleImageryProvider({
                    url: 'https://api.mapbox.com/styles/v1',
                    username: 'sungang',
                    styleId: 'styleId',
                    accessToken: 'accessToken',
                    scaleFactor: true
                });

                //初始页面加载
                Cesium.Ion.defaultAccessToken = cesium_tk;
                let viewer = new Cesium.Viewer('cesiumContainer', {
                    geocoder: false,   // 位置查找工具
                    baseLayerPicker: false,// 图层选择器（地形影像服务）
                    timeline: false, // 底部时间线
                    homeButton: false,// 视角返回初始位置
                    fullscreenButton: false, // 全屏
                    animation: false,   // 左下角仪表盘（动画器件）
                    sceneModePicker: false,// 选择视角的模式（球体、平铺、斜视平铺）
                    navigationHelpButton: false, //导航帮助按钮
                    imageryProvider: layer
                });

                //调用影响中文注记服务
                viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
                    url: TDT_CIA_C,
                    layer: "tdtImg_c",
                    style: "default",
                    format: "tiles",
                    tileMatrixSetID: "c",
                    subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                    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
                }))

                this._viewer = viewer;

                // 去除版权信息
                this._viewer._cesiumWidget._creditContainer.style.display = "none";
                // 初始化dem位置
                this.addDem();
            },
            /**
             * 添加模型
             */
            addDem() {
                let that = this;
                let terrainProvider = new Cesium.CesiumTerrainProvider({
                    url: '../res/data/dem/ASTGTM_N29E087D'
                });
                that._viewer.terrainProvider = terrainProvider;

                that._viewer.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(87.54791, 29.57025, 17863.0),
                    orientation: {
                        heading: Cesium.Math.toRadians(0.0),
                        pitch: Cesium.Math.toRadians(-25.0),
                        roll: 0.0
                    }
                });
            },
            /**
             * 添加水面动画
             */
            addWaterAnimate() {
                let that = this;
                let globe = this._viewer.scene.globe;
                globe.depthTestAgainstTerrain = true;
                this._viewer.camera.setView({//定位到范围中心点
                    destination: Cesium.Cartesian3.fromDegrees(87.07131373100303, 29.40857655725876, 12000),
                    orientation: {
                        heading: Cesium.Math.toRadians(130.304929908965146),//1
                        pitch: Cesium.Math.toRadians(-17.364771143804237),
                        roll: 0.09931507517437696
                    }
                });

                let points = [
                    [87.07131373100303, 29.40857655725876],
                    [87.33503858397042, 29.41843499494008],
                    [87.33072496578943, 29.193059292424955],
                    [87.05098771260403, 29.20286249623694]
                ]
                let polygonArr = [];
                for (let i = 0; i < points.length; i++) {
                    polygonArr.push(points[i][0]);
                    polygonArr.push(points[i][1]);
                    polygonArr.push(0);
                }
                that.drawWater(4400, polygonArr);
            },
            /**
             *
             * @param {*} targetHeight 目标高度
             * @param {*} areaCoor  范围坐标
             */
            drawWater(targetHeight, areaCoor) {
                let that = this;
                that._viewer.entities.remove(that.waterEntityEnd);
                that.waterEntityEnd = that._viewer.scene.primitives.add(new Cesium.Primitive({
                    geometryInstances: new Cesium.GeometryInstance({
                        geometry: new Cesium.PolygonGeometry({
                            polygonHierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights(areaCoor)),
                            height: targetHeight,
                        }),
                    }),
                    appearance: new Cesium.EllipsoidSurfaceAppearance({
                        aboveGround: true,
                        material: new Cesium.Material({
                            fabric: {
                                type: 'Water',
                                uniforms: {
                                    normalMap: '../../static/img/water.png',
                                    frequency: 1000.0,
                                    animationSpeed: 0.05,
                                    amplitude: 10.0
                                }
                            }
                        })
                    }),
                    show: true
                }))
            },
        },
    })
</script>
</body>
</html>