记录 基于vue2 leaflet和supermap 卷帘地图功能 和封装标注点的自定义弹框功能

引入leaflet 插件 在根目录public中 html里面引入

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
    integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
    integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>

地图容器

<template>
  <div>
    <div id="map"></div>
  </div>
</template>

功能实现

<script>
import "@supermap/iclient-leaflet"; //supermap 依赖引入
import "leaflet-side-by-side";  // 地图遮掩插件
import "leaflet-draw"; // 地图拖拽插件
import popupContent from "./popup-content.vue"; //自定义弹框组件
export default {
  components: {
    popupContent,
  },
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = L.map("map", {
        center: [114.76566, 23.82691],
        zoomControl: true,
      }).setView([23.82639, 114.76489], 17);
      //底图图层
      var osmLayer = L.tileLayer(
        "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        {
          maxZoom: 21,
          maxNativeZoom: 21,
          attribution:
            '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        }
      );
      osmLayer.addTo(this.map);

      var wmts = new L.supermap.WMTSLayer(
        "自己的wmts栅格底图地址",
        {
          layer: "World_Imagery", // 对应底图的类型
          style: "default",
        }
      ).addTo(this.map);

      //wms 服务
      var wmsLayer = new L.TileLayer.WMS(
        "自己的wms栅格底图地址",
        {
          maxZoom: 21,
          maxNativeZoom: 21,
          layers: "xt:xtzzf", // 对应底图的类型
          format: "image/png",
          transparent: true,
          noWrap: false,
          attribution:
            "Map Data <span>© <a href='luojingsheng.cn' target='_blank'>Wxt</a></span>",
        }
      );
      wmsLayer.addTo(this.map);

      var wmsLayer1 = new L.TileLayer.WMS(
        "自己的wms栅格底图地址",
        {
          maxZoom: 21,
          maxNativeZoom: 21,
          layers: "xt:jmmap",
          format: "image/png",
          transparent: true,
          noWrap: false,
          attribution:
            "Map Data <span>© <a href='luojingsheng.cn' target='_blank'>Wxt</a></span>",
        }
      );
      wmsLayer1.addTo(this.map);
      // 卷帘
      this.sideBySide(wmsLayer, [wmts, wmsLayer1]);
      // 拖拽
      this.leafletDarw();
      // 标注点
      this.setMaker();
    },
    // 卷帘插件
    sideBySide(left, right) {
        //left, righ 左右两边的对应底图图层(遮掩功能)
      L.control.sideBySide(left, right).addTo(this.map);
    },

    // Leaflet.draw 拖拽插件
    leafletDarw() {
      var editableLayers = new L.FeatureGroup();
      this.map.addLayer(editableLayers);
      var options = {
        position: "topleft",
        draw: {
          polyline: {},
          polygon: {},
          circle: {},
          rectangle: {},
          marker: {},
          remove: {},
        },
        edit: {
          featureGroup: editableLayers,
          remove: true,
        },
      };
      var drawControl = new L.Control.Draw(options);
      this.map.addControl(drawControl);
      this.handleMapEvent(drawControl._container, this.map);
      this.map.on(L.Draw.Event.CREATED, function (e) {
        var type = e.layerType,
          layer = e.layer;
        if (type === "marker") {
          layer.bindPopup("A popup!");
        }
        editableLayers.addLayer(layer);
      });
    },

    handleMapEvent(div, map) {
      if (!div || !map) {
        return;
      }
      div.addEventListener("mouseover", function () {
        map.scrollWheelZoom.disable();
        map.doubleClickZoom.disable();
      });
      div.addEventListener("mouseout", function () {
        map.scrollWheelZoom.enable();
        map.doubleClickZoom.enable();
      });
    },
    // 创建标记点
    setMaker() {
      let _this = this;
      L.marker([23.82639, 114.76209])
        .addTo(this.map)
        .on("click", function (e) {
          //自定义弹框
          console.log("标记点击事件");
          // 创建一个容器即每个弹框需要唯一的id
          let template = document.createElement(`div`);
          template.id = "mapDialog_container_1"; // 唯一id（关键）
          L.popup({ minWidth: 330, closeButton: false })
            .setLatLng([23.82639, 114.76209])
            .setContent(template)
            .openOn(_this.map);
          // 将Profile实例挂载到容器上
          let el = new _this.$Profile({
            propsData: { componentData: {} },
          }).$mount();
          template.appendChild(el.$el);
        }); //添加marker来设置点击事件
    },
  },
};
</script>