large-vue/src/views/screen/map/map.vue

<template>
  <div style="width: 680px">
    <div ref="charts" style="width: 100%;height: 920px;margin-top: -80px"></div>
    <img
      id="mapBackground"
      src="@/assets/images/main/map_bg.jpg"
      alt=""
      style="display: none"
    />
    <img
      v-if="showBack"
      @click="beBack"
      src="@/assets/images/main/back.png"
      style="width: 34px;height: 30px;cursor: pointer;position: absolute;right: 50px;bottom: 50px;"
    />
  </div>
</template>


<script>
import * as echarts from "echarts";
import shanxi from "./shanxi.json"
import 大同市 from '@/views/screen/map/大同市.json'
import 朔州市 from '@/views/screen/map/朔州市.json'
import 忻州市 from '@/views/screen/map/忻州市.json'
import 吕梁市 from '@/views/screen/map/吕梁市.json'
import 太原市 from '@/views/screen/map/太原市.json'
import 阳泉市 from '@/views/screen/map/阳泉市.json'
import 晋中市 from '@/views/screen/map/晋中市.json'
import 临汾市 from '@/views/screen/map/临汾市.json'
import 长治市 from '@/views/screen/map/长治市.json'
import 运城市 from '@/views/screen/map/运城市.json'
import 晋城市 from '@/views/screen/map/晋城市.json'
import { getProjectByAppOrg } from '@/api/screen/service'
let imgElement
export default {
  props: {
    list1: Array,
    list2: Array
  },
  data(){
    return{
      projectList: [],
      area: [
        { name: "太原市", appOrg: "1A003" },
        { name: "大同市", appOrg: "1B001" },
        { name: "阳泉市", appOrg: "1C001" },
        { name: "长治市", appOrg: "1D001" },
        { name: "晋城市", appOrg: "1E001" },
        { name: "朔州市", appOrg: "1F001" },
        { name: "晋中市", appOrg: "1K001" },
        { name: "临汾市", appOrg: "1L001" },
        { name: "忻州市", appOrg: "1H001" },
        { name: "运城市", appOrg: "1M001" },
        { name: "吕梁市", appOrg: "1J001" }
      ],
      points: [
        { name: "太原市", coordinate: [112.4493, 37.8570], appOrg: "1A003", x: "1", y: "2" },
        { name: "大同市", coordinate: [113.3002, 40.0768], appOrg: "1B001", x: "1", y: "2" },
        { name: "阳泉市", coordinate: [113.5805, 37.8563], appOrg: "1C001", x: "1", y: "2" },
        { name: "长治市", coordinate: [113.1163, 36.1954], appOrg: "1D001", x: "1", y: "2" },
        { name: "晋城市", coordinate: [112.8513, 35.4907], appOrg: "1E001", x: "1", y: "2" },
        { name: "朔州市", coordinate: [112.4329, 39.3312], appOrg: "1F001", x: "1", y: "2" },
        { name: "晋中市", coordinate: [112.8527, 37.6870], appOrg: "1K001", x: "1", y: "2" },
        { name: "临汾市", coordinate: [111.5186, 36.0882], appOrg: "1L001", x: "1", y: "2" },
        { name: "忻州市", coordinate: [112.7341, 38.4167], appOrg: "1H001", x: "1", y: "2" },
        { name: "运城市", coordinate: [111.0069, 35.0264], appOrg: "1M001", x: "1", y: "2" },
        { name: "吕梁市", coordinate: [111.1443, 37.5183], appOrg: "1J001", x: "1", y: "2" }
      ],
      appOrg: "10001",
      showBack: false,
      dataSource: {
        大同市: 大同市,
        朔州市: 朔州市,
        忻州市: 忻州市,
        吕梁市: 吕梁市,
        太原市: 太原市,
        阳泉市: 阳泉市,
        晋中市: 晋中市,
        临汾市: 临汾市,
        长治市: 长治市,
        运城市: 运城市,
        晋城市: 晋城市,
      }
    }
  },
  created () {},
  mounted() {},
  methods: {
    start(){
      this.$nextTick(() => {
        let i = 0
        for (let it of this.points){
          it.x = this.list1[i]
          it.y = this.list2[i]
          i++
        }
        imgElement = document.getElementById("mapBackground");
        setTimeout(() => {
          this.initCharts();
        }, 500);
      });
    },
    initCharts() {
      this.charts = echarts.init(this.$refs["charts"]);
      const option = {
        // 设置背景颜色，"transparent" 表示透明背景
        backgroundColor: "transparent",

        // 提示浮窗（Tooltip）配置
        tooltip: {
          show: true, // 是否显示 tooltip
          trigger: "item", // 触发类型，"item" 表示鼠标悬浮在图形上时触发
          formatter: (params) => // 格式化提示框内容
              params.seriesType === "scatter"
                  ? `在建项目：${params.data.x}<br/>施工项目：${params.data.y}`
                  : params.name, // 如果是 scatter 图表，显示额外数据，否则显示地区名称
          backgroundColor: "rgba(66,85,87,0.71)", // 提示框背景颜色（半透明黑色）
          borderColor: "rgba(56,236,250,0.6)", // 边框颜色
          borderWidth: 1,
          triggerOn: "mousemove", // 鼠标移动时触发
          enterable: true, // 允许鼠标移动到 tooltip 内部（适用于可点击 tooltip）
          textStyle: {
            color: "#fff", // 文字颜色
            fontSize: 12, // 字体大小
            overflow: "break", // 文字超出时换行
          },
          padding: [5, 10], // 提示框内边距
        },

        // 地理坐标系组件（用于地图绘制）
        geo: {
          map: "shanxi", // 使用 "shanxi" 地图
          zoom: 1.1, // 初始缩放比例（可调整地图大小）
          itemStyle: {
            borderColor: "#11F6F2", // 地图区域边界颜色
            borderWidth: 5, // 边界宽度
            shadowColor: "#0E7683", // 地图阴影颜色
            shadowBlur: 0, // 阴影模糊度
            shadowOffsetX: 5, // 阴影水平偏移
            shadowOffsetY: 13, // 阴影垂直偏移
          },
          layoutCenter: ["50%", "50%"], // 控制地图的中心位置
        },

        // 图表数据系列（series）
        series: [
          {
            type: "map", // 地图类型
            map: "shanxi", // 绑定的地图名称（与 `geo` 对应）
            zoom: 1.1, // 缩放级别
            itemStyle: {
              areaColor: { image: imgElement, repeat: "no-repeat" }, // 地图区域背景颜色（使用图片填充）
              borderColor: "#11F4F0", // 地图边界颜色
              borderWidth: 1, // 地图边界宽度
            },
            emphasis: {
              itemStyle: {
                areaColor: "#0D7481", // 鼠标悬浮时的区域颜色
              },
            },
            select: { disabled: true }, // 禁用地图的选中状态，防止点击后颜色锁定
            label: {
              show: true, // 显示区域名称
              color: "#FFF", // 文字颜色
              fontSize: 16, // 文字大小
              fontWeight: 300, // 字重
              emphasis: { color: "#fff" }, // 悬浮时的文字颜色
            },
            data: this.area
          },

          {
            type: "scatter", // 散点图（用于标注特殊位置）
            coordinateSystem: "geo", // 使用 `geo` 作为坐标系
            symbol: "image://" + require("@/assets/zhang/myMap/projectPosition.png"), // 自定义标记（图片）
            symbolSize: [30, 20], // 标记大小（宽 30，高 20）
            data: this.points.map(({ name, coordinate, appOrg, x, y }) => ({
              name, // 点名称
              value: coordinate, // 经纬度坐标
              appOrg,
              x, // 额外数据（在建项目数）
              y, // 额外数据（施工项目数）
            })),
          },
        ],
      };
      // 地图注册，第一个参数的名字必须和option.geo.map一致
      echarts.registerMap("shanxi",shanxi)
      this.charts.setOption(option);
      // 监听点击事件
      this.charts.on("click", (params) => {
        if (params.componentType === "geo") {
          // 点击的是地图区域
          console.log("Clicked map area: ", params.name);
        } else if (params.componentType === "series") {
          // 点击的是自定义图标（scatter）
          console.log("Clicked scatter point: ", params.data.appOrg);
          this.appOrg = params.data.appOrg
          this.$emit('transmit', this.appOrg)
          // 销毁当前图表实例
          this.charts.dispose();
          // 重新初始化并设置新的配置项
          this.$nextTick(() => {
            getProjectByAppOrg(this.appOrg).then((res) => {
              if (Number(res.code) === 200) {
                for (let it of res.data){
                  let coordinate = []
                  let obj = {}
                  coordinate.push(it.abscissa)
                  coordinate.push(it.ordinate)
                  obj.coordinate = coordinate
                  obj.name = it.projectName
                  this.projectList.push(obj)
                }
                this.initChildren(params.name) // 重新初始化图表
                this.showBack = true
              }
            })
          });
        }
      });
    },
    initChildren(cityName){
      this.childCharts = echarts.init(this.$refs["charts"]);
      const option = {
        // 设置背景颜色，"transparent" 表示透明背景
        backgroundColor: "transparent",

        // 提示浮窗（Tooltip）配置
        tooltip: {
          show: true, // 是否显示 tooltip
          trigger: "item", // 触发类型，"item" 表示鼠标悬浮在图形上时触发
          formatter: `{b}`,
          backgroundColor: "rgba(5,13,21,0.25)", // 提示框背景颜色（半透明黑色）
          borderColor: "rgba(0, 0, 0, 0.16)", // 边框颜色
          triggerOn: "mousemove", // 鼠标移动时触发
          enterable: true, // 允许鼠标移动到 tooltip 内部（适用于可点击 tooltip）
          textStyle: {
            color: "#fff", // 文字颜色
            fontSize: 12, // 字体大小
            overflow: "break", // 文字超出时换行
          },
          padding: 3, // 提示框内边距
        },

        // 地理坐标系组件（用于地图绘制）
        geo: {
          map: "child", // 使用 "shanxi" 地图
          zoom: 1.1, // 初始缩放比例（可调整地图大小）
          itemStyle: {
            borderColor: "#11F6F2", // 地图区域边界颜色
            borderWidth: 5, // 边界宽度
            shadowColor: "#0E7683", // 地图阴影颜色
            shadowBlur: 0, // 阴影模糊度
            shadowOffsetX: 5, // 阴影水平偏移
            shadowOffsetY: 13, // 阴影垂直偏移
          },
          layoutCenter: ["50%", "50%"], // 控制地图的中心位置
        },

        // 图表数据系列（series）
        series: [
          {
            type: "map", // 地图类型
            map: "child", // 绑定的地图名称（与 `geo` 对应）
            zoom: 1.1, // 缩放级别
            itemStyle: {
              areaColor: { image: imgElement, repeat: "no-repeat" }, // 地图区域背景颜色（使用图片填充）
              borderColor: "#11F4F0", // 地图边界颜色
              borderWidth: 1, // 地图边界宽度
            },
            emphasis: {
              itemStyle: {
                areaColor: "#0D7481", // 鼠标悬浮时的区域颜色
              },
            },
            select: { disabled: true }, // 禁用地图的选中状态，防止点击后颜色锁定
            label: {
              show: true, // 显示区域名称
              color: "#11F6F2", // 文字颜色
              fontSize: 12, // 文字大小
              emphasis: { color: "#11F6F2" }, // 悬浮时的文字颜色
            },
          },
          {
            type: "scatter", // 散点图（用于标注特殊位置）
            coordinateSystem: "geo", // 使用 `geo` 作为坐标系
            symbol: 'circle', // 自定义标记
            symbolSize: 10, // 标记的大小
            itemStyle: {
              color: 'yellow'
            },
            data: this.projectList.map(({ name, coordinate }) => ({
              name, // 点名称
              value: coordinate // 经纬度坐标
            })),
          },
        ]
      };
      echarts.registerMap("child", this.dataSource[cityName])
      this.childCharts.setOption(option);
    },
    beBack(){
      this.projectList = []
      this.childCharts.dispose();
      this.initCharts()
      this.showBack = false
      this.appOrg = "10001"
      this.$emit('transmit', this.appOrg)
    }
  },
};
</script>

<style scoped>

</style>