Sinopec-Anxin/src/app/pages/gis-home/gis-home.component.ts

import { Component, OnInit } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";
import * as echarts from "echarts";
declare var T: any;
@Component({
  selector: "app-gis-home",
  templateUrl: "./gis-home.component.html",
  styleUrls: ["./gis-home.component.scss"],
})
export class GisHomeComponent implements OnInit {
  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit(): void {
    this.createLabelSContent(this.markerList);
    this.initMap();
    this.initEcharts();

    console.log(this.markerList);
  }

  echartleft1;
  echartleft1Data = [
    { value: 1312, name: "综合应急预案" },
    { value: 1583, name: "专项应急预案" },
    { value: 3152, name: "现场处置方案" },
    { value: 5421, name: "应急处置卡" },
    { value: 1735, name: "应急预案" },
    { value: 1258, name: "类型预案" },
    { value: 19150, name: "I-V级预案" },
  ];
  echartleft1Option = {
    tooltip: {
      trigger: "item",
    },
    title: {
      text: "33,611",
      subtext: "预案总数",
      left: "28.5%",
      x: "center",
      y: "center",
      textAlign: "center",
      textStyle: {
        color: "#fff",
        fontSize: 26,
        lineHeight: 15,
        fontWeight: "bold",
        textShadowBlur: 20,
        textShadowColor: "#fff",
      },
      subtextStyle: {
        color: "#759EBB",
        fontSize: 14,
        fontWeight: "normal",
      },
    },
    color: [
      "#1DA7C0",
      "#01CFA1",
      "#F67B44",
      "#CECE41",
      "#7641CE",
      "#CE4148",
      "#FFA192",
    ],
    legend: {
      orient: "vertical",
      left: "55%", //图例距离左的距离
      y: "center", //图例上下居中
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 18,
      textStyle: {
        color: "#fff",
        rich: {
          name: {
            fontSize: 13,
            color: "#9698A0",
            width: 80,
            padding: [-2, 0, 0, 0],
          },
          num: {
            fontSize: 13,
            padding: [-2, 0, 0, 0],
            color: "#fff",
          },
        },
      },
      formatter: (name) => {
        //图例后添加数值
        let data = this.echartleft1Data;
        let tarValue;
        for (let i = 0; i < data.length; i++) {
          if (data[i].name === name) {
            tarValue = data[i].value;
          }
        }
        return `{name|${name}}` + "   |   " + `{num|${tarValue}}`;
      },
    },
    series: [
      {
        // name: "Access From",
        type: "pie",
        radius: ["40%", "55%"],
        center: ["30%", "50%"], //图的位置，距离左跟上的位置
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: this.echartleft1Data,
      },
      // 边框的设置
      {
        radius: ["36%", "41%"],
        center: ["30%", "50%"], //图的位置，距离左跟上的位置
        type: "pie",
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        animation: false,
        tooltip: {
          show: false,
        },
        data: [
          {
            value: 3,
            itemStyle: {
              color: "#183E57",
            },
          },
        ],
      },
      {
        //装饰作用
        type: "pie",
        clockWise: false,
        radius: ["60%", "61%"],
        center: ["30%", "50%"], //图的位置，距离左跟上的位置
        hoverAnimation: false,
        startAngle: 95, //起始角度
        color: ["#297b9e"],
        tooltip: {
          show: false,
        },
        itemStyle: {
          normal: {
            label: {
              show: false,
            },
          },
        },
        data: [
          {
            value: 10,
          },
          {
            value: 3,
            itemStyle: {
              normal: {
                color: "transparent", //透明伞形
              },
            },
          },
          {
            value: 10,
          },
          {
            value: 3,
            itemStyle: {
              normal: {
                color: "transparent", //透明伞形
              },
            },
          },
          {
            value: 10,
          },
          {
            value: 3,
            itemStyle: {
              normal: {
                color: "transparent", //透明伞形
              },
            },
          },
          {
            value: 10,
          },
          {
            value: 3,
            itemStyle: {
              normal: {
                color: "transparent", //透明伞形
              },
            },
          },
          {
            value: 10,
          },
          {
            value: 3,
            itemStyle: {
              normal: {
                color: "transparent", //透明伞形
              },
            },
          },
        ],
      },
    ],
  };
  echartleft2;
  echartleft2Data = [
    { value: 345, name: "综合演练" },
    { value: 21, name: "跨区域演练" },
    { value: 853, name: "单项演练" },
    { value: 12, name: "研究性演练" },
  ];
  echartleft2Option = {
    tooltip: {
      trigger: "item",
    },
    title: {
      text: "1,231",
      subtext: "演练总数",
      left: "28.5%",
      x: "center",
      y: "center",
      textAlign: "center",
      textStyle: {
        color: "#fff",
        fontSize: 26,
        lineHeight: 15,
        fontWeight: "bold",
        textShadowBlur: 20,
        textShadowColor: "#fff",
      },
      subtextStyle: {
        color: "#759EBB",
        fontSize: 14,
        fontWeight: "normal",
      },
    },
    color: [
      "#1DA7C0",
      "#01CFA1",
      "#F67B44",
      "#CECE41",
      "#7641CE",
      "#CE4148",
      "#FFA192",
    ],
    legend: {
      orient: "vertical",
      left: "55%", //图例距离左的距离
      y: "center", //图例上下居中
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 18,
      textStyle: {
        color: "#fff",
        rich: {
          name: {
            fontSize: 13,
            color: "#9698A0",
            width: 80,
            padding: [-2, 0, 0, 0],
          },
          num: {
            fontSize: 13,
            padding: [-2, 0, 0, 0],
            color: "#fff",
          },
        },
      },
      formatter: (name) => {
        //图例后添加数值
        let data = this.echartleft2Data;
        let tarValue;
        for (let i = 0; i < data.length; i++) {
          if (data[i].name === name) {
            tarValue = data[i].value;
          }
        }
        return `{name|${name}}` + "   |   " + `{num|${tarValue}}`;
      },
    },
    series: [
      {
        // name: "Access From",
        type: "pie",
        radius: ["60%", "80%"],
        center: ["30%", "50%"], //图的位置，距离左跟上的位置
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: this.echartleft2Data,
      },
      // 边框的设置
      {
        radius: ["55%", "61%"],
        center: ["30%", "50%"], //图的位置，距离左跟上的位置
        type: "pie",
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        animation: false,
        tooltip: {
          show: false,
        },
        data: [
          {
            value: 3,
            itemStyle: {
              color: "#183E57",
            },
          },
        ],
      },
      {
        //装饰作用
        type: "pie",
        clockWise: false,
        radius: ["87%", "88%"],
        center: ["30%", "50%"], //图的位置，距离左跟上的位置
        hoverAnimation: false,
        startAngle: 95, //起始角度
        color: ["#297b9e"],
        tooltip: {
          show: false,
        },
        itemStyle: {
          normal: {
            label: {
              show: false,
            },
          },
        },
        data: [
          {
            value: 10,
          },
          {
            value: 3,
            itemStyle: {
              normal: {
                color: "transparent", //透明伞形
              },
            },
          },
          {
            value: 10,
          },
          {
            value: 3,
            itemStyle: {
              normal: {
                color: "transparent", //透明伞形
              },
            },
          },
          {
            value: 10,
          },
          {
            value: 3,
            itemStyle: {
              normal: {
                color: "transparent", //透明伞形
              },
            },
          },
          {
            value: 10,
          },
          {
            value: 3,
            itemStyle: {
              normal: {
                color: "transparent", //透明伞形
              },
            },
          },
          {
            value: 10,
          },
          {
            value: 3,
            itemStyle: {
              normal: {
                color: "transparent", //透明伞形
              },
            },
          },
        ],
      },
    ],
  };
  echartleft3;
  echartleft3Data = [
    { value: 1523, name: "待核实" },
    { value: 3560, name: "整改中" },
    { value: 1853, name: "待验收" },
    { value: 1237, name: "已完成" },
  ];
  echartleft3Option = {
    tooltip: {
      trigger: "item",
    },
    title: {
      text: "8,173",
      subtext: "隐患总数",
      left: "28.5%",
      x: "center",
      y: "center",
      textAlign: "center",
      textStyle: {
        color: "#fff",
        fontSize: 26,
        lineHeight: 15,
        fontWeight: "bold",
        textShadowBlur: 20,
        textShadowColor: "#fff",
      },
      subtextStyle: {
        color: "#759EBB",
        fontSize: 14,
        fontWeight: "normal",
      },
    },
    color: [
      "#1DA7C0",
      "#01CFA1",
      "#F67B44",
      "#CECE41",
      "#7641CE",
      "#CE4148",
      "#FFA192",
    ],
    legend: {
      orient: "vertical",
      left: "55%", //图例距离左的距离
      y: "center", //图例上下居中
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 18,
      textStyle: {
        color: "#fff",
        rich: {
          name: {
            fontSize: 13,
            color: "#9698A0",
            width: 80,
            padding: [-2, 0, 0, 0],
          },
          num: {
            fontSize: 13,
            padding: [-2, 0, 0, 0],
            color: "#fff",
          },
        },
      },
      formatter: (name) => {
        //图例后添加数值
        let data = this.echartleft3Data;
        let tarValue;
        for (let i = 0; i < data.length; i++) {
          if (data[i].name === name) {
            tarValue = data[i].value;
          }
        }
        return `{name|${name}}` + "   |   " + `{num|${tarValue}}`;
      },
    },
    series: [
      {
        // name: "Access From",
        type: "pie",
        radius: ["60%", "80%"],
        center: ["30%", "50%"], //图的位置，距离左跟上的位置
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: this.echartleft3Data,
      },
      // 边框的设置
      {
        radius: ["55%", "61%"],
        center: ["30%", "50%"], //图的位置，距离左跟上的位置
        type: "pie",
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        animation: false,
        tooltip: {
          show: false,
        },
        data: [
          {
            value: 3,
            itemStyle: {
              color: "#183E57",
            },
          },
        ],
      },
      {
        //装饰作用
        type: "pie",
        clockWise: false,
        radius: ["87%", "88%"],
        center: ["30%", "50%"], //图的位置，距离左跟上的位置
        hoverAnimation: false,
        startAngle: 95, //起始角度
        color: ["#297b9e"],
        tooltip: {
          show: false,
        },
        itemStyle: {
          normal: {
            label: {
              show: false,
            },
          },
        },
        data: [
          {
            value: 10,
          },
          {
            value: 3,
            itemStyle: {
              normal: {
                color: "transparent", //透明伞形
              },
            },
          },
          {
            value: 10,
          },
          {
            value: 3,
            itemStyle: {
              normal: {
                color: "transparent", //透明伞形
              },
            },
          },
          {
            value: 10,
          },
          {
            value: 3,
            itemStyle: {
              normal: {
                color: "transparent", //透明伞形
              },
            },
          },
          {
            value: 10,
          },
          {
            value: 3,
            itemStyle: {
              normal: {
                color: "transparent", //透明伞形
              },
            },
          },
          {
            value: 10,
          },
          {
            value: 3,
            itemStyle: {
              normal: {
                color: "transparent", //透明伞形
              },
            },
          },
        ],
      },
    ],
  };

