U 苏州地铁首页

he wei

2025-05-08 84ff051d5c6bbf10e71f6f8d1d57740c26619d9e

 src/components/myCharts/MapChart.vue

@@ -33,6 +33,38 @@
// let homeTransImage = new Image();
// homeTransImage.src = HomeTransImage;

const subwayLines = [
    {
        name: '地铁 1 号线',
        coords: [
            [114.287177, 30.598208],
            [114.293133, 30.594368],
            // 更多站点经纬度...
        ]
    },
];

const colorList = ['#f00', '#00ff6c', '#ff00f0', '#f5f500', '#f1bb4c', '#ff5a06', '#9b00ff', '#00faaf', '#e5741c'];

// 生成随机颜色的函数
function getRandomColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

// [1,2,3,4] => [1,2] [2,3], [3,4]
function transformArray(arr, label) {
    const result = [];
    for (let i = 0, j = arr.length -1; i < j; i++) {
        result.push({coords: [arr[i], arr[i + 1]], label});
    }
    return result;
}

export default {
  name: "MapChart",
  extends: BaseChart,
@@ -42,13 +74,44 @@
      validator: (v) => [true, false, "scale", "move"].includes(v),
      default: true,
    },
    subway: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      name: "zhongguo",
      subWaySeries: [],
    };
  },
  methods: {
    async getSubWayData() {
      let subwayData = await require(`../../../public/mapJson/subway/${this.subway}.json`);
      // console.log('sub', subwayData, '=============');
      // format 数据
      try {
        this.subWaySeries = subwayData.l.map((item, index) => {
          let points = item.st.map(v => v.sl.split(',').map(vv => vv*1));
          return {
            type: 'lines',
            coordinateSystem: 'geo',
            name: item.ln,
            data: transformArray(points, item.ln),
            lineStyle: {
              color: colorList[index % colorList.length],
              width: 2
            },
            z: 3
          }
        })
      } catch (error) {
        this.subWaySeries = [];
        console.log('error', error, '=============');
      }
      // console.log('subwayseries', JSON.stringify(this.subWaySeries), '=============');
      
    },
    setMapName() {
      //查询激活轮廓图
      getAllMapOutlineAction()
@@ -81,50 +144,50 @@
          label: "测试机房1",
          value: 8,
          color: "#7668F9",
          points: [118.8062, 31.9208],
          points: [120.548762, 31.293819],
        },
        {
          name: "",
          label: "测试机房2",
          value: 100,
          color: "#0081FF",
          points: [127.9688, 45.368],
          points: [120.614052, 31.30514],
        },
        {
          name: "",
          label: "测试机房3",
          value: 100,
          color: "#0081FF",
          points: [110.3467, 41.4899],
        },
        {
          name: "节",
          label: "测试机房4",
          value: 50,
          color: "#FF6B6C",
          points: [125.8154, 44.2584],
        },
        {
          name: "",
          value: 8,
          label: "测试机房6",
          color: "#7668F9",
          points: [116.4551, 40.2539],
        },
        {
          name: "节",
          label: "测试机房7",
          value: 8,
          color: "#66F842",
          points: [123.1238, 42.1216],
        },
        {
          name: "节",
          label: "测试机房8",
          value: 100,
          color: "#0081FF",
          points: [114.4995, 38.1006],
        },
        // {
        //   name: "",
        //   label: "测试机房3",
        //   value: 100,
        //   color: "#0081FF",
        //   points: [110.3467, 41.4899],
        // },
        // {
        //   name: "节",
        //   label: "测试机房4",
        //   value: 50,
        //   color: "#FF6B6C",
        //   points: [125.8154, 44.2584],
        // },
        // {
        //   name: "",
        //   value: 8,
        //   label: "测试机房6",
        //   color: "#7668F9",
        //   points: [116.4551, 40.2539],
        // },
        // {
        //   name: "节",
        //   label: "测试机房7",
        //   value: 8,
        //   color: "#66F842",
        //   points: [123.1238, 42.1216],
        // },
        // {
        //   name: "节",
        //   label: "测试机房8",
        //   value: 100,
        //   color: "#0081FF",
        //   points: [114.4995, 38.1006],
        // },
      ];
      data = list;
      let geoJson = require(`../../../public/mapJson/${mapName}.json`);
