cesium 实现流动效果(河流具有流向的流动效果)

落落尔雅

已于 2024-04-07 19:59:46 修改

阅读量819

点赞数 5

文章标签：材质 javascript

于 2024-04-07 19:58:21 首次发布

本文链接：https://blog.csdn.net/m0_67531029/article/details/137474765

版权

效果：粒子流动、河流真实水面流动、河面具有流向的流动

图片资源：三个随意取用其一

一、创建PolylineTrailLinkMaterialProperty.js文件

/*
      ����������
      color 颜色
      duration 时间
      trailImage 图片
  */
      function PolylineTrailLinkMaterialProperty(color, trailImage , duration) {
        this._definitionChanged = new Cesium.Event();
        this._color = undefined;
        this._colorSubscription = undefined;
        this.color = color;
        this.duration = duration;
        this.trailImage  = trailImage ;
        this._time = (new Date()).getTime();
      }
      
      /**
       * �Զ������
       */
       function _getPolylineShader() {
        var materail =
          "czm_material czm_getMaterial(czm_materialInput materialInput)\n\
          {\n\
                czm_material material = czm_getDefaultMaterial(materialInput);\n\
                vec2 st = materialInput.st;\n\
                vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));\n\
                material.alpha = colorImage.a * color.a;\n\
                material.diffuse = (colorImage.rgb+color.rgb)/2.0;\n\
                return material;\n\
          }";
    
          return materail
      }
      
      Object.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {
        isConstant: {
          //�������Ƿ����ʱ��仯,Ϊtrueʱֻ���ȡһ����ֵ
          get: function () {
            return false;
          }
        },
        definitionChanged: {
          get: function () {
            return this._definitionChanged;
          }
        },
        color: Cesium.createPropertyDescriptor('color')
      });
      
      var MaterialType = 'polylineType' + parseInt(Math.random() * 1000);
      PolylineTrailLinkMaterialProperty.prototype.getType = function (time) {
        return MaterialType;
      }
      
      PolylineTrailLinkMaterialProperty.prototype.getValue = function (time, result) {
        if (!Cesium.defined(result)) {
          result = {};
        }
        result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
        result.image = this.trailImage;
        result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
        return result;
      }
      
      PolylineTrailLinkMaterialProperty.prototype.equals = function (other) {
        return this === other ||
          (other instanceof PolylineTrailLinkMaterialProperty &&
            Cesium.Property.equals(this._color, other._color) &&
            Cesium.Property.equals(this._image, other._image)) 
      }
      
      Cesium.Material._materialCache.addMaterial(MaterialType, {
        fabric: {
          type: MaterialType,
          uniforms: {
            color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
            image: Cesium.Material.DefaultImageId,
            time: -20
          },
          source: _getPolylineShader()
        },
        translucent: function (material) {
          return true;
        }
      });
      Cesium.PolylineTrailLinkMaterialProperty = PolylineTrailLinkMaterialProperty;

二、引入

a、在原生html里面使用

<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <script src="Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="Build/Cesium/Widgets/widgets.css">
	<script src="Build/polylineTrailLinkMaterialProperty.js"></script>
    <script>
        var viewer = null;
        function initMap() {
        Cesium.Ion.defaultAccessToken = '你的token'
        viewer = new Cesium.Viewer('cesiumContainer',{
            // terrainProvider: createWorldTerrain(),
            sceneMode: 0,
            geocoder: false, // 位置查找工具
            homeButton: false, // 视角返回初始位置
            sceneModePicker: false, // 选择视角的模式（球体、平铺、斜视平铺）
            baseLayerPicker: false, // 图层选择器（地形影像服务）
            navigationHelpButton: false, // 导航帮助(手势，鼠标)
            animation: false, // 左下角仪表盘（动画器件）
            timeline: false, // 底部时间线
            fullscreenButton: false, // 全屏
            vrButton: false, // VR
            infoBox: false, //小弹窗
            selectionIndicator: false, //去除绿框
        })

        

        if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
          //判断是否支持图像渲染像素化处理
          viewer.resolutionScale = window.devicePixelRatio;
        }
        viewer.scene.fxaa = true;
        viewer.scene.postProcessStages.fxaa.enabled = true;
        // 隐藏版权
        viewer._cesiumWidget._creditContainer.style.display = "none";

        viewer.scene.sun.show = false;
        viewer.scene.moon.show = false;
        viewer.scene.skyBox.show = false; //关闭天空盒，否则会显示天空颜色
        viewer.scene.undergroundMode = true;
        viewer.scene.globe.show = true;
      }
  
  
      //绘制水面波浪效果
      function drawWater() {
        viewer.entities.add({
          name: 'PolylineTrail',
          polyline: {
            positions: Cesium.Cartesian3.fromDegreesArrayHeights([
              118.20366966044915, 24.866028005772108, 0,
              118.19298304961832, 24.862935624944335, 0,
              118.18460402405577, 24.857932968917897, 0,
              118.18064925095011, 24.853764129812788, 0,
              118.17441189116022, 24.85260606759165, 0
            ]),
            //heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            clampToGround: true,
            width: 40,
            material: new PolylineTrailLinkMaterialProperty(Cesium.Color.CYAN, image3, 10000),    
          },
        });
      }
      function load() {
        initMap();
          viewer.camera.setView({
              destination: Cesium.Cartesian3.fromDegrees(118.18460402405577,24.857932968917897, 8000),
              orientation: {
                  heading: Cesium.Math.toRadians(0.0),
                  pitch: Cesium.Math.toRadians(-45),
                  roll: 0.0
              }
          })
        drawWater();
      }
    </script>
</head>
<body onload="load()" >
	<div id="cesiumContainer" style="width:100vw;height:100vh;">
    </div>
</body>
</html>

b、在vue3中使用

落落尔雅

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
cesium 实现流动效果(河流具有流向的流动效果)

一、创建PolylineTrailLinkMaterialProperty.js文件。效果：粒子流动、河流流动、河面具有流向的流动。图片资源：三个随意取用其一。a、在原生html里面使用。b、在vue3中使用。
复制链接

扫一扫