windLifecontrolPro/src/views/generatingCapacity/dataAnalysis/posAnalysis/components/leafletMap.vue

<template>
  <div class="mapCom">
    <div id="map"></div>
  </div>
</template>
<script>
import httpRequest from "@/utils/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/newKMapTiles/{z}/{x}/{y}.jpg",
      ciLayer: null,
      viewCenterMap: {
        GJNY_SXGS_ZZ_FDC_STA: { lng: 107.86058, lat: 37.37861 },
        GJNY_SXGS_JSL_FDC_STA: { lng: 108.51853, lat: 37.45717 },
        GJNY_SXGS_XZ_FDC_STA: { lng: 107.9109, lat: 37.46585 },
        GJNY_SXGS_FSG_FDC_STA: { lng: 107.85678, lat: 37.41682 },
        GJNY_SXGS_CSL_FDC_STA: { lng: 108.2031, lat: 37.2811 },
        GJNY_SXGS_LJS_FDC_STA: { lng: 108.39083, lat: 37.485 },
      },
    };
  },

  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: 16, //缩放比列
        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: 1,
        maxZoom: 16,
      }).addTo(this.map);

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

    async funStationPos(ids) {
      let res = null;
      this.rightObj = {};
      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) {
          // 清除现有的 layers
          this.layers.forEach((layer) => {
            this.map.removeLayer(layer);
          });
          this.layers = [];

          const viewCenter =
            this.viewCenterMap[res.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`);
          // const img = new Image();
          // img.src = require("@/assets/images/indexCom/run_Icon.gif");

          for (let i = 0; i < res.data.length; i++) {
            let item = res.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],
                  }
                  // {
                  //   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.altitude}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: 35,
                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);
          }

          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.altitude}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>