vue + SuperMap iClient（Leaflet）实

接这篇文章
本文引入Leaflet.Editable，在此基础上对点线面进行编辑
借鉴文章
官方demo

首先安装依赖

cnpm install leaflet-editable --save

引入js文件，附代码：

<template>
  <div class="map">
    <div id="mapView"></div>
    <div id="tooltip"></div>
    <div class="tools-box">
      <span
        class="tools-item iconfont icon-dingwei"
        :class="[idx == 1 ? 'tools-item-active' : '']"
        @click="change(1)"
        >标点</span
      >

      <el-divider direction="vertical"></el-divider>
      <span
        class="tools-item iconfont icon-segment"
        :class="[idx == 2 ? 'tools-item-active' : '']"
        @click="change(2)"
        >画线</span
      >

      <el-divider direction="vertical"></el-divider>
      <span
        class="tools-item iconfont icon-mian"
        :class="[idx == 3 ? 'tools-item-active' : '']"
        @click="change(3)"
        >画面</span
      >
    </div>

    <div class="sub-tools-box" v-show="showTools">
      <span
        v-show="idx == 2 || idx == 3"
        class="sub-tools-item iconfont icon-chexiao"
        @click="back"
        >撤销</span
      >
      <span
        v-show="idx == 2 || idx == 3"
        class="sub-tools-item iconfont icon-huifu"
        @click="next"
        >恢复</span
      >
      <span class="sub-tools-item iconfont icon-V1">取消</span>
      <span class="sub-tools-item iconfont icon-V">保存</span>
    </div>
  </div>
</template>

<script>
import {
  mapUrl,
  mapAddressUrl,
  mapIconUrl,
  mapShadowUrl,
} from "@/utils/commonUrl.js";
import L from "leaflet";

import "../../../node_modules/leaflet-editable/src/Leaflet.Editable.js";
var map,
  addressMatchService = L.supermap.addressMatchService(mapAddressUrl);

var iconMarker = new L.Icon({
  iconUrl: mapIconUrl,
  shadowUrl: mapShadowUrl,
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41],
});
let marker = null;

let polyline = null;
let polygon = null;

