|
|
@@ -0,0 +1,487 @@
|
|
|
+<template>
|
|
|
+ <div class="BoxCommonVector">
|
|
|
+ <div class="innerContainerVector leftPaneVector">
|
|
|
+
|
|
|
+ <h2 class="PangetitleVector">
|
|
|
+ <span class="pange_textVector">{{ title }}</span>
|
|
|
+ </h2>
|
|
|
+ <i class="el-icon-close" @click="close"></i>
|
|
|
+
|
|
|
+ <el-input clearable v-model="state" @input="change_witch" class="search" placeholder="请输入内容"></el-input>
|
|
|
+
|
|
|
+ <el-table :data="active_dableData" style="width: 100%" height="490" :header-cell-style="{
|
|
|
+ background: 'rgba(10, 25, 38, 0.6)',
|
|
|
+ color: '#66b1ff',
|
|
|
+ fontSize: '14px',
|
|
|
+ fontFamily: 'Microsoft YaHei',
|
|
|
+ fontWeight: '400',
|
|
|
+ }">
|
|
|
+
|
|
|
+
|
|
|
+ <el-table-column show-overflow-tooltip="true" v-for="(index, item) in store.state.cockpit_vector.columns"
|
|
|
+ :key="index" width="120" :prop="store.state.cockpit_vector.columns[item]"
|
|
|
+ :label="store.state.cockpit_vector.columns[item]">
|
|
|
+
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column fixed="right" label="操作" width="50">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <!-- <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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { QueryList } from '@/api/cockpitNew'
|
|
|
+import * as tdsy from "@/views/cockpit/js/tdsy";
|
|
|
+
|
|
|
+import * as wellknown from "wellknown";
|
|
|
+import * as turf from "@turf/turf";
|
|
|
+
|
|
|
+let BoxCommonVector_entity = null;
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ state: '',
|
|
|
+ timeout: null,
|
|
|
+ title: "",
|
|
|
+ active_dableData: null,
|
|
|
+ tableData: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ draw_vector_tdgy_gy_jd(data) {
|
|
|
+ data.forEach((res) => {
|
|
|
+ res.type = '国有建设用地完成项目'
|
|
|
+ if (res.geom) {
|
|
|
+ res.geom.coordinates.forEach((res_coordinates) => {
|
|
|
+ let arrayt = [];
|
|
|
+ if (res_coordinates.length == 1) {
|
|
|
+ arrayt = res_coordinates[0]
|
|
|
+ } else {
|
|
|
+ arrayt = res_coordinates
|
|
|
+ }
|
|
|
+
|
|
|
+ const twoDArray = arrayt;
|
|
|
+ const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
|
|
|
+ tdsy.add(res, oneDArray);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ close() {
|
|
|
+
|
|
|
+ store.setViewerFlagb(true);
|
|
|
+ tdsy.remove();
|
|
|
+ store.state.vectorData = [];
|
|
|
+
|
|
|
+ },
|
|
|
+ info() { },
|
|
|
+ switch_show(flag) {
|
|
|
+ BoxCommonVector_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), []);
|
|
|
+
|
|
|
+ BoxCommonVector_entity.entities.add({
|
|
|
+ polygon: {
|
|
|
+ // 获取指定属性（positions，holes（图形内需要挖空的区域））
|
|
|
+ hierarchy: {
|
|
|
+ positions: Cesium.Cartesian3.fromDegreesArrayHeights(oneDArray),
|
|
|
+ },
|
|
|
+ // 边框
|
|
|
+ outline: true,
|
|
|
+ // 边框颜色
|
|
|
+ outlineColor: Cesium.Color.RED,
|
|
|
+ // 边框尺寸
|
|
|
+ outlineWidth: 10,
|
|
|
+ // 填充的颜色，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;
|
|
|
+ // BoxCommonVector_entity = new Cesium.CustomDataSource("BoxCommonVector_entity");
|
|
|
+ // viewer.dataSources.add(BoxCommonVector_entity);
|
|
|
+
|
|
|
+ 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), []);
|
|
|
+ BoxCommonVector_entity.entities.add({
|
|
|
+ polygon: {
|
|
|
+ // 获取指定属性（positions，holes（图形内需要挖空的区域））
|
|
|
+ hierarchy: {
|
|
|
+ positions: Cesium.Cartesian3.fromDegreesArrayHeights(oneDArray),
|
|
|
+ },
|
|
|
+ // 边框
|
|
|
+ outline: true,
|
|
|
+ // 边框颜色
|
|
|
+ outlineColor: Cesium.Color.RED,
|
|
|
+ // 边框尺寸
|
|
|
+ outlineWidth: 10,
|
|
|
+ // 填充的颜色，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);
|
|
|
+ for (var i = 0; i < 10; i++) {
|
|
|
+ BoxCommonVector_entity.entities.values.forEach((res) => {
|
|
|
+
|
|
|
+ BoxCommonVector_entity.entities.remove(res);
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }, 6000)
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ store.state.vectorData = arr
|
|
|
+ store.setActiveToolBar(9);
|
|
|
+
|
|
|
+ },
|
|
|
+ change_witch() {
|
|
|
+ this.get_search(this.state);
|
|
|
+ },
|
|
|
+ get_search(word) {
|
|
|
+ if (word.length == 0) {
|
|
|
+ this.active_dableData = this.tableData;
|
|
|
+ } else {
|
|
|
+ let gy_ju = {
|
|
|
+ beginTime: store.state.cockpit_date[0],
|
|
|
+ endTime: store.state.cockpit_date[1],
|
|
|
+ jscType: store.state.cockpit_vector.tablejscType + '_cx',
|
|
|
+ id: '4602',
|
|
|
+ val0: word,
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ Promise.all([QueryList(gy_ju)]).then((values) => {
|
|
|
+ this.active_dableData = values[0].data
|
|
|
+ }).catch((error) => {
|
|
|
+ console.error(error); // 如果有任何一个 promise 失败，则捕获这个错误
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ cockpit_vector() {
|
|
|
+ return store.state.cockpit_vector;
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ cockpit_vector(newVal, oldVal) {
|
|
|
+ console.log('newVal: ', newVal);
|
|
|
+ this.title = newVal.title
|
|
|
+ this.active_dableData = newVal.tableData
|
|
|
+ this.tableData = newVal.tableData
|
|
|
+ },
|
|
|
+ active_dableData(newVal, oldVal) {
|
|
|
+ this.draw_vector_tdgy_gy_jd(newVal);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ const that = this;
|
|
|
+ this.$nextTick(() => {
|
|
|
+
|
|
|
+ BoxCommonVector_entity = new Cesium.CustomDataSource("BoxCommonVector_entity");
|
|
|
+ viewer.dataSources.add(BoxCommonVector_entity);
|
|
|
+
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.BoxCommonVector {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ left: -1rem;
|
|
|
+ top: 0rem;
|
|
|
+}
|
|
|
+
|
|
|
+.innerContainerVector {
|
|
|
+ width: 350px;
|
|
|
+ height: 600px; //calc(100% - 20px);
|
|
|
+ position: absolute;
|
|
|
+ top: 28px;
|
|
|
+ z-index: 99;
|
|
|
+ background-image: url("/static/images/ghzc/内容框.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ border-top-right-radius: 15px;
|
|
|
+
|
|
|
+ .search {
|
|
|
+ // margin: 2rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-input {
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-input__inner {
|
|
|
+ // background: transparent !important;
|
|
|
+ color: white !important;
|
|
|
+ background: rgba(10, 25, 38, 0.5);
|
|
|
+ border-color: #5ecef09a;
|
|
|
+ // color: #64daff;
|
|
|
+ // font-size: 12px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.leftPaneVector {
|
|
|
+ left: 20px;
|
|
|
+
|
|
|
+ .el-icon-close {
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ color: #fff !important;
|
|
|
+ background-color: #335f87;
|
|
|
+ line-height: 23px;
|
|
|
+ padding: 0 5px;
|
|
|
+ border-radius: 4px;
|
|
|
+ top: -1.9rem !important;
|
|
|
+ position: relative;
|
|
|
+ right: -19.5rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .PangetitleVector {
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ height: 35px;
|
|
|
+ background: url("/static/images/overview/titlebox.gif") no-repeat !important;
|
|
|
+ background-size: 100% 100% !important;
|
|
|
+ line-height: 35px;
|
|
|
+ font-size: 14px;
|
|
|
+ padding-left: 15px;
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .pange_textVector {
|
|
|
+ font-size: 14px !important;
|
|
|
+ font-family: 'HarmonyOS Sans, HarmonyOS Sans';
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-left: 30px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+/deep/.el-input__inner:focus {
|
|
|
+ border: 1px solid #1fb1ef;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.el-input__inner {
|
|
|
+ border: 1px solid rgba(10, 25, 38, 0.5);
|
|
|
+ background: rgba(10, 25, 38, 0.5);
|
|
|
+ border-radius: 18px;
|
|
|
+ height: 30px;
|
|
|
+ color: white;
|
|
|
+ line-height: 30px;
|
|
|
+ // background: #ffffff3b;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.el-input__icon {
|
|
|
+ line-height: 30px;
|
|
|
+ border-radius: 0 18px 18px 0;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.el-input__suffix {
|
|
|
+ background: #1fb1ef;
|
|
|
+ right: 1px;
|
|
|
+ padding: 0 5px;
|
|
|
+ border-radius: 0 18px 18px 0;
|
|
|
+ opacity: 0.8;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/deep/ .el-autocomplete-suggestion {
|
|
|
+ margin-top: 8px;
|
|
|
+ border-radius: 6px;
|
|
|
+ border: 1px solid #198ec0;
|
|
|
+ background: rgba(10, 25, 38, 0.9);
|
|
|
+ color: rgba(25, 142, 192, 1);
|
|
|
+
|
|
|
+ .popper__arrow {
|
|
|
+ top: -8px;
|
|
|
+ border-bottom-color: rgba(31, 177, 239, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .popper__arrow::after {
|
|
|
+ border-bottom-color: rgba(0, 80, 111, 0.9);
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-autocomplete-suggestion__wrap {
|
|
|
+ padding: 2px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .el-autocomplete-suggestion li {
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .el-autocomplete-suggestion li:hover {
|
|
|
+ background-color: rgba(8, 162, 223, 0.8);
|
|
|
+ border-radius: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+/deep/ .el-table tr {
|
|
|
+ background: rgba(10, 25, 38, 0.5) !important;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .el-table td.el-table__cell,
|
|
|
+.el-table th.el-table__cell.is-leaf {
|
|
|
+ background: rgba(10, 25, 38, 0.5) !important;
|
|
|
+
|
|
|
+ border-bottom: 0px solid #EBEEF5;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.el-table {
|
|
|
+ color: #fff;
|
|
|
+ background: rgba(10, 25, 38, 0.5) !important;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .el-table__fixed-right::before,
|
|
|
+.el-table__fixed::before {
|
|
|
+
|
|
|
+ background: rgba(10, 25, 38, 0.9) !important;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .el-table__fixed-right-patch {
|
|
|
+ background: rgba(10, 25, 38, 0.9) !important;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .el-table--border::after,
|
|
|
+.el-table--group::after,
|
|
|
+.el-table::before {
|
|
|
+ background: rgba(10, 25, 38, 0) !important;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
