驾驶舱样式

index.html

@@ -35,6 +35,8 @@
     <script src="./static/Config/config.js"></script>
     <script src="./static/js/loading.js"></script>
     <script src="./static/Cesium/Cesium.js"></script>
+    <script src="./static/js/dynamicWallMaterialProperty.js"></script>
+
     <!--    引入其他依赖-->
     <script src="./static/js/vue.min.js"></script>
     <script src="./static/js/iview.min.js"></script>

src/views/viewer.vue

@@ -284,6 +284,14 @@ export default {
             that.store.setCockpitTdsc(false);
         },
         colorFun(color) {
+
+
+            //             * `czm_material czm_getMaterial(czm_materialInput materialInput) {...}`: 这是一个名为 `czm_getMaterial` 的函数，它接受一个 `czm_materialInput` 类型的参数并返回一个 `czm_material` 类型的对象。这是 Cesium 中的一个约定，允许你通过编写自定义的 GLSL 代码来定义材质。  
+            // * `czm_material material = czm_getDefaultMaterial(materialInput);`: 获取默认的材质设置。  
+            // * `vec2 st = materialInput.st;`: 从输入中获取纹理坐标（texture coordinates）。  
+            // * `float dis = distance(st, vec2(0.5));`: 计算纹理坐标与中心 `(0.5, 0.5)` 的距离。  
+            // * `material.diffuse = color.rgb;`: 设置材质的漫反射颜色为你提供的 `color` 的 RGB 部分。  
+            // * `material.alpha = clamp(dis * 2.0, 0.1, 0.7);`: 根据与中心的距离设置材质的透明度（alpha）。使用 `clamp` 函数确保透明度值在 0.1 和 0.7 之间。
             const fs = `czm_material  czm_getMaterial(czm_materialInput materialInput)
             
             {
@@ -291,7 +299,7 @@ export default {
                 vec2 st = materialInput.st; 
                 float dis = distance(st,vec2(0.5));
                 material.diffuse = color.rgb;
-                material.alpha = clamp( dis * 2.0, 0.1, 0.5);
+                material.alpha = clamp( dis * 2.0, 0.1, 0.6);
                 return material;
             }
             `
@@ -357,50 +365,64 @@ export default {
                             zIndex: 2,
                             // 设置远近裁条件
                             distanceDisplayCondition: new Cesium.DistanceDisplayCondition(20000, 9999999999.0),
-                            show: true
+                            show: false
                         },
                         properties: obj,
-                        polygon: {
-                            zIndex: 1,
-                            hierarchy: {
-                                positions: Cesium.Cartesian3.fromDegreesArray(oneDArray),
-                            },
-                            // outline: false,
-                            material: Cesium.Color.fromCssColorString(that.xzqh_color),
-                            height: 100,
-                            extrudedHeight: res.properties.extrudedHeight,
-                            outline: true,
-                            // outlineColor : Cesium.Color.BLACK
-                            outlineColor: Cesium.Color.fromCssColorString('#55A1E3'),
-                            // 设置远近裁条件
-                            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(20000, 9999999999.0),
-                        }
+                        // polygon: {
+                        //     zIndex: 1,
+                        //     hierarchy: {
+                        //         positions: Cesium.Cartesian3.fromDegreesArray(oneDArray),
+                        //     },
+                        //     // outline: false,
+                        //     material: that.colorFun(Cesium.Color.fromCssColorString("rgba(254, 129, 6, 0.75)")),
+                        //     height: 100,
+                        //     extrudedHeight: res.properties.extrudedHeight,
+                        //     outline: true,
+                        //     // outlineColor : Cesium.Color.BLACK
+                        //     outlineColor: Cesium.Color.fromCssColorString('#55A1E3'),
+                        //     // 设置远近裁条件
+                        //     distanceDisplayCondition: new Cesium.DistanceDisplayCondition(20000, 9999999999.0),
+                        // }
                     });
 
 
-                    // let polygon = new Cesium.GeometryInstance({
-                    //     geometry: new Cesium.PolygonGeometry({
-                    //         polygonHierarchy: new Cesium.PolygonHierarchy(
-                    //             Cesium.Cartesian3.fromDegreesArray(oneDArray)
-                    //         ),
-                    //         height: 100,
-                    //         extrudedHeight: res.properties.extrudedHeight,
-
-                    //     })
-                    // })
-
-                    // let addPolygonGeometry = new Cesium.Primitive({
-                    //     geometryInstances: polygon,
-                    //     appearance: that.colorFun(Cesium.Color.fromCssColorString("rgba(254, 129, 6, 0.1)"))
+                    let polygon = new Cesium.GeometryInstance({
+                        geometry: new Cesium.PolygonGeometry({
+                            polygonHierarchy: new Cesium.PolygonHierarchy(
+                                Cesium.Cartesian3.fromDegreesArray(oneDArray)
+                            ),
+                            height: 100,
+                            extrudedHeight: res.properties.extrudedHeight,
 
-                    // })
+                        })
+                    })
 
