<template>
  <div class="leaflet-map-container">
    <div id="leaflet-map"></div>
    <slot name="select"></slot>
  </div>
</template>

<script>
import L from "leaflet";

import "@/utils/leaflet.polygon.gradient.js";
import "@/utils/leaflet-rotate/leaflet-rotate-src.js";
import "@/utils/leaflet.rotatedMarker.js";

// 社区
import loujiangjiedaoshequ from "@/assets/data/shequ.json"; //娄江社区
// 社区名称
import shequName from "@/assets/data/shequ-name.json";
// 街道
import loujiangjiedao from "@/assets/data/loujiangjiedao.json"; //娄东街道
import loujiangjiedaoMove from "@/assets/data/loujiangjiedao-move.json"; //娄东街道

import xiaoqu from "@/assets/data/小区.json";

export default {
  data() {
    return {
      townCenter: [31.4865100338683, 121.11104941651722],
      mapRotate: 0, //地图旋转角度
      mapLayers: {
        mapLayer1: null,
        mapLayer2: null,
        mapLayer3: null,
        mapLayer4: null,
        mapLayer5: null,
      },
      globalMap: null,
      markerXiaoqu: null,
      markerShequ: null,
    };
  },
  mounted() {
    this.initMapData();
  },
  methods: {
    initMapData() {
      this.globalMap = L.map("leaflet-map", {
        center: this.townCenter, // 地图中心[纬度，经度]
        zoom: 13, // 地图层级
        maxZoom: 16,
        minZoom: 13,
        zoomControl: false, // 放大缩小按钮
        attributionControl: false, // 右下角leaflet图标
        rotate: true,
        bearing: this.mapRotate,
      });
      var rotatePane = this.globalMap.getPane("rotatePane"); //需要旋转的图层容器
      var noRotatePane = this.globalMap.getPane("norotatePane"); //不需要旋转的图层容器

      // 街道面
      this.globalMap.createPane("mapLayer1", rotatePane);
      this.globalMap.getPane("mapLayer1").style.zIndex = 501;
      this.globalMap.getPane("mapLayer1").style.pointerEvents = "none";

      // 社区面
      this.globalMap.createPane("mapLayer2", rotatePane);
      this.globalMap.getPane("mapLayer2").style.zIndex = 504;
      this.globalMap.getPane("mapLayer2").style.pointerEvents = "none";

      // 小区面
      this.globalMap.createPane("mapLayer3", rotatePane);
      this.globalMap.getPane("mapLayer3").style.zIndex = 505;
      this.globalMap.getPane("mapLayer3").style.pointerEvents = "none";

      // 小区名字
      this.globalMap.createPane("mapLayer4", noRotatePane);
      this.globalMap.getPane("mapLayer4").style.zIndex = 703;
      this.globalMap.getPane("mapLayer4").style.pointerEvents = "none";

      // 社区名字
      this.globalMap.createPane("mapLayer5", noRotatePane);
      this.globalMap.getPane("mapLayer5").style.zIndex = 702;
      this.globalMap.getPane("mapLayer5").style.pointerEvents = "none";

      this.mapLayers.mapLayer1 = L.featureGroup().addTo(this.globalMap);
      this.mapLayers.mapLayer2 = L.featureGroup().addTo(this.globalMap);
      this.mapLayers.mapLayer3 = L.featureGroup().addTo(this.globalMap);
      this.mapLayers.mapLayer4 = L.featureGroup().addTo(this.globalMap);
      this.mapLayers.mapLayer5 = L.featureGroup().addTo(this.globalMap);

      // 渲染街道
      this.addStreet();
      //社区
      this.addShequ();
      //小区
      this.addXiaoqu();

      this.globalMap.on("zoomend", (e) => {
        let zoom = e.target._zoom;
        if (zoom >= 15) {
          // this.mapLayers.mapLayer3.setStyle({ opacity: 1, fillOpacity: 0.2 });
          // this.markerXiaoqu.setOpacity(1);
        }
      });
    },

    addStreet() {
      //阴影
      L.geoJSON(loujiangjiedaoMove, {
        pane: "mapLayer1",
        style: function (feature) {
          return {
            color: "#31A8C0",
            weight: 1,
            fillColor: "#001530",
            fillOpacity: 1,
          };
        },
      }).addTo(this.mapLayers.mapLayer1);
      L.geoJSON(loujiangjiedao, {
        pane: "mapLayer1",
        style: function (feature) {
          return {
            color: "#31A8C0",
            weight: 1,
            fillColor:
              "linearGradient(60deg, #057BEB 40%, #18A7FC 80%, #057BEB 100%)",
            fillOpacity: 1,
          };
        },
      }).addTo(this.mapLayers.mapLayer1);
    },

    addShequ() {
      let geojsons = L.geoJSON(loujiangjiedaoshequ, {
        pane: "mapLayer2",
        style: function (feature) {
          return {
            color: "#6ED2FB",
            weight: 2,
            fillColor: "#19A8FA",
            fillOpacity: 0,
          };
        },
      }).addTo(this.mapLayers.mapLayer2);
      let bounds = geojsons.getBounds();
      this.globalMap.fitBounds(bounds);
      // 社区名称
      L.geoJSON(shequName, {
        pointToLayer: (feature) => {
          var myIcon = L.divIcon({
            className: "region-name4",
            html: feature.properties.TextString,
            iconSize: [80, 20],
            iconAnchor: [40, 10],
          });
          return L.marker(
            L.latLng(
              feature.geometry.coordinates[1],
              feature.geometry.coordinates[0]
            ),
            {
              pane: "mapLayer5",
              icon: myIcon,
              rotationAngle: 0,
              rotationOrigin: "left center",
            }
          );
        },
        style: {
          opacity: 0,
        },
      }).addTo(this.mapLayers.mapLayer5);
    },
    addXiaoqu() {
      L.geoJSON(xiaoqu, {
        pane: "mapLayer3",
        style: function (feature) {
          let id = feature.properties.Id;
          /* 没有人口数据面给灰色 */
          if (id == 254 || id == 257 || id == 260) {
            return {
              color: "#545454",
              weight: 5,
              fillColor: "#545454",
              fillOpacity: 0.5,
            };
          } else {
            return {
              color: "#ffeb3b",
              weight: 5,
              fillColor: "#ffeb3b",
              fillOpacity: 0.2,
            };
          }
        },
        onEachFeature: (feature, layer) => {
          let bounds = layer._bounds;
          let center = bounds.getCenter();
          let text = feature.properties.name;
          let html = text;
          let myIcon = L.divIcon({
            className: "land-name",
            html: html,
            iconSize: [150, 24],
            iconAnchor: [75, 12],
          });
          //   多边形上的标记点;
          let marker = L.marker(center, {
            pane: "mapLayer3",
            properties: feature.properties,
            icon: myIcon,
          });

          marker.addTo(this.mapLayers.mapLayer3);
        },
      }).addTo(this.mapLayers.mapLayer3);
    },
  },
};
</script>

<style>
.leaflet-map-container {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 5;
}
#leaflet-map {
  height: 100%;
  width: 100%;
}
.leaflet-container {
  background: transparent !important;
}
</style>
