|
|
@@ -1,12 +1,7 @@
|
|
|
<template>
|
|
|
<div class="CockpitVectorBox">
|
|
|
- <el-autocomplete class="search" @input="change_witch" v-model="state" :fetch-suggestions="querySearchAsync"
|
|
|
- placeholder="请输入内容" @select="handleSelect" popper-class="select-option"
|
|
|
- :popper-append-to-body="false"></el-autocomplete>
|
|
|
+
|
|
|
<div class="cockpit_vector">
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
<div class="list_vector list_vector_multi" v-for="(item, index ) in store.state.vectorData" :key="index"
|
|
|
v-if="item.name != 'geom'">
|
|
|
<div class="filed_box">
|
|
|
@@ -44,50 +39,6 @@ export default {
|
|
|
watch: {},
|
|
|
//方法集合
|
|
|
methods: {
|
|
|
- change_witch() {
|
|
|
- this.get_search(this.state);
|
|
|
- },
|
|
|
- get_search(word) {
|
|
|
- if (word.length == 0) {
|
|
|
- return false;
|
|
|
- }
|
|
|
- let gy_ju = {
|
|
|
- jscType: 'jsc_tdgy_gy_zbmx_cx',
|
|
|
- id: '4602',
|
|
|
- val0: word,
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- // let bj_sl = {
|
|
|
- // beginTime: store.state.cockpit_date[0],
|
|
|
- // endTime: store.state.cockpit_date[1],
|
|
|
- // jscType: 'jsc_bjxm_csbj_zbmx_cx',
|
|
|
- // id: '4602',
|
|
|
- // val0: word,
|
|
|
-
|
|
|
- // }
|
|
|
-
|
|
|
- Promise.all([QueryList(gy_ju)]).then((values) => {
|
|
|
- console.log('values: ', values);
|
|
|
- this.restaurants = [];
|
|
|
- values.forEach((item, index) => {
|
|
|
- item.data.forEach((item, index) => {
|
|
|
- if (item.xmmc != undefined && item.xmmc.length > 0) {
|
|
|
- item.value = item.xmmc
|
|
|
- }
|
|
|
- if (item.sxnr != undefined && item.sxnr.length > 0) {
|
|
|
- item.value = item.sxnr
|
|
|
- }
|
|
|
- this.restaurants.push(item);
|
|
|
- });
|
|
|
- });
|
|
|
- console.log(this.restaurants);
|
|
|
-
|
|
|
- // 当所有 promise 都成功完成时，values 是包含所有结果的数组
|
|
|
- }).catch((error) => {
|
|
|
- console.error(error); // 如果有任何一个 promise 失败，则捕获这个错误
|
|
|
- });
|
|
|
- },
|
|
|
build_data(geojson) {
|
|
|
geojson.coordinates.forEach((res) => {
|
|
|
const twoDArray = res[0];
|
|
|
@@ -145,130 +96,6 @@ export default {
|
|
|
|
|
|
})
|
|
|
},
|
|
|
- querySearchAsync(queryString, cb) {
|
|
|
- var restaurants = this.restaurants;
|
|
|
- var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
|
|
|
-
|
|
|
- clearTimeout(this.timeout);
|
|
|
- this.timeout = setTimeout(() => {
|
|
|
- cb(results);
|
|
|
- }, 3000 * Math.random());
|
|
|
- },
|
|
|
- createStateFilter(queryString) {
|
|
|
-
|
|
|
- return (state) => {
|
|
|
-
|
|
|
- return (state.项目名称.indexOf(queryString) != -1);
|
|
|
- };
|
|
|
- },
|
|
|
- handleSelect(item) {
|
|
|
- let arr = [];
|
|
|
- const that = this;
|
|
|
- pick_entity = new Cesium.CustomDataSource("pick_entity");
|
|
|
- viewer.dataSources.add(pick_entity);
|
|
|
-
|
|
|
- Object.keys(item).forEach(key => {
|
|
|
-
|
|
|
- arr.push({
|
|
|
- "name": key,
|
|
|
- "value": item[key],
|
|
|
- });
|
|
|
-
|
|
|
- if (key == 'geom') {
|
|
|
- console.log(item[key]);
|
|
|
-
|
|
|
-
|
|
|
- let geojson = wellknown.parse(item[key]);
|
|
|
- console.log('geojson: ', geojson);
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- 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);
|
|
|
- viewer.dataSources.remove(pick_entity);
|
|
|
- // pick_entity.entities.values.forEach((res) => {
|
|
|
- // console.log('res: ', res);
|
|
|
-
|
|
|
- // pick_entity.entities.remove(res);
|
|
|
-
|
|
|
- // })
|
|
|
- }, 6000)
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
-
|
|
|
- store.state.vectorData = arr
|
|
|
-
|
|
|
-
|
|
|
- },
|
|
|
- switch_show(flag) {
|
|
|
- pick_entity.entities.values.forEach((res) => {
|
|
|
- res.show = flag;
|
|
|
- })
|
|
|
- },
|
|
|
},
|
|
|
beforeCreate() { }, //生命周期 - 创建之前
|
|
|
created() { }, //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
@@ -294,12 +121,6 @@ export default {
|
|
|
// color: #198ec0;
|
|
|
}
|
|
|
|
|
|
-.search {
|
|
|
- position: absolute;
|
|
|
- top: 5rem;
|
|
|
- right: 1rem;
|
|
|
- width: 19rem;
|
|
|
-}
|
|
|
|
|
|
.list_vector {
|
|
|
background-image: url("/static/images/ghzc/内容框.png");
|
|
|
@@ -318,7 +139,7 @@ export default {
|
|
|
|
|
|
.cockpit_vector {
|
|
|
position: absolute;
|
|
|
- top: 8rem;
|
|
|
+ top: 6rem;
|
|
|
width: 20rem;
|
|
|
height: 35rem;
|
|
|
overflow: auto;
|
zpf