定位

src/views/cockpit/common/VectorSpace/BoxCommonVector.vue

@@ -9,7 +9,7 @@
 
             <el-input clearable v-model="state" @input="change_witch" class="search" placeholder="请输入内容"></el-input>
 
-            <el-table :data="active_dableData" style="width: 100%" height="440" :header-cell-style="{
+            <el-table :data="active_dableData" style="width: 100%" height="490" :header-cell-style="{
                 background: 'rgba(10, 25, 38, 0.6)',
                 color: '#66b1ff',
                 fontSize: '14px',
@@ -26,8 +26,8 @@
 
                 <el-table-column fixed="right" label="操作" width="90">
                     <template slot-scope="scope">
-                        <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
-                        <el-button @click="handleClick(scope.row)" type="text" size="small">定位</el-button>
+                        <el-button @click="info(scope.row)" type="text" size="small">详情</el-button>
+                        <el-button @click="go(scope.row)" type="text" size="small">定位</el-button>
                     </template>
                 </el-table-column>
             </el-table>
@@ -41,6 +41,8 @@ import * as tdsy from "@/views/cockpit/js/tdsy";
 
 import * as wellknown from "wellknown";
 import * as turf from "@turf/turf";
+
+let pick_entity = null;
 export default {
     data() {
         return {
@@ -66,7 +68,7 @@ export default {
 
                         const twoDArray = arrayt;
                         const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
-                        tdsy.add(res,"国有建设用地完成项目", oneDArray);
+                        tdsy.add(res, "国有建设用地完成项目", oneDArray);
                     })
                 }
             })
@@ -77,7 +79,168 @@ export default {
             store.setViewerFlagb(true);
             tdsy.remove("国有建设用地完成项目");
         },
+        info() { },
+        switch_show(flag) {
+            pick_entity.entities.values.forEach((res) => {
+                res.show = flag;
+            })
+        },
+        build_data(geojson) {
+            geojson.coordinates.forEach((res) => {
+                const twoDArray = res[0];
+                const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
+                console.log('oneDArray: ', oneDArray);
+
+                pick_entity.entities.add({
+                    polygon: {
+                        // 获取指定属性（positions，holes（图形内需要挖空的区域））
+                        hierarchy: {
+                            positions: Cesium.Cartesian3.fromDegreesArrayHeights(oneDArray),
+                        },
+                        // 边框
+                        outline: true,
+                        // 边框颜色
+                        outlineColor: Cesium.Color.RED,
+                        // 边框尺寸
+                        outlineWidth: 2,
+                        // 填充的颜色，withAlpha透明度
+                        material: Cesium.Color.GREEN.withAlpha(0),
+                        // 是否被提供的材质填充
+                        fill: true,
+                        // 恒定高度
+                        height: 1.1,
+                        // 显示在距相机的距离处的属性，多少区间内是可以显示的
+                        // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 10000000),
+                        // 是否显示
+                        show: true,
+                        // 顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。
+                        zIndex: 10
+                    }
+                });
+
+                // 注意：polygon首尾坐标要一致
+                var polygon = turf.polygon([twoDArray]);
+
+                var centroid = turf.centroid(polygon).geometry.coordinates;
+
+                viewer.camera.flyTo({
+                    duration: 1,
+
+                    destination: Cesium.Cartesian3.fromDegrees(centroid[0], centroid[1], 3000),
+                    // destination: {
+                    //     x: -6283267.004204832,
+                    //     y: 28123682.896774407,
+                    //     z: 23709669.98539126
+                    // },
+                    orientation: {
+                        heading: 6.149339593573709,
+                        pitch: -1.539825618847483,
+                        roll: 0
+                    },
+                });
+
+
+            })
+        },
+        go(item) {
+            let arr = [];
+            const that = this;
+            pick_entity = new Cesium.CustomDataSource("pick_entity");
+            viewer.dataSources.add(pick_entity);
+            console.log('item: ', item);
+
+            Object.keys(item).forEach(key => {
+
+                arr.push({
+                    "name": key,
+                    "value": item[key],
+                });
+
+                if (key == 'geom') {
+                    console.log();
 
+
+                    let geojson = item[key];
+
+                    if (geojson.type == 'MultiPolygon') {
+                        this.build_data(geojson);
+                    } else {
+                        const twoDArray = geojson.coordinates[0];
+                        const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
+                        pick_entity.entities.add({
+                            polygon: {
+                                // 获取指定属性（positions，holes（图形内需要挖空的区域））
+                                hierarchy: {
+                                    positions: Cesium.Cartesian3.fromDegreesArrayHeights(oneDArray),
+                                },
+                                // 边框
+                                outline: true,
+                                // 边框颜色
+                                outlineColor: Cesium.Color.RED,
+                                // 边框尺寸
+                                outlineWidth: 2,
+                                // 填充的颜色，withAlpha透明度
+                                material: Cesium.Color.GREEN.withAlpha(0),
+                                // 是否被提供的材质填充
+                                fill: true,
+                                // 恒定高度
+                                height: 1.1,
+                                // 显示在距相机的距离处的属性，多少区间内是可以显示的
+                                // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 10000000),
+                                // 是否显示
+                                show: true,
+                                // 顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。
+                                zIndex: 10
+                            }
+                        });
+                        // 注意：polygon首尾坐标要一致
+                        var polygon = turf.polygon([geojson.coordinates[0]]);
+
+                        var centroid = turf.centroid(polygon).geometry.coordinates;
+
+                        viewer.camera.flyTo({
+                            duration: 1,
+
+                            destination: Cesium.Cartesian3.fromDegrees(centroid[0], centroid[1], 3000),
+                            // destination: {
+                            //     x: -6283267.004204832,
+                            //     y: 28123682.896774407,
+                            //     z: 23709669.98539126
+                            // },
+                            orientation: {
+                                heading: 6.149339593573709,
+                                pitch: -1.539825618847483,
+                                roll: 0
+                            },
+                        });
+
+
+                    }
+
+                    let flag = true;
+                    let time = setInterval(() => {
+                        flag = !flag
+                        that.switch_show(flag);
+                    }, 500);
+                    setTimeout(() => {
+                        clearInterval(time);
+                        console.log("s");
+                        console.log(pick_entity);
+                        viewer.dataSources.remove(pick_entity);
+
+
+                    }, 6000)
+
+
+
+                }
+            });
+
+
+            store.state.vectorData = arr
+
+
+        },
         change_witch() {
             this.get_search(this.state);
         },
@@ -131,8 +294,9 @@ export default {
     mounted() {
         const that = this;
         this.$nextTick(() => {
-            // tdsy.init(viewer);
 
+            pick_entity = new Cesium.CustomDataSource("pick_entity");
+            viewer.dataSources.add(pick_entity);
 
         });
     }