-                    // viewer.scene.primitives.add(addPolygonGeometry)
-                })
+                    let addPolygonGeometry = new Cesium.Primitive({
+                        geometryInstances: polygon,
+                        // appearance: that.colorFun(Cesium.Color.fromCssColorString(res.properties.color))
+                        appearance: that.colorFun(Cesium.Color.fromCssColorString('#139FF0'))
 
+                    })
 
+                    viewer.scene.primitives.add(addPolygonGeometry)
 
+                    console.log(res.properties.extrudedHeight, "res.properties.extrudedHeight");
 
+                    var positions = Cesium.Cartesian3.fromDegreesArray(oneDArray);
+                    viewer.entities.add({
+                        name: "立体墙效果",
+                        wall: {
+                            positions: positions,
+                            // 设置高度
+                            maximumHeights: new Array(positions.length).fill(res.properties.extrudedHeight),
+                            minimumHeights: new Array(positions.length).fill(0),
+                            material: new Cesium.DynamicWallMaterialProperty({
+                                color: Cesium.Color.fromBytes(0, 255, 255).withAlpha(0.7),
+                                duration: 3000
+                            }),
+                        }
+                    })
+                })
             })
         },
         // init_xzqh() {

src/views/viewer行政区划渐变.vue

@@ -284,6 +284,14 @@ export default {
             that.store.setCockpitTdsc(false);
         },
         colorFun(color) {
+
+
+            //             * `czm_material czm_getMaterial(czm_materialInput materialInput) {...}`: 这是一个名为 `czm_getMaterial` 的函数，它接受一个 `czm_materialInput` 类型的参数并返回一个 `czm_material` 类型的对象。这是 Cesium 中的一个约定，允许你通过编写自定义的 GLSL 代码来定义材质。  
+            // * `czm_material material = czm_getDefaultMaterial(materialInput);`: 获取默认的材质设置。  
+            // * `vec2 st = materialInput.st;`: 从输入中获取纹理坐标（texture coordinates）。  
+            // * `float dis = distance(st, vec2(0.5));`: 计算纹理坐标与中心 `(0.5, 0.5)` 的距离。  
+            // * `material.diffuse = color.rgb;`: 设置材质的漫反射颜色为你提供的 `color` 的 RGB 部分。  
+            // * `material.alpha = clamp(dis * 2.0, 0.1, 0.7);`: 根据与中心的距离设置材质的透明度（alpha）。使用 `clamp` 函数确保透明度值在 0.1 和 0.7 之间。
             const fs = `czm_material  czm_getMaterial(czm_materialInput materialInput)
             
             {
@@ -291,7 +299,7 @@ export default {
                 vec2 st = materialInput.st; 
                 float dis = distance(st,vec2(0.5));
                 material.diffuse = color.rgb;
-                material.alpha = clamp( dis * 2.0, 0.1, 0.5);
+                material.alpha = clamp( dis * 2.0, 0.1, 0.6);
                 return material;
             }
             `
@@ -357,7 +365,7 @@ export default {
                             zIndex: 2,
                             // 设置远近裁条件
                             distanceDisplayCondition: new Cesium.DistanceDisplayCondition(20000, 9999999999.0),
-                            show: true
+                            show: false
                         },
                         properties: obj,
                         // polygon: {
@@ -391,16 +399,30 @@ export default {
 
                     let addPolygonGeometry = new Cesium.Primitive({
                         geometryInstances: polygon,
-                        appearance: that.colorFun(Cesium.Color.fromCssColorString("rgba(254, 129, 6, 0.1)"))
+                        // appearance: that.colorFun(Cesium.Color.fromCssColorString(res.properties.color))
+                        appearance: that.colorFun(Cesium.Color.fromCssColorString('#139FF0'))
 
                     })
 
                     viewer.scene.primitives.add(addPolygonGeometry)
-                })
-
-
 
+                    console.log(res.properties.extrudedHeight, "res.properties.extrudedHeight");
 