@@ -226,101 +289,102 @@
        },
        series: [
          // 图片底色
          {
            name: "",
            type: "scatter",
            coordinateSystem: "geo",
            symbol: "circle",
            symbolSize: [24, 24],
            label: {
              formatter: "{b}",
              position: "inside",
              show: true,
              color: "#FFFFFF",
              fontWeight: "bold",
            },
            itemStyle: {
              color(params) {
                return params.data.color;
              },
            },
            data: convertData(data),
            z: 3,
          },
          {
            //图片
            name: "图片",
            type: "scatter",
            coordinateSystem: "geo",
            symbol: function (value, params) {
              let img;
              let color = params.data.color;
              // let color = "#ff6b6c";
              switch (color) {
                case "#0081ff": // 浮充
                  img = HomeChargeImage;
                  break;
                case "#ff6b6c": // 放电
                  img = HomeDischargeImage;
                  break;
                case "#66f842": // 充电
                  img = HomeNormalImage;
                  break;
                case "#7668f9": // 停电
                  img = HomeTingDianImage;
                  break;
                default:
                  // img = HomeChargeImage;
                  img = HomeTransImage;
                  break;
              }
              return params.data.name ? "circle" : "image://" + img;
            },
            symbolSize: [24, 24],
            label: {
              formatter: "{b}",
              position: "inside",
              show: true,
              color: "#FFFFFF",
              fontWeight: "bold",
            },
            itemStyle: {
              color(params) {
                return params.data.color;
              },
            },
            data: convertData(data),
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            // zlevel: 3
            z: 4,
          },
          {
            name: "波纹",
            type: "effectScatter",
            coordinateSystem: "geo",
            rippleEffect: {
              scale: 3,
            },
            symbolSize: [18, 18],
            data: convertData(data),
            itemStyle: {
              color(params) {
                return params.data.color;
              },
            },
            tooltip: {
              show: true,
            },
            // zlevel: 2
            z: 2,
          },
          // {
          //   name: "",
          //   type: "scatter",
          //   coordinateSystem: "geo",
          //   symbol: "circle",
          //   symbolSize: [24, 24],
          //   label: {
          //     formatter: "{b}",
          //     position: "inside",
          //     show: true,
          //     color: "#FFFFFF",
          //     fontWeight: "bold",
          //   },
          //   itemStyle: {
          //     color(params) {
          //       return params.data.color;
          //     },
          //   },
          //   data: convertData(data),
          //   z: 3,
          // },
          // {
          //   //图片
          //   name: "图片",
          //   type: "scatter",
          //   coordinateSystem: "geo",
          //   symbol: function (value, params) {
          //     let img;
          //     let color = params.data.color;
          //     // let color = "#ff6b6c";
          //     switch (color) {
          //       case "#0081ff": // 浮充
          //         img = HomeChargeImage;
          //         break;
          //       case "#ff6b6c": // 放电
          //         img = HomeDischargeImage;
          //         break;
          //       case "#66f842": // 充电
          //         img = HomeNormalImage;
          //         break;
          //       case "#7668f9": // 停电
          //         img = HomeTingDianImage;
          //         break;
          //       default:
          //         // img = HomeChargeImage;
          //         img = HomeTransImage;
          //         break;
          //     }
          //     return params.data.name ? "circle" : "image://" + img;
          //   },
          //   symbolSize: [24, 24],
          //   label: {
          //     formatter: "{b}",
          //     position: "inside",
          //     show: true,
          //     color: "#FFFFFF",
          //     fontWeight: "bold",
          //   },
          //   itemStyle: {
          //     color(params) {
          //       return params.data.color;
          //     },
          //   },
          //   data: convertData(data),
          //   showEffectOn: "render",
          //   rippleEffect: {
          //     brushType: "stroke",
          //   },
          //   hoverAnimation: true,
          //   // zlevel: 3
          //   z: 4,
          // },
          // {
          //   name: "波纹",
          //   type: "effectScatter",
          //   coordinateSystem: "geo",
          //   rippleEffect: {
          //     scale: 3,
          //   },
          //   symbolSize: [18, 18],
          //   data: convertData(data),
          //   itemStyle: {
          //     color(params) {
          //       return params.data.color;
          //     },
          //   },
          //   tooltip: {
          //     show: true,
          //   },
          //   // zlevel: 2
          //   z: 2,
          // },
          {
            type: "map",
            map: mapName,
            show: false,
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
@@ -345,6 +409,7 @@
              show: false,
            },
          },
          ...this.subWaySeries
        ],
      };
    },
@@ -355,8 +420,12 @@
      }
    },
  },
  mounted() {
  async mounted() {
    let chart = this.$options.chart;
    if (this.subway) {
      // 如果需要显示地铁 则先加载地铁数据
      await this.getSubWayData();
    }
    this.setMapName();
    chart.off("click"); //防止chart点击触发多次
    chart.on("click", (params) => {