  echartright1;
  echartright1Data = [
    { percentage: "20%", value: 1312, name: "进出口停车" },
    { percentage: "15%", value: 1583, name: "前庭接打电话" },
    { percentage: "15%", value: 1235, name: "收银员着装" },
    { percentage: "10%", value: 1852, name: "油罐区入侵" },
    { percentage: "10%", value: 1735, name: "卸油中无人监卸" },
    { percentage: "10%", value: 1258, name: "连接卸油管" },
    { percentage: "10%", value: 600, name: "卸油设置消防器材" },
    { percentage: "10%", value: 2541, name: "卸油连接静电接地" },
  ];
  echartright1Option = {
    tooltip: {
      trigger: "item",
    },
    title: {
      text: "3,675",
      subtext: "累计预警",
      left: "28.5%",
      top: "70%",
      x: "center",
      y: "center",
      textAlign: "center",
      textStyle: {
        color: "#fff",
        fontSize: 26,
        lineHeight: 15,
        fontWeight: "bold",
        textShadowBlur: 20,
        textShadowColor: "#fff",
      },
      subtextStyle: {
        color: "#759EBB",
        fontSize: 14,
        fontWeight: "normal",
      },
    },
    color: [
      "#FE6441",
      "#FB726B",
      "#E0E035",
      "#3CEBE6",
      "#3EB2E8",
      "#4265E8",
      "#3EE8A2",
      "#C63EE8",
    ],
    legend: {
      orient: "vertical",
      left: "52%", //图例距离左的距离
      y: "center", //图例上下居中
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 12,
      textStyle: {
        color: "#fff",
        rich: {
          name: {
            fontSize: 13,
            color: "#9698A0",
            width: 100,
            padding: [-2, 0, 0, 0],
          },
          num: {
            fontSize: 13,
            padding: [-2, 0, 0, 0],
            color: "#fff",
          },
        },
      },
      formatter: (name) => {
        //图例后添加数值
        let data = this.echartright1Data;
        let tarValue;
        for (let i = 0; i < data.length; i++) {
          if (data[i].name === name) {
            tarValue = data[i].percentage;
          }
        }
        return `{name|${name}}` + "   |   " + `{num|${tarValue}}`;
      },
    },
    series: [
      {
        // name: "Access From",
        type: "pie",
        radius: "45%",
        center: ["30%", "35%"], //图的位置，距离左跟上的位置
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: this.echartright1Data,
      },
      // 边框的设置
      {
        radius: ["45%", "55%"],
        center: ["30%", "35%"], //图的位置，距离左跟上的位置
        type: "pie",
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        animation: false,
        tooltip: {
          show: false,
        },
        data: [
          {
            value: 3,
            itemStyle: {
              color: "RGBA(35, 68, 100, 0.8)",
            },
          },
        ],
      },
    ],
  };