+                    var positions = Cesium.Cartesian3.fromDegreesArray(oneDArray);
+                    viewer.entities.add({
+                        name: "立体墙效果",
+                        wall: {
+                            positions: positions,
+                            // 设置高度
+                            maximumHeights: new Array(positions.length).fill(res.properties.extrudedHeight),
+                            minimumHeights: new Array(positions.length).fill(0),
+                            material: new Cesium.DynamicWallMaterialProperty({
+                                color: Cesium.Color.fromBytes(0, 255, 255).withAlpha(0.7),
+                                duration: 3000
+                            }),
+                        }
+                    })
+                })
             })
         },
         // init_xzqh() {

static/data/460200_full.json

@@ -27224,6 +27224,7 @@
             "properties": {
                 "adcode": 460271,
                 "name": "育才区",
+                "extrudedHeight": 2000,
                 "center": [
                     109.760778,
                     18.407516

static/js/dynamicWallMaterialProperty.js

@@ -0,0 +1,86 @@
+/**
+ * @description:动态立体墙材质
+ * @date: 2022-02-11
+ */
+
+//动态墙材质
+function DynamicWallMaterialProperty(options) {
+    // 默认参数设置
+    this._definitionChanged = new Cesium.Event();
+    this._color = undefined;
+    this._colorSubscription = undefined;
+    this.color = options.color;
+    this.duration = options.duration;
+    this.trailImage = options.trailImage;
+    this._time = (new Date()).getTime();
+}
+Object.defineProperties(DynamicWallMaterialProperty.prototype, {
+    isConstant: {
+        get: function() {
+            return false;
+        }
+    },
+    definitionChanged: {
+        get: function() {
+            return this._definitionChanged;
+        }
+    },
+    color: Cesium.createPropertyDescriptor('color')
+});
+DynamicWallMaterialProperty.prototype.getType = function(time) {
+    return 'DynamicWall';
+};
+DynamicWallMaterialProperty.prototype.getValue = function(time, result) {
+    if (!Cesium.defined(result)) {
+        result = {};
+    }
+    result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
+    if (this.trailImage) {
+        result.image = this.trailImage;
+    } else {
+        result.image = Cesium.Material.DynamicWallImage
+    }
+
+    if (this.duration) {
+        result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
+    }
+    viewer.scene.requestRender();
+    return result;
+};
+DynamicWallMaterialProperty.prototype.equals = function(other) {
+    return this === other ||
+        (other instanceof DynamicWallMaterialProperty &&
+            Cesium.Property.equals(this._color, other._color))
+};
+Cesium.DynamicWallMaterialProperty = DynamicWallMaterialProperty;
+Cesium.Material.DynamicWallType = 'DynamicWall';
+// Cesium.Material.DynamicWallImage = "../images/overview/colors.png";
+Cesium.Material.DynamicWallImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAAgCAYAAABkS8DlAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAADSSURBVHja7NYxEoUgDEDBYM39z2qHtZViwMFxt1FJnF/98ZXWWkRE7LWWOOt5Lsm9q/vsbu9Zdtazs/J19O5bs1XPZrwze/6V31zxbOZs1n905Wt2p3f25GzE7ohv6q3nLQCA3xEAACAAAAABAAAIAABAAAAAAgAAEAAAgAAAAAQAACAAAAABAAAIAABAAAAAAgAAEAAAgAAAAAQAACAAAEAAAAACAAAQAACAAAAABAAAIAAAAAEAAAgAAEAAAAACAAAQAACAAAAA8g4AAAD//wMA4WEFTJOT5UIAAAAASUVORK5CYII=";
+
+Cesium.Material.DynamicWallSource = "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.t - time), st.t));\n\
+                                            vec4 fragColor;\n\
+                                            fragColor.rgb = color.rgb / 1.0;\n\
+                                            fragColor = czm_gammaCorrect(fragColor);\n\
+                                            material.alpha = colorImage.a * color.a;\n\
+                                            material.diffuse = color.rgb;\n\
+                                            material.emission = fragColor.rgb;\n\
+                                            return material;\n\
+                                            }";
+Cesium.Material._materialCache.addMaterial(Cesium.Material.DynamicWallType, {
+    fabric: {
+        type: Cesium.Material.DynamicWallType,
+        uniforms: {
+            color: new Cesium.Color(1.0, 1.0, 1.0, 1),
+            image: Cesium.Material.DynamicWallImage,
+            time: 0
+        },
+        source: Cesium.Material.DynamicWallSource
+    },
+    translucent: function(material) {
+        return true;
+    }
+});