添加删除

src/components/Query/clickQuery/MultiLevelQuery.vue

@@ -43,6 +43,7 @@ export default {
             activeName: 'second',
             handler_multi_level_query: null,
             manager_multi_level_query: null,
+            manager_multi_level_vector: null,
         };
     },
     //监听属性 类似于data概念
@@ -56,7 +57,7 @@ export default {
 
             e.forEach(element => {
                 if (element.filed == "geom") {
-
+                    console.log(element.data);
                 }
             });
 
@@ -72,10 +73,7 @@ export default {
 
             const that = this;
 
-            var entities = that.manager_multi_level_query.entities.values;
-            for (var i = entities.length - 1; i >= 0; i--) {
-                that.manager_multi_level_query.entities.remove(entities[i]);
-            }
+            that.clear_data();
             if (that.handler_multi_level_query == null) {
                 that.handler_multi_level_query = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
             }
@@ -101,7 +99,7 @@ export default {
 
                 that.manager_multi_level_query.entities.add({
                     name: "manager_multi_level_query",
-                    position: Cesium.Cartesian3.fromDegrees(longitude, latitude, 100),
+                    position: Cesium.Cartesian3.fromDegrees(longitude, latitude, 40),
                     billboard: {
                         // 图像地址，URI或Canvas的属性
                         image: "./static/images/overview/go.png",
@@ -121,37 +119,44 @@ export default {
 
                 const wkt = wellknown.stringify(geojsonPoint);
                 let obj = {
-                    // "wkt": 'POINT (109.51207847188947 18.311530254307392)',
-                    "wkt": 'POINT (109.5148879995491 18.315185320357678)',
-                    // "wkt": wkt,
+                    // "wkt": 'POINT (109.51207847188947 18.311530254307392)', //单面
+                    // "wkt": 'POINT (109.50728022974468 18.318266593715794)', //多面
+                    "wkt": wkt,
 
                     "id": 'dd699f839bc04969ae2dc2e1964d0ad1',
                 }
                 GetTableData(obj).then(res => {
-                    store.state.query_pick_last_pane = {
-                        name: res.data.dataname,
-                        value: res.data.data[0]
-                    };
-
-                    res.data.child.forEach(element => {
-                        if (element.data.length > 1) {
-                            store.state.query_pick_pane.push({
-                                name: element.dataname,
-                                value: element.data
-                            });
-
-                            element.data.forEach(e => {
-                                // console.log('e: ', e);
-                                e.forEach((res) => {
-                                    if (res.filed == 'geom') {
-                                        let geojson = wellknown.parse(res.data);
-                                        console.log('geojson: ', geojson);
-                                    }
-                                })
-                            });
-                            // that.draw_vector(e);
-                        }
-                    });
+                    if (res.data.data != undefined) {
+                        store.state.query_pick_last_pane = {
+                            name: res.data.dataname,
+                            value: res.data.data[0]
+                        };
+                    }
+                    if (res.data.child != undefined) {
+                        store.state.query_pick_pane = [];
+                        res.data.child.forEach(element => {
+                            if (element.data.length > 1) {
+                                store.state.query_pick_pane.push({
+                                    name: element.dataname,
+                                    value: element.data
+                                });
+
+                                element.data.forEach(e => {
+                                    e.forEach((res) => {
+                                        if (res.filed == 'geom') {
+                                            let geojson = wellknown.parse(res.data);
+
+                                            that.draw_vector(geojson, e);
+
+
+                                        }
+                                    })
+                                });
+                                // that.draw_vector(e);
+                            }
+                        });
+                    }
+
                 })
 
 
@@ -161,18 +166,81 @@ export default {
             }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
 
 
+        },
+        multiPolygonToPolygons(multiPolygon) {
+            const polygons = [];
+            multiPolygon.coordinates.forEach(polygonCoordinates => {
+                polygons.push({
+                    type: 'Polygon',
+                    coordinates: polygonCoordinates
+                });
+            });
+            return polygons;
         },
         clear_data() {
             const that = this;
             store.state.query_pick_last_pane = null;
             store.state.query_pick_pane = [];
+            // 图标
             var entities = that.manager_multi_level_query.entities.values;
             for (var i = entities.length - 1; i >= 0; i--) {
                 that.manager_multi_level_query.entities.remove(entities[i]);
             }
+            // 矢量
+
+            this.manager_multi_level_vector.removeAll();
+            // for (let index = 0; index < this.manager_multi_level_vector._primitives.length; index++) {
+            //     const element = this.manager_multi_level_vector._primitives[index];
+            //     console.log('element: ', element);
+            //     viewer.scene.primitives.remove(element);
+
+            // }
+        },
+        add_viewer_for_vector(geojson, data) {
+
+            const twoDArray = geojson.coordinates[0];
+            const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
+
+            let polygon = new Cesium.GeometryInstance({
+                // id: JSON.stringify(obj),
+                geometry: new Cesium.PolygonGeometry({
+                    minimum: new Cesium.Cartesian3(0, 0, 0),
+                    maximum: new Cesium.Cartesian3(100000, 100000, 100000),
+                    polygonHierarchy: new Cesium.PolygonHierarchy(
+                        Cesium.Cartesian3.fromDegreesArray(oneDArray)
+                    ),
+                    height: 5,
+                    // extrudedHeight: 10,
+                })
+            })
+
+            let addPolygonGeometry = new Cesium.Primitive({
+                geometryInstances: polygon,
+                appearance: new Cesium.EllipsoidSurfaceAppearance({
+                    material: Cesium.Material.fromType('Color', {
+                        color: Cesium.Color.fromRandom({
+                            alpha: 0.8
+                        })
+                    })
+                }),
+                show: true,
+
+            })
+
+            this.manager_multi_level_vector.add(addPolygonGeometry)
         },
-        draw_vector(e) {
+        draw_vector(geojson, data) {
+            const that = this;
+            // 多面转面，在加载
+            if (geojson.type == 'MultiPolygon') {
+                let polygons = that.multiPolygonToPolygons(geojson);
 
+                polygons.forEach((res) => {
+                    that.add_viewer_for_vector(res, data);
+                })
+            } else {
+                that.add_viewer_for_vector(geojson, data);
+            }
         }
     },
     beforeCreate() { }, //生命周期 - 创建之前
@@ -186,7 +254,9 @@ export default {
             that.manager_multi_level_query = new Cesium.CustomDataSource("manager_multi_level_query");
             viewer.dataSources.add(that.manager_multi_level_query);
 
-
+            this.manager_multi_level_vector = new Cesium.PrimitiveCollection();
+            this.manager_multi_level_vector.destroyPrimitives = false;
+            viewer.scene.primitives.add(this.manager_multi_level_vector);
         })
 
     }, //生命周期 - 挂在完成