  echartright2;
  echartright2Data = [
    { percentage: "20%", value: 1312, name: "无人监卸" },
    { percentage: "15%", value: 1583, name: "连接卸油管" },
    { percentage: "15%", value: 1235, name: "卸油设置消防器材" },
    { percentage: "10%", value: 1852, name: "卸油设置静电接地" },
    { percentage: "10%", value: 1735, name: "卸油设置隔离区" },
  ];
  echartright2Option = {
    tooltip: {
      trigger: "item",
    },
    title: {
      text: "3,675",
      subtext: "卸油预警",
      left: "28.5%",
      x: "center",
      y: "center",
      textAlign: "center",
      textStyle: {
        color: "#fff",
        fontSize: 22,
        lineHeight: 8,
        fontWeight: "bold",
        textShadowBlur: 20,
        textShadowColor: "#fff",
      },
      subtextStyle: {
        color: "#759EBB",
        fontSize: 13,
        fontWeight: "normal",
      },
    },
    color: [
      "#FE6441",
      "#FB726B",
      "#E0E035",
      "#3CEBE6",
      "#3EB2E8",
      "#4265E8",
      "#3EE8A2",
      "#C63EE8",
    ],
    legend: {
      orient: "vertical",
      left: "52%", //图例距离左的距离
      y: "center", //图例上下居中
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 12,
      textStyle: {
        color: "#fff",
        rich: {
          name: {
            fontSize: 13,
            color: "#9698A0",
            width: 100,
            padding: [-2, 0, 0, 0],
          },
          num: {
            fontSize: 13,
            padding: [-2, 0, 0, 0],
            color: "#fff",
          },
        },
      },
      formatter: (name) => {
        //图例后添加数值
        let data = this.echartright2Data;
        let tarValue;
        for (let i = 0; i < data.length; i++) {
          if (data[i].name === name) {
            tarValue = data[i].percentage;
          }
        }
        return `{name|${name}}` + "   |   " + `{num|${tarValue}}`;
      },
    },
    series: [
      {
        // name: "Access From",
        type: "pie",
        radius: ["50%", "70%"],
        center: ["30%", "50%"], //图的位置，距离左跟上的位置
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: this.echartright2Data,
      },
      {
        name: "外边框",
        type: "pie",
        clockWise: false, //顺时加载
        hoverAnimation: false, //鼠标移入变大
        center: ["30%", "50%"],
        radius: ["77%", "78%"],
        label: {
          normal: {
            show: false,
          },
        },
        data: [
          {
            value: 9,
            name: "",
            itemStyle: {
              normal: {
                borderWidth: 1,
                borderColor: "#435067",
              },
            },
          },
        ],
      },
      {
        // name: "外部刻度",
        type: "gauge",
        center: ["30%", "50%"],
        radius: "45%",
        min: 0, //最小刻度
        max: 100, //最大刻度
        splitNumber: 10, //刻度数量
        startAngle: 1,
        endAngle: 360,
        axisLine: {
          show: true,
          // 仪表盘刻度线
          lineStyle: {
            width: 1,
            color: [[1, "red"]],
          },
        },
        //仪表盘文字
        axisLabel: {
          show: false,
        }, //刻度标签。
        axisTick: {
          show: true,
          splitNumber: 5,
          lineStyle: {
            color: "#556075", //用颜色渐变函数不起作用
            width: 1,
          },
          length: 3,
        }, //刻度样式
        splitLine: {
          show: true,
          length: 5,
          lineStyle: {
            width: 1,
            color: "#979EAA", //用颜色渐变函数不起作用
          },
        }, //分隔线样式
        detail: {
          show: false,
        },
        pointer: {
          show: false,
        },
      },
    ],
  };

