大屏地图重构

黄何裕

2024-07-30 321864255ffdcf3426ed99cd5642991088a3fc6c

大屏地图重构

 src/assets/map/zigong.geoJson

New file
Diff too large

 src/views/screen/newPage/components/newMap.vue

New file
@@ -0,0 +1,161 @@
<template>
  <div class="map-container">
    <div ref="map" class="map-style"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-gl";
import mapData from "@/assets/map/zigong2.json";
echarts.registerMap("zigong", mapData);
let mapChart = null;
let tempName = "";
let observer = null;
const mapConfig = {
  series: [
    {
      map: "zigong", //注册地图的名字
      type: "map",
      bottom: 2,
      left: 0,
      top: 0,
      right: 0,
      itemStyle: {
        areaColor: "#00388d",
        color: "#4189f2", // 背景
        opacity: 0.7, //透明度
        borderWidth: 1, // 边框宽度
        borderColor: "#5b83bd", // 边框颜色
        fontSize: 18, //
      },

      // 标签
      label: {
        show: true,
        color: "#fff", //地图初始化区域字体颜色
        fontSize: 18,
      },
      // 控制器
      viewControl: {
        beta: -30,
        alpha: 90,
        distance: 100,
        maxBeta: 180,
        panSensitivity: 0,
      },
      // 鼠标移入时样式
      emphasis: {
        itemStyle: {
          areaColor: "#002a69",
          color: "#F63545",
        },
        label: {
          show: true,
          color: "#68dca4", //地图初始化区域字体颜色
          fontSize: 18,
        },
      },
      select: {
        itemStyle: {
          areaColor: "#002a69",
          color: "#F63545",
        },
        label: {
          show: true,
          color: "#68dca4", //地图初始化区域字体颜色
          fontSize: 18,
        },
      },

      // 数据
      data: mapData.features.map((item) => {
        return {
          name: item.properties.name,
          itemStyle: {
            color: "#4189f2",
          },
        };
      }),
    },
  ],
};
export default {
  name: "DataMap",
  data() {
    return {};
  },
  components: {},
  methods: {
    filterData(name) {
      this.initConfig();
      let temp = mapConfig.series[0].data.find((item) => item.name === name);
      temp.itemStyle.areaColor = "#002a69";
      temp.itemStyle.label.color = "#F63545";
      mapChart.setOption(mapConfig, true);
      this.$emit("filterData", name);
    },
    initConfig() {
      mapConfig.series[0].data.forEach((item) => {
        item.itemStyle.areaColor = "#00388d";
        item.itemStyle.label.color = "#fff";
      });
    },
    // 监听变化
    observe() {
      if (!observer) {
        observer = new ResizeObserver((entries) => {
          this.handleResize();
        });
      }
      observer.observe(this.$refs.map);
    },
    // 窗口变换
    handleResize() {
      if (mapChart) {
        mapChart.resize();
      }
    },
  },
  mounted() {
    mapChart = echarts.init(this.$refs.map);
    mapChart.setOption(mapConfig, true);
    mapChart.on("click", (params) => {
      if (tempName === params.name) {
        tempName = "";
        this.initConfig();
        mapChart.setOption(mapConfig, true);
        this.$emit("filterData", "");
      } else {
        tempName = params.name;
        this.filterData(params.name);
      }
    });
    this.observe();
  },
  beforeDestroy() {
    if (observer) {
      mapChart.dispose();
      observer.unobserve(this.$refs.map);
    }
  },
};
</script>

<style lang="scss" scoped>
.map-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .map-style {
    width: 95%;
    height: 95%;
    background: url("../../../../assets/images/screen/bg3.png");
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
  }
}
</style>

 src/views/screen/newPage/index.vue

@@ -95,7 +95,7 @@
        </div>
      </div>
      <div class="large_screen_box">
        <ScreenMap></ScreenMap>
        <NewMap></NewMap>
      </div>
      <div class="left_box">
        <div class="card" style="height: 103px">
@@ -142,6 +142,7 @@
import ScreenMapThree from "../components/screen-map-three/index";
import ExamineChart from "../components/screen-examine/components/examine-chart.vue";
import ScreenData from "../components/screen-data/index.vue";
import NewMap from "./components/newMap.vue"
export default {
  name: "Newpage",
  components: {
@@ -150,6 +151,7 @@
    ScreenMap,
    ExamineChart,
    ScreenData,
    NewMap,
  },
  data() {
    return {
@@ -282,7 +284,7 @@
  width: 100%;
  height: 320px;
  background: url("../../../assets/images/screen/cardBg.png");
  background-size: 100% 101%;
  background-size: 100% 100%;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  display: flex;