import { Component, OnInit } from "@angular/core";
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() {}

  ngOnInit(): void {
    this.initMap();
    this.initEcharts();
  }

  echartleft1;
  echartleft1Data = [
    { value: 1312, name: "综合应急预案" },
    { value: 1583, name: "专项应急预案" },
    { value: 1235, name: "现场处置方案" },
    { value: 1852, name: "应急处置卡" },
    { value: 1735, name: "应急预案" },
    { value: 1258, name: "类型预案" },
    { value: 600, name: "I-V级预案" },
  ];
  echartleft1Option = {
    tooltip: {
      trigger: "item",
    },
    title: {
      text: "9,333",
      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: 3523, name: "综合演练" },
    { value: 2560, name: "跨区域演练" },
    { value: 853, name: "单项演练" },
    { value: 1237, name: "研究性演练" },
  ];
  echartleft2Option = {
    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.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: "9,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);
  }

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

  map;
  zoom = 5;

  markerList = [
    { marker: null, coordinate: [98.56934, 38.93555] },
    { marker: null, coordinate: [97.0752, 32.95898] },
    { marker: null, coordinate: [103.88672, 22.89551] },
    { marker: null, coordinate: [108.41309, 29.79492] },
  ];
  initMap() {
    this.map = new T.Map("mapDiv", {
      projection: "EPSG:4326",
    });
    this.map.centerAndZoom(new T.LngLat(107.79785, 35.77148), 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);

      let sContent =
        "<div class='markerInfoWin'><div class='icon icon1'><img src='../../../assets/gismap/gis/1.png' alt=''></div><div class='num'> 36 </div><div class='icon icon2'><img src='../../../assets/gismap/gis/2.png' alt=''></div><div class='num'> 36 </div><div class='icon icon3'><img src='../../../assets/gismap/gis/3.png' alt=''></div><div class='num'> 36 </div><div class='icon icon4'><img src='../../../assets/gismap/gis/4.png' alt=''></div><div class='num'> 36 </div></div>";
      // infoWin1.setContent(sContent);
      // let infoWin1 = new T.InfoWindow(sContent, {
      //   closeButton: false,
      // });
      // element.marker.openInfoWindow(infoWin1);s
      let label = new T.Label({
        text: sContent,
        position: element.marker.getLngLat(),
        offset: new T.Point(-28, -65),
      });
      this.map.addOverLay(label);
    });
    this.map.addEventListener("click", (e) => {
      this.MapClick(e);
    });
  }
  //地图点击事件
  MapClick(e) {
    console.log("点击坐标:", e.lnglat.getLng() + "," + e.lnglat.getLat());
  }
}