最新修改

yxl

2025-01-22 f41e347a34d2859c149c59691bda6d179b209d44

 src/views/mapView/mapView.vue

@@ -15,9 +15,10 @@
        <button @click="setQueryErroInfo(false)">关闭</button>
      </div>
    </div> 
    <!-- <!-- <img :src="http://localhost:12315/image/1.jpg" />   -->
    
    <!-- <img :src="$store.state.ImageUrl" style="width:100%;height:50%"> -->
    <div class="relationBox" v-if="$store.state.showRelationBox">
      <div class="chartBox" id="relationChart"></div>
    </div>
  </div>
</template>

@@ -26,6 +27,8 @@
import mapView from "./../../assets/js/map/mapView.js";
import bus from "./../../assets/js/bus.js";
import mapServer from "../../assets/js/map/mapServer.js";
import * as echarts from "echarts";
// import { nextTick } from "vue/types/umd";
export default {
  data() {
    return {
@@ -34,46 +37,55 @@
      lengedList: [
        {
          name: "军事目标",
          color: "#73afff"
          color: "#73afff",
        },
        {
          name: "政治目标",
          color: "#fffd72"
          color: "#fffd72",
        },
        {
          name: "经济目标",
          color: "#fabc56"
          color: "#fabc56",
        },
        {
          name: "社会目标",
          color: "#272424"
          color: "#272424",
        },
        {
          name: "民宅",
          color: "#979696"
        }
      ]
          color: "#979696",
        },
      ],
    };
  },
  computed: {
    erroInfo() {
      return this.$store.state.erroInfoMessage;
    }
    },
    relationInfo() {
      return this.$store.state.relationData;
    },
  },
  watch: {
    erroInfo(nVal, Oval) {
      if (nVal) {
        this.setErrorMessage(nVal);
      }
    },
    relationInfo(data, Oval) {
      if (data) {
        setTimeout(() => {
          this.initChart(data);
        }, 500);
    }
    },
  },
  methods: {
    getBackgroundColor(res) {
      return `background-color: ${res.color};`
      return `background-color: ${res.color};`;
    },
    setMapViewStart() {
      mapView.initMap();

    },
    setErrorMessage(res) {
      this.errInfoMessage = res;
@@ -87,21 +99,87 @@
        const obj = JSON.parse(JSON.stringify(this.errInfoMessage));
        bus.$emit("mapInfo", {
          type: "erroInfo",
          value: obj.val
          value: obj.val,
        });

      }
      this.$nextTick(() => {
        this.errInfoFlag = false;
        document.getElementById("inforMessage").innerHTML = "";
        this.errInfoMessage = null;
      });
    },
    initChart(data) {
      let dom = document.getElementById("relationChart");
      let myChart = echarts.init(dom);
      const option = {
        tooltip: {},
        series: [
          {
            type: "graph",
            layout: "force",
            data: data.nodes,
            links: data.links,
            symbolSize: function (size) {
              return size;
            },
            roam: true, // 启用缩放和拖拽
            label: {
              show: true,
              textStyle: {
                fontSize: 13,
                color: "#fff",
              },
            },
            force: {
              repulsion: 500,
            },
            edgeSymbol: ["none", "arrow"], //线2头标记
            lineStyle: {
              opacity: 1,
              width: 1,
              curveness: 0,
              color: "#fff",
              type: "dashed",
            },
          },
        ],
      };
      if (option && typeof option === "object") {
        myChart.setOption(option);
    }
      window.addEventListener("resize", myChart.resize);
      const that = this;
      myChart.on("click", function (params) {
        //定位到对应实体
        if (params.data.uuid) {
          that.flyToEntity(params.data);
        }
      });
    },
    flyToEntity(entity) {
      const modelLayer = mapServer.listData.filter((obj) => {
        if (obj.name == config.modelLayer) {
          return obj;
        }
      });
      modelLayer[0].layer.style = new Cesium.Cesium3DTileStyle({
        color: {
          evaluateColor: (feature) => {
            const id = feature.getProperty("id");
            if (id.indexOf(entity.uuid) > -1) {
              console.log("id**********", id);
              return new SmartEarth.Cesium.Color.fromCssColorString("#FF0000");
            }
          },
        },
      });
      earthCtrl.camera.flyTo(entity.lontitude, entity.lattitude, 3000, 0, -90, 0, 2);
    },
  },

  mounted() {
    this.setMapViewStart();
  }
  },
};
</script>

@@ -110,14 +188,13 @@
  width: 100%;
  height: 100%;
  position: absolute;
 
}

.mapLenged {
  position: absolute;
  z-index: 40;
  border: 1px solid #808080;
  background: rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, 0.7);
  padding: 4px;
  bottom: 20px;
  left: 20px;
@@ -130,7 +207,6 @@
  align-items: center;
  margin-left: 10px;
  font-size: 16px;

}

.mapLenged li {
@@ -182,6 +258,22 @@
  line-height: normal;
  font-size: 12px;
}

.relationBox {
  position: absolute;
  z-index: 40;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px;
  top: 20px;
  left: 20px;
  width: 95%;
  height: 50%;
  width: 45vw;
}
.chartBox {
  width: 100%;
  height: 100%;
}
</style>
<style>
.infoTitle {