  echartright3;
  echartright3Option = {
    xAxis: {
      type: "category",
      data: [
        "10.2",
        "10.3",
        "10.4",
        "10.5",
        "10.6",
        "10.7",
        "10.8",
        "10.9",
        "10.10",
        "10.11",
        "10.12",
        "10.13",
        "10.14",
      ],
      axisLine: {
        show: false,
        lineStyle: {
          color: "#91CCFF",
        },
      },
      axisTick: {
        //刻度线
        show: false,
      },
      inverse: true,
    },
    yAxis: {
      type: "value",
      nameTextStyle: {
        color: "#C4E2FC",
      },
      splitLine: {
        //分割线
        lineStyle: {
          color: ["#0f4374"],
          width: 2,
        },
      },
      axisTick: {
        //刻度线
        show: false,
      },
      axisLine: {
        //轴线
        show: false,
        lineStyle: {
          color: "#C4E2FC",
        },
      },
    },
    tooltip: {
      // trigger: 'axis'
    },
    series: [
      {
        name: "卸油事件",
        data: [23, 54, 53, 12, 55, 66, 24, 46, 37, 22, 35, 85, 33],
        type: "bar",
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#00BAFF", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(35, 153, 255, 0.1)", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        barWidth: "25%",
      },
      {
        name: "卸油事件",
        data: [23, 54, 53, 12, 55, 66, 24, 46, 37, 22, 35, 85, 33],
        type: "line",
        symbol: "circle",
        symbolSize: 5,
        color: "#FFFFA9",
        label: {
          show: false,
        },
        itemStyle: {
          color: "#fff",
          shadowColor: "#fff",
          shadowBlur: 10,
        },
        lineStyle: {
          color: "#FFFFA9",
          width: 1,
        },
      },
    ],
    grid: {
      left: "50px",
      right: "30px",
      bottom: "38px",
      top: "10px",
    },
  };

