fd_dwgz_zhyw_nx/src/views/economicsOperation/stationAnalyse/posAnalysis/components/leafletMap.vue

<template>
  <div class="mapCom">
    <div id="map"></div>
  </div>
</template>
<script>
// import httpRequest from "@/utils/request.js";
import httpRequest from "@/tools/request.js";
import { CanvasLabel } from "@panzhiyue/leaflet-canvaslabel";
import "./leaflet.canvas-markers.js";
export default {
  props: {
    ids: {
      type: Array,
      default: () => {
        return [];
      },
    },
    windList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      map: null,
      DefaultIcon1: null,
      layerGroup: [],
      layers: [],
      rightObj: {},
      areaLayer: null,
      tilsUrl: "./static/kMapTiles/{z}/{x}/{y}.jpg",
      ciLayer: null,
      viewCenterMap: {
        NX_FGS_HA_FDC_STA: {
          lng: 106.776222,
          lat: 37.469638,
        },
      },
    };
  },

  watch: {
    ids(val) {
      this.funStationPos(val);
      // this.funStationPosLabel(val)
    },
  },

  mounted() {
    this.initMap();
  },

  unmounted() {
    this.map.remove();
    this.map = null;
  },

  methods: {
    initMap() {
      // 矢量文本标签渲染器
      let canvasLabel = new L.CanvasLabel({
        collisionFlg: true,
        scale: 2,
      });
      this.map = L.map("map", {
        renderer: canvasLabel,
        // center: [40.02404009136253, 116.50641060224784], // 地图中心--北京
        // center: [38.44673272215545, 106.27624511718751], // 地图中心--银川
        // center: [108.953939, 34.266611], // 地图中心--陕西
        // center: [109.470962, 34.520632], // 地图中心--渭南
        zoom: 17, //缩放比列
        zoomControl: false, //禁用 + - 按钮
        doubleClickZoom: true, // 禁用双击放大
        attributionControl: false, // 移除右下角leaflet标识
        preferCanvas: true,
        contextmenu: true,
        contextmenuWidth: 140,
        // contextmenuItems: [{
        //         text: "功率曲线拟合分析",
        //         callback: this.powerLine,
        //     },
        //     {
        //         text: "对风偏差分析",
        //         callback: this.windAny,
        //     },
        //     {
        //         text: "曲线偏差率分析",
        //         callback: this.qxAny,
        //     },
        //     {
        //         text: "温度与功率分析",
        //         callback: this.wdyglAny,
        //     },
        //     {
        //         text: "损失电量分析",
        //         callback: this.ssdlAny,
        //     },
        //     {
        //         text: "桨距角分析",
        //         callback: this.jjjAny,
        //     },
        // ],
      });
      // let name = L.tileLayer(
      //   "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}"
      // ).addTo(this.map);

      let name = L.tileLayer(this.tilsUrl, {
        minZoom: 6,
        maxZoom: 17,
      }).addTo(this.map);

      // this.setAreaLayer("db", true);
      // this.setAreaLayer("jb", true);
      this.setAreaLayer("nx", true);
    },

    async funStationPos(ids) {
      let res = null;
      this.rightObj = {};
      if (ids.length > 0) {
        res = await httpRequest.get("/base/windturbine", {
          params: {
            wpids: this.ids.join(","),
          },
        });
      } else {
        // res = await httpRequest.get("/base/station", {
        //     params: {},
        // });
        tabStr = "station";
        let datas = await httpRequest.get(
          "/benchmarking/wpByCplist?companyids=NX_FGS&type=-1"
        );
        res = datas.data;
      }

      if (res.code === 200) {
        if (res.data && res.data.data && res.data.data.length) {
          // 清除现有的 layers
          this.layers.forEach((layer) => {
            this.map.removeLayer(layer);
          });
          this.layers = [];

          const viewCenter =
            this.viewCenterMap[res.data.data[0].windpowerstationId] || null;

          if (!this.ciLayer) {
            this.ciLayer = L.canvasIconLayer({}).addTo(this.map);
          } else {
            this.ciLayer.clearLayers();
          }

          //   let iconUrl = require(`@/assets/images/indexCom/run_Icon.gif`);
          let iconUrl = require(`@/assets/images/indexCom/fengji.png`);
          // const img = new Image();
          // img.src = require("@/assets/images/indexCom/run_Icon.gif");

          for (let i = 0; i < res.data.data.length; i++) {
            let item = res.data.data[i];

            let marker = L.marker(
              [Number(item.latitude), Number(item.longitude)],
              {
                icon: L.divIcon(
                  {
                    className: "iconSty",
                    iconUrl: iconUrl,
                    iconSize: [30, 39],
                    // iconAnchor: [15, 12.5],
                    iconAnchor: [15, 39],
                  }
                  // {
                  //   className: "currentMapIcon",
                  //   html: `<img src="${img.src}" style="width: 30px; height: 39px;">`,
                  //   iconSize: [30, 39],
                  //   iconAnchor: [15, 12.5],
                  // }
                ),
                data: item,
              }
            ).bindTooltip(
              `
        <div class="tip-box-top">
            <div class="item">${item.aname}</div>
            <div class="item">经度：${item.latitude}°</div>
            <div class="item">纬度：${item.longitude}°</div>
            <div class="item">海拔高度:${item.spare3}m</div>
        </div>`
            );

            let latlng = L.latLng(
              Number(item.latitude),
              Number(item.longitude)
            );

            let c1 = L.circleMarker(latlng, {
              radius: 5,
              color: "transparent",
              labelStyle: {
                text: item.aname,
                scale: 1.2,
                rotation: 0,
                offsetY: 20,
                fillStyle: "#fff",
                zIndex: i,
              },
              data: item,
            }).addTo(this.map);

            marker.on("tooltipopen", (e) => {
              this.rightObj = item;
            });

            marker.addTo(this.map);

            this.layers.push(c1);
            this.layers.push(marker);

            this.ciLayer.addLayer(marker);
          }

          const lineArray = [
            [
              // 35kV集电一线
              "1101~1102",
              "1103~1102",
              "1102~1104",
              "1104~1105",
              "1106~1107",
              "1107~1108",
              "1108~1109",
              "1109~1110",
              "1110~1111",
              "1111~1113",
              "1113~1112",
            ],
            [
              // 35kV集电二线
              "1201~1202",
              "1201~1203",
              "1203~1204",
              "1204~1205",
              "1205~1206",
              "1206~1207",
              "1207~1208",
              "1208~1209",
              "1209~1210",
              "1210~1211",
              "1211~1212",
            ],
            [
              // 35kV集电三线
              "2308~2307",
              "2307~2304",
              "2304~2303",
              "2303~2302",
              "2302~2301",
              "2301~2302",
              "2302~2303",
              "2303~2304",
              "2307~2309",
              "2309~2311",
              "2311~2312",
              "2312~2313",
              "2313~2312",
              "2312~2311",
              "2309~2310",
              "2310~2306",
              "2306~2305",
            ],
            [
              // 35kV集电四线
              "2412~2411",
              "2411~2410",
              "2411~2409",
              "2409~2408",
              "2408~2407",
              "2407~2402",
              "2402~2401",
              "2401~2402",
              "2407~2403",
              "2403~2404",
              "2404~2405",
              "2405~2406",
            ],
          ];
          const lineColor = ["red", "blue", "orange", "#FF7F50"];

          lineArray.forEach((pEle, pIndex) => {
            let latlngs = [];
            pEle.forEach((cEle) => {
              const points = cEle.split("~");
              const point1 =
                res.data.data.find((wt) => {
                  return wt.nemCode === points[0];
                }) || null;
              const point2 =
                res.data.data.find((wt) => {
                  return wt.nemCode === points[1];
                }) || null;
              if (point1 && point2) {
                latlngs.push([point1.latitude, point1.longitude]);
                latlngs.push([point2.latitude, point2.longitude]);
              }
            });
            // 创建Polyline对象，并添加到地图
            var polyline = L.polyline(latlngs, {
              color: lineColor[pIndex],
            }).addTo(this.map);

            // 可选：设置地图视图以确保这条线在视野内
            // map.fitBounds(polyline.getBounds());
          });

          let center = this.map.getCenter();
          this.map.panTo([center.lat, center.lng], {
            animate: true,
          });

          if (viewCenter) {
            this.map.setView(viewCenter, 13);
          } else if (this.layers.length > 0) {
            this.map.setView(this.layers[0].getLatLng(), 13);
          }
        }
      }
    },

    async funStationPosLabel(ids) {
      if (this.layers.length > 0) {
        for (var i = 0; i < this.layers.length; i++) {
          this.map.removeLayer(this.layers[i]);
        }
        this.layers = [];
      }
      let res = null;
      if (ids.length > 0) {
        res = await httpRequest.get("/base/location", {
          params: {
            ids: this.ids.join(","),
          },
        });
      } else {
        res = await httpRequest.get("/base/station", {
          params: {},
        });
      }
      if (res.code === 200) {
        if (res.data && res.data.length) {
          this.layers = [];
          const viewCenter =
            this.viewCenterMap[res.data[0].windpowerstationId] || null;
          for (let i = 0; i < res.data.length; i++) {
            let item = res.data[i];

            let latlng = L.latLng(
              Number(item.latitude),
              Number(item.longitude)
            );
            let c = L.circleMarker(latlng, {
              radius: 5,
              color: "#12e799",
              labelStyle: {
                text: item.aname,
                scale: 1,
                rotation: 0,
                offsetY: 15,
                fillStyle: "#000",
                zIndex: i,
              },
              data: item,
            })
              .bindTooltip(
                `
                                <div class="tip-box-top">
                                    <div class="item">${item.aname}</div>
                                    <div class="item">经度：${item.latitude}°</div>
                                    <div class="item">纬度：${item.longitude}°</div>
                                    <div class="item">海拔高度:${item.spare3}m</div>
                                </div>`
              )
              .addTo(this.map);
            this.layers.push(c);

            let that = this;
            c.on("mouseover", function onmouseover(e) {
              that.rightObj = item;
            });
          }
          let center = this.map.getCenter();
          this.map.panTo([center.lat, center.lng], {
            animate: true,
          });
          this.map.setView(viewCenter || this.layers[0].getLatLng(), 13);
        }
      }
    },

    setAreaLayer(jsonName, isBounds) {
      const wfAllGeoJson = require(`@/assets/${jsonName}.json`);
      this.areaLayer = L.geoJSON(wfAllGeoJson, {
        style: (feature) => {
          return {
            fillOpacity: 0.1,
            fillColor: "rgb(27, 242, 245)",
            weight: 2,
            color: "rgb(27, 242, 245)",
          };
        },
      });
      this.map.addLayer(this.areaLayer);
      if (isBounds) {
        this.map.fitBounds(this.areaLayer.getBounds());
      }
    },

    powerLine(e) {
      if (!this.rightObj.latitude && !this.rightObj.longitude) {
        this.$message({
          message: "该坐标系下暂无功率曲线拟合",
          type: "error",
        });
      } else {
        this.layers.forEach((item, index) => {
          if (item.options.data) {
            if (item.options.data.name.indexOf("风电场") === -1) {
              if (
                item.options.data.latitude === this.rightObj.latitude &&
                item.options.data.longitude === this.rightObj.longitude
              ) {
                this.$emit("rightClick", {
                  menuIndex: 0,
                  current: this.rightObj,
                });
              }
            } else {
              if (item.options.data.name === this.rightObj.name) {
                this.$message({
                  message: "风场暂无功率曲线拟合功能",
                  type: "error",
                });
              }
            }
          }
        });
      }
    },

    windAny(e) {
      if (!this.rightObj.latitude && !this.rightObj.longitude) {
        this.$message({
          message: "该坐标系下暂无对风偏差分析",
          type: "error",
        });
      } else {
        this.layers.forEach((item) => {
          if (item.options.data) {
            if (item.options.data.name.indexOf("风电场") === -1) {
              if (
                item.options.data.latitude === this.rightObj.latitude &&
                item.options.data.longitude === this.rightObj.longitude
              ) {
                this.$emit("rightClick", {
                  menuIndex: 1,
                  current: this.rightObj,
                });
              }
            } else {
              if (item.options.data.name === this.rightObj.name) {
                this.$message({
                  message: "风场暂无对风偏差分析功能",
                  type: "error",
                });
              }
            }
          }
        });
      }
    },

    qxAny(e) {
      if (!this.rightObj.latitude && !this.rightObj.longitude) {
        this.$message({
          message: "该坐标系下暂无曲线偏差分析",
          type: "error",
        });
      } else {
        this.layers.forEach((item) => {
          if (item.options.data) {
            if (item.options.data.name.indexOf("风电场") === -1) {
              if (
                item.options.data.latitude === this.rightObj.latitude &&
                item.options.data.longitude === this.rightObj.longitude
              ) {
                this.$emit("rightClick", {
                  menuIndex: 2,
                  current: this.rightObj,
                });
              }
            } else {
              if (item.options.data.name === this.rightObj.name) {
                this.$message({
                  message: "风场暂无曲线偏差分析功能",
                  type: "error",
                });
              }
            }
          }
        });
      }
    },

    wdyglAny(e) {
      if (!this.rightObj.latitude && !this.rightObj.longitude) {
        this.$message({
          message: "该坐标系下暂无温度与功率分析",
          type: "error",
        });
      } else {
        this.layers.forEach((item) => {
          if (item.options.data) {
            if (item.options.data.name.indexOf("风电场") === -1) {
              if (
                item.options.data.latitude === this.rightObj.latitude &&
                item.options.data.longitude === this.rightObj.longitude
              ) {
                this.$emit("rightClick", {
                  menuIndex: 3,
                  current: this.rightObj,
                });
              }
            } else {
              if (item.options.data.name === this.rightObj.name) {
                this.$message({
                  message: "风场暂无温度与功率分析功能",
                  type: "error",
                });
              }
            }
          }
        });
      }
    },

    ssdlAny(e) {
      if (!this.rightObj.latitude && !this.rightObj.longitude) {
        this.$message({
          message: "该坐标系下暂无损失电量分析",
          type: "error",
        });
      } else {
        this.layers.forEach((item) => {
          if (item.options.data) {
            if (item.options.data.name.indexOf("风电场") === -1) {
              if (
                item.options.data.latitude === this.rightObj.latitude &&
                item.options.data.longitude === this.rightObj.longitude
              ) {
                this.$emit("rightClick", {
                  menuIndex: 4,
                  current: this.rightObj,
                });
              }
            } else {
              if (item.options.data.name === this.rightObj.name) {
                this.$message({
                  message: "风场暂无损失电量分析功能",
                  type: "error",
                });
              }
            }
          }
        });
      }
    },

    jjjAny(e) {
      if (!this.rightObj.latitude && !this.rightObj.longitude) {
        this.$message({
          message: "该坐标系下暂无桨距角分析",
          type: "error",
        });
      } else {
        this.layers.forEach((item) => {
          if (item.options.data) {
            if (item.options.data.name.indexOf("风电场") === -1) {
              if (
                item.options.data.latitude === this.rightObj.latitude &&
                item.options.data.longitude === this.rightObj.longitude
              ) {
                this.$emit("rightClick", {
                  menuIndex: 5,
                  current: this.rightObj,
                });
              }
            } else {
              if (item.options.data.name === this.rightObj.name) {
                this.$message({
                  message: "风场暂无桨距角分析功能",
                  type: "error",
                });
              }
            }
          }
        });
      }
    },
  },
};
</script>
<style scoped lang="less">
.mapCom {
  height: 100%;

  .iconLabel {
    width: 80px !important;
  }

  .iconSty {
    .iconStyClass {
      width: 50px;
      height: 100px;
      position: relative;
      top: 40px;
    }
  }
}

#map {
  width: 100%;
  height: 100%;
}

.lmap-image {
  width: 32px;
  height: 32px;
}

.lmap-span {
  display: inline-block;
  margin-left: 5px;
  padding: 5px;
  font-weight: bold;
  line-height: 20px;
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
}

.lmap-text {
  display: inline-block;
  margin-left: 5px;
  padding: 5px;
  font-weight: bold;
  line-height: 20px;
  font-size: 16px;
  color: #fff;
  width: 500px;
  white-space: nowrap;
  position: absolute;
  text-align: center;
  top: 25px;
  left: -250px;
}
</style>
<style lang="less">
.mapCom {
  .currentMapIcon {
    img {
      position: absolute;
      z-index: 1000;
    }
  }
}
</style>