real3d-portalsite/src/components/Query/clickQuery/CockpitVector.vue

<template>
  <div class="CockpitVectorBox">

    <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' && item.name != 'id' && item.name != 'type'">
        <div class="filed_box">
          {{ item.name }}
        </div>
        :
        <div class="filed_box">
          {{ item.value }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { QueryList } from '@/api/cockpitNew'
import * as wellknown from "wellknown";
import * as turf from "@turf/turf";
let pick_entity = null;
export default {
  components: {},
  data() {
    return {
      restaurants: [],
      state: '',
      timeout: null,
      pick_entity: null,

    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    build_data(geojson) {
      geojson.coordinates.forEach((res) => {
        const twoDArray = res[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([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
          },
        });


      })
    },
  },
  beforeCreate() { }, //生命周期 - 创建之前
  created() { }, //生命周期 - 创建完成（可以访问当前this实例）
  beforeMount() { }, //生命周期 - 挂载之前
  mounted() {
    const that = this;
    this.$nextTick(() => {

      pick_entity = new Cesium.CustomDataSource("pick_entity");
      viewer.dataSources.add(pick_entity);
    }); //生命周期 - 挂在完成
  }, //生命周期 - 挂在完成
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroy() { },//生命周期 - 销毁完成
  activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
  deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
};
</script>
<style  scoped lang="scss">
.CockpitVectorBox {
  // color: #198ec0;
}


.list_vector {
  background-image: url("/static/images/ghzc/内容框.png");

  width: 20rem;
  border-top: 1px solid #CCC;
  font-size: 14px;
  padding: 1rem;
  // border-bottom:1px solid #CCC ;
}

.list_vector:last-child {

  border-bottom: 1px solid #CCC;
}

.cockpit_vector {
  position: absolute;
  top: 6rem;
  width: 20rem;
  height: 35rem;
  overflow: auto;
  overflow-x: hidden;
  // z-index: -1;
}

/deep/.el-input__inner:focus {
  border: 1px solid #1fb1ef;
}

/deep/.el-input__inner {
  border: 1px solid #1fb1ef;
  background: rgba(0, 80, 111, 0.8);
  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(0, 80, 111, 0.6);
  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;
}


.list_vector_multi {
  background-image: url("/static/images/ghzc/内容框.png");

  width: 20rem;
  border-top: 1px solid #CCC;
  font-size: 14px;
  padding: 0.5rem 0rem 0.5rem 0rem;
  border-left: 1px solid #CCC;
  border-right: 1px solid #CCC;
}

.list_vector_multi:last-child {

  border-bottom: 1px solid #CCC;
}

.filed_box {
  display: inline-block;
}
</style>