let tooltip = null;
let redoBuffer = [];
export default {
  props: {
    center: {
      type: Object,
      default: () => {
        return {};
      },
    },
    lnglat: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },

  data() {
    return {
      cx: "",
      cy: "",
      x: "",
      y: "",
      idx: "",
      port: false,
      line: false,
      surface: false,
      lineArrs: [],
      surfaceArrs: [],
      showTools: false,
    };
  },
  mounted() {
    if (this.center.x && this.center.y) {
      this.cx = this.center.x;
      this.cy = this.center.y;
    }
    this.addMap();
  },
  methods: {
    change(idx) {
      this.idx = idx;
      this.resetBtn();
      this.showTools = true;
      if (map.editTools.drawing()) {
        map.editTools.stopDrawing();
      }
      if (idx == 1) {
        if (polyline && polyline.getLatLngs().length > 0) {
          polyline.disableEdit();
        }

        if (polygon && polygon.getLatLngs()[0].length > 0) {
          polygon.disableEdit();
        }
        this.port = true;
      } else if (idx == 2) {
        this.line = true;

        this.LineFun(this);
      } else if (idx == 3) {
        this.surface = true;
        this.SurfaceFun(this);
      }
    },

    back() {
      let latlng = null;
      if (!map.editTools._drawingEditor) return;
      latlng = map.editTools._drawingEditor.pop();
      if (latlng) redoBuffer.push(latlng);
    },
    next() {
      if (!map.editTools._drawingEditor) return;
      if (redoBuffer.length)
        map.editTools._drawingEditor.push(redoBuffer.pop());
    },

    // 重置
    resetBtn() {
      this.port = false;
      this.line = false;
      this.surface = false;
    },
    addMap() {
      let _this = this;
      let centX = this.cx ? this.cx : "116.383572",
        centY = this.cy ? this.cy : "39.914714";
      tooltip = L.DomUtil.get("tooltip");
      console.log(mapUrl);
      if (!map) {
        map = L.map("mapView", {
          crs: L.CRS.EPSG4326,
          center: [centY, centX],
          maxZoom: 18,
          zoom: 11,

          editable: true,
        });
        L.supermap.tiledMapLayer(mapUrl).addTo(map);
      }

      // console.log(marker);
      if (marker) {
        // 如果有marker,则移除
        map.removeLayer(marker);
      }

      // 如果传入经纬度  将这个点展示到地图上
      if (this.x && this.y) {
        marker = L.marker([this.y, this.x], {
          icon: iconMarker,
          draggable: false,
        });

        map.addLayer(marker);
      }

      // 地图点击事件
      this.mapClick(_this);

      // map.editTools.on("editable:drawing:commit", (e) => {
      //   if (this.idx == "2" || this.currentTool == "3") {
      //     e.layer.disableEdit();
      //     e.layer.created = true;
      //     // this.currentTool = "Select";
      //     this.edited = true;
      //   }
      // });

      // map.editTools.on("editable:editing", (e) => {
      //   e.layer.updated = true;
      //   this.edited = true;
      // });

      // map.on("editable:drawing:start", this.addTooltip);
      // map.on("editable:drawing:end", this.removeTooltip);
      // map.on("editable:drawing:click", this.updateTooltip);

      map.on("editable:drawing:end", function () {
        redoBuffer = [];
      });
    },

    addTooltip(e) {
      L.DomEvent.on(document, "mousemove", this.moveTooltip);
      tooltip.innerHTML = "鼠标点击开始画线";
      tooltip.style.display = "block";
    },

    removeTooltip(e) {
      tooltip.innerHTML = "";
      tooltip.style.display = "none";
      L.DomEvent.off(document, "mousemove", this.moveTooltip);
    },

    moveTooltip(e) {
      tooltip.style.left = e.clientX + 20 + "px";
      tooltip.style.top = e.clientY - 10 + "px";
    },
    updateTooltip(e) {
      if (e.layer.editor._drawnLatLngs.length < e.layer.editor.MIN_VERTEX) {
        tooltip.innerHTML = "鼠标点击开始画线";
      } else {
        tooltip.innerHTML = "Click on last point to finish line.";
      }
    },

    // 点击地图
    mapClick(_this) {
      map.on("click", function (evt) {
        //   标点操作
        _this.PortFun(_this, evt);
      });
    },

    // 标点
    PortFun(_this, evt) {
      let { lat, lng } = evt.latlng;
      if (_this.port) {
        // _this.getAddr(_this, lng, lat);
        if (marker) {
          // 如果有marker,则移除
          map.removeLayer(marker);
        }
        marker = L.marker([lat, lng], {
          icon: iconMarker,
          draggable: false, // true, 拖动
        });

        map.addLayer(marker);
      }
    },
    // 画线
    LineFun(_this) {
      if (polygon && polygon.getLatLngs()[0].length > 0) {
        polygon.disableEdit();
      }
      if (polyline && polyline.getLatLngs().length > 0) {
        polyline.toggleEdit();
      } else {
        polyline = map.editTools.startPolyline();
      }
      polyline.on("dblclick", (event) => {
        if (_this.line) {
          this.editable && polyline.toggleEdit();
        }
      });
    },
    // 画面
    SurfaceFun(_this) {
      if (polyline && polyline.getLatLngs().length > 0) {
        polyline.disableEdit();
      }

      let flag = false;
      if (polygon) {
        if (polygon.getLatLngs()[0].length > 0) {
          flag = true;
        } else {
          flag = false;
        }
      } else {
        flag = false;
      }

      if (flag) {
        polygon.toggleEdit();
      } else {
        polygon = map.editTools.startPolygon();
      }

      polygon.on("dblclick", (event) => {
        if (_this.surface) {
          this.editable && polygon.toggleEdit();
        }
      });
    },

    // 设置中心点
    setCenter(x, y) {
      if (map) {
        if (x && y) {
          map.panTo([y, x]);
        }
        // map.panTo([39.94922339916229, 116.44498035706478]);
      }
    },

    // 获取经纬度 解析地址
    getAddr(_this, lng, lat) {
      var geoDecodeParam = new SuperMap.GeoDecodingParameter({
        filters: "",
        fromIndex: "0",
        geoDecodingRadius: "-1",
        maxReturn: "-1",
        prjCoordSys: "{epsgcode:4326}",
        toIndex: "10",
        x: lng,
        y: lat,
      });
      addressMatchService.decode(geoDecodeParam, function (result) {
        // console.log(result);
        if (result.result.length > 0) {
          // console.log(result.result[0]);
          let obj = {
            centerx: lng,
            centery: lat,
            position: result.result[0].address,
          };

          //   console.log(obj);
          _this.$emit("getAddr", obj);
        } else {
          _this.$message({
            message: "未解析出地址，请重新选择",
            type: "warning",
          });
        }
        // map.setView(L.latLng(39.914714, 116.383572), 10);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.map {
  position: relative;
  #mapView {
    width: 100%;
    height: 500px;
  }

  #tooltip {
    display: none;
    position: absolute;
    background: #666;
    color: white;
    opacity: 0.5;
    padding: 10px;
    border: 1px dashed #999;
    font-family: sans-serif;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    z-index: 1000;
  }
  .tools-box {
    position: absolute;
    right: 45px;
    top: 20px;
    z-index: 1000;
    background: #fff;
    box-shadow: 3px 3px 8px #ccc;

    padding: 0 10px;
    border-radius: 5px;
    line-height: 35px;

    .tools-item {
      cursor: pointer;
      color: #5f6477;
    }

    .tools-item-active {
      color: #108ee9;
    }
  }

  .sub-tools-box {
    position: absolute;
    top: 60px;
    overflow: hidden;
    min-height: 34px;
    right: 10px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 3px 3px 8px #ccc;
    z-index: 1000;
    background: #fff;
    padding: 0 12px;
    color: #5f6477;

    .sub-tools-item {
      line-height: 46px;
      margin-right: 5px;
      cursor: pointer;
    }
  }
}
</style>