修改图层中区域样式

master

2022-04-28 2ec89fac3821d68ad8f8c9c37ef1e977c86743f4

修改图层中区域样式

 src/views/index.vue

@@ -62,6 +62,7 @@
import img_bg_m_url from '../assets/mapv2/bg_m.png';
import Common from '../unit/common';
import MarsMap from '../components/mars/map.vue'
import { data } from '../unit/interface';

export default {
  name: 'HomeMain',
@@ -71,6 +72,7 @@
      index: 0,
      companyList: [],
      companyList2: [],
      companyList3: [],
      showUser: true,
      companys: '总公司',
      areaId: '',
@@ -224,10 +226,15 @@
        for (let i = 0; i < datas.length; i++) {
          const graphic = new this.mars3d.graphic.PolygonEntity({
            positions: datas[i].shape,
            popup: `<div class="shape-company">
            <span>${datas[i].companyName}</span>
            </div>`,

            // popup: `<div class="shape-company">
            // <span>${datas[i].companyName}</span>
            // </div>`,
            // popupOptions: {
            //   offsetY: 60,
            //   horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            //   verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            //   distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 400000),
            // },
            style: {
              height: 500 + Math.random() * 1000,
              diffHeight: 2000.0,
@@ -235,8 +242,9 @@
              alphaPower: 1.5,
              opacity: 0.5,
              attr: datas[i],
              distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 400000),
              highlight: {
                tooltip: this.getRate(datas[i].areaId),
                // tooltip: this.getRate(datas[i].areaId, graphicLayer),
                type: this.mars3d.EventType.click,
                diffHeight: 3000,
                material: this.mars3d.MaterialUtil.createMaterialProperty(this.mars3d.MaterialType.LineFlow, {
@@ -251,9 +259,27 @@
            },
          })
          graphicLayer.addGraphic(graphic)

          const icongraphic = new this.mars3d.graphic.DivGraphic({
            position: [res.data[i].longitude, res.data[i].latitude, 4000],
            style: {
              clampToGround: true,
              html: `<div class="shape-company">
            <span>${datas[i].companyName}</span>
            </div>`,
              offsetY: 120,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 400000), // 按视距距离显示
            },
            pointerEvents: false,
            attr: res.data[i]
          })
          this.companyList3.push(icongraphic)

          graphic.on(this.mars3d.EventType.click, function (event) {
            console.log(event)
            that.getRate(event.target.options.style.attr.areaId)
            that.getRate(event.target.options.style.attr.areaId, graphicLayer)
          })
        }

@@ -342,7 +368,7 @@
      this.$refs.leftBox.init();
      this.$refs.rightBox.init()
    },
    getRate (areaId) {
    getRate (areaId, layer) {
      this.$axios.get(`${this.$Interface.areaStationRate}?areaId=${areaId}`).then((res) => {
        if (res.code === 0) {
          console.log(res, "ceshiyixia")
@@ -350,6 +376,18 @@
          this.from = res.data[1]
        }
      })
      for (let i = 0; i < this.companyList3.length; i++) {
        let datas = this.companyList3[i]

        if (areaId === datas.options.attr.areaId) {
          console.log(datas, "datas")
          console.log("1111111")
          // datas.addTo(layer)
          layer.addGraphic(datas)
        } else {
          datas.remove(false)
        }
      }

    },
  },