  initEcharts() {
    let echartleft1 = document.getElementById("echartleft1");
    this.echartleft1 = echarts.init(echartleft1);
    this.echartleft1Option &&
      this.echartleft1.setOption(this.echartleft1Option);
    let echartleft2 = document.getElementById("echartleft2");
    this.echartleft2 = echarts.init(echartleft2);
    this.echartleft2Option &&
      this.echartleft2.setOption(this.echartleft2Option);
    let echartleft3 = document.getElementById("echartleft3");
    this.echartleft3 = echarts.init(echartleft3);
    this.echartleft3Option &&
      this.echartleft3.setOption(this.echartleft3Option);
    let echartright1 = document.getElementById("echartright1");
    this.echartright1 = echarts.init(echartright1);
    this.echartright1Option &&
      this.echartright1.setOption(this.echartright1Option);
    let echartright2 = document.getElementById("echartright2");
    this.echartright2 = echarts.init(echartright2);
    this.echartright2Option &&
      this.echartright2.setOption(this.echartright2Option);
    let echartright3 = document.getElementById("echartright3");
    this.echartright3 = echarts.init(echartright3);
    this.echartright3Option &&
      this.echartright3.setOption(this.echartright3Option);

    window.onresize = () => {
      setTimeout(() => {
        this.echartleft1.resize();
        this.echartleft2.resize();
        this.echartleft3.resize();
        this.echartright1.resize();
        this.echartright2.resize();
        this.echartright3.resize();
      }, 200);
    };
  }

