|
|
@@ -1,487 +0,0 @@
|
|
|
-<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>
|
|
|
-
|
