large-vue/src/views/screen/map/mapTwo.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'
let imgElement
export default {
  props: {
    mapData: Array
  },
  data() {
    return {
      appOrg: "10001",
      showBack: false,
      dataSource: {
        大同市: 大同市,
        朔州市: 朔州市,
        忻州市: 忻州市,
        吕梁市: 吕梁市,
        太原市: 太原市,
        阳泉市: 阳泉市,
        晋中市: 晋中市,
        临汾市: 临汾市,
        长治市: 长治市,
        运城市: 运城市,
        晋城市: 晋城市,
      },
      points:[
        { name: "太原市", coordinate: [112.3493, 37.7570], appOrg: "1A003", x: "399", y: "2" },
        { name: "大同市", coordinate: [113.3002, 40.0768], appOrg: "1B001", x: "399", y: "2" },
        { name: "阳泉市", coordinate: [113.6805, 37.7863], appOrg: "1C001", x: "399", y: "2" },
        { name: "长治市", coordinate: [113.1163, 36.1954], appOrg: "1D001", x: "399", y: "2" },
        { name: "晋城市", coordinate: [113.1513, 35.5907], appOrg: "1E001", x: "399", y: "2" },
        { name: "朔州市", coordinate: [112.4329, 39.5312], appOrg: "1F001", x: "399", y: "2" },
        { name: "晋中市", coordinate: [113.2527, 37.3870], appOrg: "1K001", x: "399", y: "2" },
        { name: "临汾市", coordinate: [111.5186, 35.8582], appOrg: "1L001", x: "399", y: "2" },
        { name: "忻州市", coordinate: [112.7341, 38.6167], appOrg: "1H001", x: "399", y: "2" },
        { name: "运城市", coordinate: [110.9069, 34.9264], appOrg: "1M001", x: "399", y: "2" },
        { name: "吕梁市", coordinate: [111.1443, 37.4183], appOrg: "1J001", x: "399", y: "2" }
      ]
    }
  },
  created () {},
  mounted() {},
  methods: {
    start(){
      this.$nextTick(() => {
        let i = 0
        for (let it of this.points){
          it.x = this.mapData[i]
          i++
        }
        imgElement = document.getElementById("mapBackground");
        setTimeout(() => {
          this.initCharts();
        }, 500);
      });
    },
    initCharts() {
      const 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" }
      ];
      const charts = 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: "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: 600, // 字重
              emphasis: { color: "#fff" }, // 悬浮时的文字颜色
            },
            data: area
          },

          {
            type: "scatter", // 散点图（用于标注特殊位置）
            coordinateSystem: "geo", // 使用 `geo` 作为坐标系
            symbol: "image://" + require("@/assets/zhang/myMap/carPosition.png"), // 自定义标记（图片）
            symbolSize: [20, 30], // 标记大小（宽 30，高 20）
            label: {
              show: true, // 显示数字
              position: "right", // 数字显示在图标的正上方
              color: "#fff", // 文字颜色（白色）
              fontSize: 14, // 字体大小
              fontWeight: "bold", // 加粗
              backgroundColor: "rgba(75,117,117,0.59)", // 文字背景色（可选）
              borderColor: "rgba(56,236,250)", // 边框颜色
              borderWidth: 1,
              padding: [6, 7], // 文字内边距（可选）
              borderRadius: 2, // 文字框圆角（可选）
            },
            data: this.points.map(({ name, coordinate, appOrg, x, y }) => ({
              name, // 点名称
              value: coordinate, // 经纬度坐标
              label: { formatter: `${x}` }, // 显示 `x` 数据（可换成 y）
              appOrg,
              x, // 额外数据（在建项目数）
              y, // 额外数据（施工项目数）
            })),
          },
        ],
      };
      // 地图注册，第一个参数的名字必须和option.geo.map一致
      echarts.registerMap("shanxi",shanxi)
      charts.setOption(option);
      // 监听点击事件
      charts.on("click", (params) => {
        if (params.componentType === "geo") {
          // 点击的是地图区域
          console.log("Clicked map area: ", params.name);
        } else if (params.componentType === "series") {
          this.appOrg = params.data.appOrg
          this.$emit('transmit', this.appOrg)
          // 点击的是自定义图标（scatter）
          console.log("Clicked scatter point: ", params.name, params.data.appOrg);
          // 销毁当前图表实例
          charts.dispose();
          // 重新初始化并设置新的配置项
          this.$nextTick(() => {
            this.initChildren(params.name) // 重新初始化图表
            this.showBack = true
          });
        }
      });
    },
    initChildren(cityName){
      const charts = 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: "#FFF", // 文字颜色
              fontSize: 16, // 文字大小
              fontWeight: 600, // 字重
              emphasis: { color: "#fff" }, // 悬浮时的文字颜色
            },
          }
        ]
      };
      echarts.registerMap("child", this.dataSource[cityName])
      charts.setOption(option);
    },
    beBack(){
      this.initCharts()
      this.showBack = false
      this.appOrg = "10001"
      this.$emit('transmit', this.appOrg)
    }
  },
};
</script>

<style scoped>

</style>