  accessList = [
    {
      name: "油站",
      img: "../../../assets/gismap/icon/1.png",
      value: 382,
      color: "#479FFE",
    },
    {
      name: "油库",
      img: "../../../assets/gismap/icon/2.png",
      value: 64,
      color: "#A485FF",
    },
    {
      name: "石油化工",
      img: "../../../assets/gismap/icon/3.png",
      value: 85,
      color: "#90FFAD",
    },
    {
      name: "企业",
      img: "../../../assets/gismap/icon/4.png",
      value: 543,
      color: "#E5B55B",
    },
  ];

  map;
  zoom = 5;

  markerList: any = [
    {
      id: 0,
      name: "天津",
      marker: null,
      label: null,
      coordinate: [117.42188, 38.14453],
      data: {
        station: 5,
        oilDepot: 5,
        chemical: 22,
        enterprise: 74,
      },
    },
    {
      id: 1,
      name: "北京",
      marker: null,
      label: null,
      coordinate: [116.39465, 39.88586],
      data: {
        station: 9,
        oilDepot: 1,
        chemical: 1,
        enterprise: 116,
      },
    },
    {
      id: 2,
      name: "上海",
      marker: null,
      label: null,
      coordinate: [121.46759, 31.20392],
      data: {
        station: 131,
        oilDepot: 99,
        chemical: 172,
        enterprise: 19191,
      },
    },
    {
      id: 3,
      name: "湖北",
      marker: null,
      label: null,
      coordinate: [112.45605, 30.27832],
      data: {
        station: 0,
        oilDepot: 2,
        chemical: 6,
        enterprise: 34,
      },
    },
    {
      id: 4,
      name: "湖南",
      marker: null,
      label: null,
      coordinate: [111.62109, 26.93848],
      data: {
        station: 30,
        oilDepot: 2,
        chemical: 3,
        enterprise: 44,
      },
    },
    {
      id: 5,
      name: "广东",
      marker: null,
      label: null,
      coordinate: [113.37891, 22.76367],
      data: {
        station: 42,
        oilDepot: 0,
        chemical: 1,
        enterprise: 23,
      },
    },
    {
      id: 6,
      name: "广西",
      marker: null,
      label: null,
      coordinate: [108.76465, 22.71973],
      data: {
        station: 4,
        oilDepot: 5,
        chemical: 29,
        enterprise: 91,
      },
    },
    {
      id: 7,
      name: "福建",
      marker: null,
      label: null,
      coordinate: [118.21289, 25.22461],
      data: {
        station: 108,
        oilDepot: 0,
        chemical: 0,
        enterprise: 0,
      },
    },
  ];

  createLabelSContent(list) {
    list.forEach((element) => {
      let totalString = this.numberProcess(this.sumValues(element.data));
      element.sContent1 = `<div class='markerTotal'> ${totalString} </div>`;
      element.sContent2 = "<div class='markerInfoWin'>";
      for (const key in element.data) {
        if (Object.prototype.hasOwnProperty.call(element.data, key)) {
          const item = element.data[key];
          if (item !== 0) {
            switch (key) {
              case "station":
                element.sContent2 += `<div class='icon icon1'><img src='../../../assets/gismap/gis/1.png' alt=''></div><div class='num'> ${item} </div>`;
                break;

              case "oilDepot":
                element.sContent2 += `<div class='icon icon2'><img src='../../../assets/gismap/gis/2.png' alt=''></div><div class='num'> ${item} </div>`;
                break;

              case "chemical":
                element.sContent2 += `<div class='icon icon3'><img src='../../../assets/gismap/gis/3.png' alt=''></div><div class='num'> ${item} </div>`;
                break;

              case "enterprise":
                element.sContent2 += `<div class='icon icon4'><img src='../../../assets/gismap/gis/4.png' alt=''></div><div class='num'> ${item} </div>`;
                break;

              default:
                break;
            }
          }
        }
      }
      element.sContent2 += "</div>";
    });
  }

