vue + SuperMap iClient（Leaflet）实

参考文档
封装代码如下：

<template>
  <div class="map">
    <div id="mapView"></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>
</template>

<script>
import {
  mapUrl,
  mapAddressUrl,
  mapIconUrl,
  mapShadowUrl,
} from "@/utils/commonUrl.js";
import L from "leaflet";
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;
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: [],
    };
  },
  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();
      if (idx == 1) {
        this.port = true;
      } else if (idx == 2) {
        this.line = true;
      } else if (idx == 3) {
        this.surface = true;
      }
    },
    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";
      console.log(mapUrl);
      if (!map) {
        map = L.map("mapView", {
          crs: L.CRS.EPSG4326,
          center: [centY, centX],
          maxZoom: 18,
          zoom: 11,
        });
        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);
    },

    // 点击地图
    mapClick(_this) {
      map.on("click", function (evt) {
        // console.log(evt);

        //   标点操作
        _this.PortFun(_this, evt);

        // 画线操作

        _this.LineFun(_this, evt);

        // 画面操作
        _this.SurfaceFun(_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);
        //   _this.markerDrag(_this);
      }
    },
    // 画线
    LineFun(_this, evt) {
      let { lat, lng } = evt.latlng;
      if (_this.line) {
        _this.lineArrs.push([lat, lng]);
        if (!polyline) {
          polyline = L.polyline(_this.lineArrs, {
            color: "red",
            noClip: false,
          }).addTo(map);
        } else {
          polyline.addLatLng(evt.latlng);
        }
      }
    },
    // 画面
    SurfaceFun(_this, evt) {
      let { lat, lng } = evt.latlng;
      if (_this.surface) {
        _this.surfaceArrs.push([lat, lng]);
        if (!polygon) {
          polygon = L.polygon(_this.surfaceArrs, { color: "yellow" }).addTo(
            map
          );
        } else {
          polygon.addLatLng(evt.latlng);
        }
      }
    },

    // 拖动点
    markerDrag(_this) {
      marker.on("dragend", function (e) {
        // console.log(e);
        // console.log(marker.getLatLng());
        let lat = marker.getLatLng().lat; //{lat: 39.943885803222656, lng: 116.35001285665902}
        let lng = marker.getLatLng().lng;

        // 解析经纬度地址
        // _this.getAddr(_this, lng, lat);
      });
    },

    // 设置中心点
    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;
  }
  .tools-box {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 999999999999999999;
    background: #fff;
    box-shadow: 3px 3px 8px #ccc;

    padding: 10px 20px;
    border-radius: 5px;

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

    .tools-item-active {
      color: #409eff;
    }
  }
}
</style>

commonUrl.js

let urlPrefix = 'https://iserver.supermap.io';
export const mapUrl = urlPrefix + '/iserver/services/map-china400/rest/maps/China_4326';
export const mapAddressUrl = urlPrefix + "/iserver/services/addressmatch-Address/restjsr/v1/address";
export const mapIconUrl = "https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/images/marker-icon.png";
export const mapShadowUrl = "https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png";