地图样式

src/views/cockpitNew1/tdsc.vue

@@ -100,7 +100,7 @@ export default {
         },
         xAxis: {
           triggerEvent: true,
-          data: ['崖州区', '崖州区', '崖州区', '崖州区'],
+          data: ['崖州区', '天崖区', '吉阳区', '海棠区'],
           axisLabel: {
             show: true,
             fontSize: 12,

src/views/viewer1.vue

@@ -22,7 +22,7 @@ import GDBH from './cockpitNew1/gdbh';
 import STXF from './cockpitNew1/stxf';
 import WPJG from './cockpitNew1/wpjg';
 import { cockpitInfo } from '@/api/cockpit'
-// import s from "./"
+import xzqh from "../../static/data/460200_full.json";
 export default {
     components: { JSYD, TDSC, HYSY, TDSY, GDBH, STXF, WPJG },
     data() {
@@ -74,11 +74,23 @@ export default {
 
                     if (pickObj.id && pickObj.id instanceof Cesium.Entity) {//点击entity
 
-                        console.log('点击entity');
                         if (pickObj.id.properties.hasProperty('name')) {
                             const name = pickObj.id.properties.name.getValue();
                             const address = pickObj.id.properties.adcode.getValue();
-                            console.log(name, address);
+                            const center = pickObj.id.properties.center.getValue();
+
+                            pickObj.id.polygon._material.color = Cesium.Color.fromCssColorString("RGBA(24, 100, 166, 1)");
+
+                            viewer.entities.values.forEach((res) => {
+
+                                if (res.properties.name._value != name) {
+                                    // console.log(res.properties.name._value, "其他的");
+                                    // console.log(res);
+                                    res.polygon._material.color = Cesium.Color.fromCssColorString("RGBA(24, 100, 166, 0.7)")
+
+                                }
+                            })
+                        } else {
 
                         }
 
@@ -91,6 +103,37 @@ export default {
                 }
 
             }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+        },
+        init_xzqh() {
+            xzqh.features.forEach((res) => {
+
+                const twoDArray = res.geometry.coordinates[0][0];
+                const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
+
+
+                viewer.entities.add({
+                    properties: {
+                        'type': "cockpit",
+                        'name': res.properties.name,
+                        'center': res.properties.center,
+                        'adcode': res.properties.adcode,
+                    },
+                    polygon: {
+                        // 获取指定属性（positions，holes（图形内需要挖空的区域））
+                        hierarchy: {
+                            positions: Cesium.Cartesian3.fromDegreesArray(oneDArray),
+                        },
+                        // 边框
+                        outline: false,
+                        material: Cesium.Color.fromCssColorString("RGBA(24, 100, 166, 0.7)"),
+                        // 是否被提供的材质填充
+                        height: 100,
+                        extrudedHeight: 450,
+
+                    }
+                });
+
+            })
         }
     },
     beforeCreate() { }, //生命周期 - 创建之前
@@ -110,26 +153,10 @@ export default {
         // console.log(data1, "asda");
         // 三亚行政区划加载
 
-        Cesium.GeoJsonDataSource.load("../../static/data/460200_full.json").then(function (dataSource) {
-            viewer.dataSources.add(dataSource);
-            let entities = dataSource.entities.values;
-            for (let i = 0; i < entities.length; i++) {
-                let entity = entities[i];
-                entity.polygon.material = Cesium.Color.fromCssColorString("RGBA(24, 100, 166, 0.7)");
-                entity.polygon.outline = false;
-                // 将高度拉伸至35米
-                entity.polygon.extrudedHeight = 450;
-                entity.polygon.height = 100;
-                entity.properties = {
-                    'name': entity.properties._name._value,
-                    'adcode': entity.properties.adcode._value,
-
-                };
-            }
-        });
+
         this.$nextTick((res) => {
             this.pick_xzqh();
-
+            this.init_xzqh()
         });