  selectedMarker = null;
  PointOffset1 = [-25, -53]; //markerlabel偏移量
  PointOffset2 = [-28, -65];
  initMap() {
    this.map = new T.Map("mapDiv", {
      projection: "EPSG:4326",
    });
    this.map.centerAndZoom(new T.LngLat(116.2793, 32.95898), this.zoom);
    //创建图片对象
    var icon = new T.Icon({
      iconUrl: "../../../assets/gismap/gis/marker.png",
      iconSize: new T.Point(25, 44),
      iconAnchor: new T.Point(14, 40),
    });
    //创建标注对象
    this.markerList.forEach((element) => {
      element.marker = new T.Marker(
        new T.LngLat(element.coordinate[0], element.coordinate[1]),
        {
          icon: icon,
        }
      );
      //向地图上添加标注
      this.map.addOverLay(element.marker);
      element.marker.addEventListener("click", (event) => {
        this.markerClick(element);
      });
      element.label = new T.Label({
        text: element.sContent1,
        position: element.marker.getLngLat(),
        offset: new T.Point(this.PointOffset1[0], this.PointOffset1[1]),
      });
      this.map.addOverLay(element.label);
    });
    this.map.addEventListener("click", (e) => {
      this.MapClick(e);
    });
  }

  //数字加工 ,
  numberProcess(num) {
    if (num.toString().length > 3) {
      return num.toLocaleString();
    }
    return num.toString();
  }
  //对象求和
  sumValues(obj) {
    let sum = 0;

    for (let key in obj) {
      if (typeof obj[key] === "number") {
        sum += obj[key];
      }
    }

    return sum;
  }
  //地图点击事件
  MapClick(e) {
    console.log("点击坐标:", e.lnglat.getLng() + "," + e.lnglat.getLat());
    this.markerList.forEach((element) => {
      element.label.setLabel(element.sContent1);
      element.label.setOffset(
        new T.Point(this.PointOffset1[0], this.PointOffset1[1])
      );
    });
  }
  //标注点 点击事件
  markerClick(item) {
    console.log("标注点击", item);
    // // this.selectedMarker = element;
    // // this.selectedMarker.label.setLabel("");
    this.markerList.forEach((element) => {
      element.label.setLabel(element.sContent1);
      element.label.setOffset(
        new T.Point(this.PointOffset1[0], this.PointOffset1[1])
      );
    });
    item.label.setLabel(item.sContent2);
    item.label.setOffset(
      new T.Point(this.PointOffset2[0], this.PointOffset2[1])
    );
  }
  urlTo(url) {
    window.open(url);
  }
  aHref(e, url) {
    e.preventDefault(); // 阻止默认行为
    let aHrefUnsafe = this.sanitizer.bypassSecurityTrustUrl(url);
    // console.log("aHrefUnsafe", aHrefUnsafe);
    window.location.href = url; // 执行链接的跳转行为
  }
  unitList1 = ["广西有限公司", "重庆有限公司", "柳州有限公司"];
  unitList2 = [
    "芯恩集成电路有限公司",
    "盛宏建材科技有限公司",
    "高凯斯电子有限公司",
    "君晟有限公司",
    "昀朗建筑工程有限公司",
    "必康有限公司",
  ];
  isConnectedUnit = false;
  handleChildData(e) {
    console.log(e);
    if (e === "openCardList") {
      this.isConnectedUnit = true;
    }
    if (e === "closeCardList") {
      this.isConnectedUnit = false;
    }
  }
}