Project_yhfu/src/components/supermap.vue

<template>
  <div v-bind:id="mapDivId" ref="map" style="width: 100%; height: 100%;background: none;"></div>
</template>

<script>
  import 'leaflet-side-by-side'
  import '@supermap/iclient-leaflet'
  import 'leaflet/dist/leaflet.css'
  import 'leaflet.markercluster/dist/leaflet.markercluster-src.js';
  import 'leaflet.markercluster/dist/MarkerCluster.css';
  import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
  import 'leaflet-draw';
  import 'leaflet-draw/dist/leaflet.draw.css'

  import L from 'leaflet'

  import {getSuperMap, iconList} from '@/api/components/supermap.js'
  // import {setToken} from '../plugins/auth'


  export default {
    name: "sookaSuperMap",
    data() {
      return {
        mapDivId: "",
        map: null,
        layers: [],
        isAggregationLayers: [],
        radiusLayers: [],
        myGroup: [],
        isAggregationMyGroup: [],
        polygon: null,
        connectLayer: [],
        graphicsLayer: [],
        latLngLayers: [],
        latLngGroup: [],
        editableLayers: [],
      }
    },
    mounted() {
      this.initMap();
    },
    props: {
      mapDiv: null,
      codes: null,
      mapSite: {},
      isSideBySide: null,
      showLatLng: null,
      isEditableLayers: null,
    },
    methods: {
      clearM: async function (isAggregation) {//清理地图标点
        if (isAggregation) {
          if (this.isAggregationMyGroup != undefined && this.isAggregationMyGroup != false) {
            this.isAggregationMyGroup.clearLayers()
          }
          this.map.removeLayer(this.isAggregationLayers);
          this.isAggregationLayers = [];
          this.radiusLayers = [];
          this.isAggregationLayers = window.L.markerClusterGroup({
            //设置为true时显示聚类所占据的范围
            showCoverageOnHover: true,
            //设置为true时会向低一级聚类缩放
            zoomToBoundsOnClick: true,
            //增加点位时增加聚合动画（否则会出问题）
            animateAddingMarkers: true,
            //最大缩放级别点击聚合图标展开图标
            spiderfyOnMaxZoom:true,
          });

        } else {
          if (this.myGroup != undefined && this.myGroup != false) {
            this.myGroup.clearLayers()
          }
          this.layers = []
        }

      },
      clearC: async function () {//清理地图画线
        if (this.connectLayer != undefined && this.connectLayer != false) {
          this.connectLayer.clearLayers();
        }
      },
      clearG: async function () {//清理地图图形
        if (this.graphicsLayer != undefined && this.graphicsLayer != false) {
          this.graphicsLayer.clearLayers();
        }
      },
      clearP: async function () {//清理点击事件落点
        if (this.latLngGroup != undefined && this.latLngGroup != false) {
          this.latLngGroup.clearLayers()
        }
        this.latLngLayers = []
      },
      initMap: function () {
        let _that = this;
        this.mapDivId = this.mapDiv;
        let mapSite = this.mapSite;
        let isSideBySide = this.isSideBySide;
        let isEditableLayers = this.isEditableLayers;
        // setToken("eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6ImY5Zjg3ZjVmLWQ4NTctNDQxZC04NmQ5LTg4OWExZWRlODE4ZSIsInVzZXJuYW1lIjoiYWRtaW4ifQ.26mAzmaM9pUza9585aLnRMyRd4GxvrWbCxN0erYsuiBDYQiYnyc-TwXVNDI7Xrpt3Bqmbnul-XMszOxYQi12LA");
        _that.isAggregationLayers = window.L.markerClusterGroup({
          //设置为true时显示聚类所占据的范围
          showCoverageOnHover: true,
          //设置为true时会向低一级聚类缩放
          zoomToBoundsOnClick: true,
          //增加点位时增加聚合动画（否则会出问题）
          animateAddingMarkers: true,
          //最大缩放级别点击聚合图标展开图标
          spiderfyOnMaxZoom:true,
        });
        if (!isSideBySide) {  //只有一个地图
          if (this.codes.length != 1) {
            alert("请输入一个地图code！");
            return
          }
          getSuperMap(this.codes).then(resp => {
            let mapList = resp.data;
            if (mapList != null && mapList.length > 0) {
              let url = mapList[0].url;
              let centerLat = mapList[0].centerLat;
              let centerLng = mapList[0].centerLng;
              let zoom = mapList[0].zoom;  //默认比例
              let maxZoom = mapList[0].maxZoom;  //最大比例
              let minZoom = mapList[0].minZoom; //最小比例
              let zoomControl = mapList[0].zoomControl == null ? true : mapList[0].zoomControl;  //地图缩放+-号是否显示
              let attributionControl = mapList[0].attributionControl == null ? true : mapList[0].attributionControl; //logo是否显示
              let logoControl = mapList[0].logoControl == null ? false : mapList[0].logoControl; //logo是否显示
              let dragging = mapList[0].dragging == null ? true : mapList[0].dragging; //地图是否允许鼠标拖拽

              let defaultConfigure = {
                crs: window.L.CRS.EPSG4326,
                center: [centerLat, centerLng],
                maxZoom: maxZoom,
                minZoom: minZoom,
                zoom: zoom,
                editable: true,
                zoomControl: zoomControl,
                attributionControl: attributionControl,
                dragging: dragging,
                logoControl: logoControl
              };
              if (isEditableLayers) {
                Object.assign(defaultConfigure, {drawControl: true});
              }
              let loadConfiguration = Object.assign(defaultConfigure, mapSite);
              let mapOption = window.L.map(this.mapDiv, loadConfiguration);
              this.map = mapOption;
              if (this.showLatLng != undefined) {
                let icon = new window.L.Icon({
                  iconUrl: iconList['marker'],
                  iconSize: [48, 48],
                  iconAnchor: [24, 40],
                  popupAnchor: [-3, -40],
                  shadowSize: [41, 41],
                })
                if (isEditableLayers) {
                  this.editableLayers = new L.FeatureGroup().addTo(mapOption);
                  let options = {
                    position: 'topleft',
                    draw: {
                      polyline: null,
                      polygon: {},
                      circlemarker: null,
                      circle: null,
                      rectangle: {},
                      marker: null,
                      remove: null
                    }
                  };
                  let drawControl = new window.L.Control.Draw(options);
                  mapOption.addControl(drawControl);
                  mapOption.on(window.L.Draw.Event.CREATED, function (e) {
                    let layer = e.layer;
                    let layerType = e.layerType;

                    if (layerType === "polygon") {
                      let latlng = layer.getLatLngs()[0];
                      //一个自定义的计算面积的函数
                      let area = _that.formatArea(latlng);
                      alert(area);
                    } else if (layerType === "polyline") {
                      let latlng = layer.getLatLngs();
                      //一个自定义的计算长度的函数
                      let distance = _that.formatLength(latlng);
                      alert(distance);
                    }
                    this.editableLayers.clearLayers();
                    this.editableLayers.addLayer(layer);
                  });
                }

                mapOption.on('dblclick', function (e) {
                  _that.clearP();
                  _that.showLatLng(e.latlng.lat, e.latlng.lng);
                  let marker = window.L.marker([e.latlng.lat, e.latlng.lng], {
                    icon: icon
                  }).addTo(mapOption);
                  _that.latLngLayers.push(marker)
                  _that.latLngGroup = window.L.layerGroup(_that.latLngLayers)
                  mapOption.addLayer(_that.latLngGroup)
                })
              }
              window.L.supermap.tiledMapLayer(url).addTo(mapOption);
            }
          })
        } else {  //卷帘地图
          if (this.codes.length != 2) {
            alert("请输入两个地图code！");
            return
          }
          getSuperMap(this.codes).then(resp => {
            let mapList = resp.data;
            if (mapList != null && mapList.length == 2) {
              let stamenurl = mapList[0].url;
              let osmurl = mapList[1].url;
              let centerLat = mapList[0].centerLat;
              let centerLng = mapList[0].centerLng;
              let zoom = mapList[0].zoom;  //默认比例
              let maxZoom = mapList[0].maxZoom;  //最大比例
              let minZoom = mapList[0].minZoom; //最小比例
              let zoomControl = mapList[0].zoomControl == null ? true : mapList[0].zoomControl;  //地图缩放+-号是否显示
              let attributionControl = mapList[0].attributionControl == null ? true : mapList[0].attributionControl; //logo是否显示
              let logoControl = mapList[0].logoControl == null ? false : mapList[0].logoControl; //logo是否显示
              let dragging = mapList[0].dragging == null ? true : mapList[0].dragging; //地图是否允许鼠标拖拽

              let defaultConfigure = {
                crs: window.L.CRS.EPSG4326,
                center: [centerLat, centerLng],
                maxZoom: maxZoom,
                minZoom: minZoom,
                zoom: zoom,
                editable: true,
                zoomControl: zoomControl,
                attributionControl: attributionControl,
                dragging: dragging,
                logoControl: logoControl
              };

              if (isEditableLayers) {
                Object.assign(defaultConfigure, {drawControl: true});
              }
              let loadConfiguration = Object.assign(defaultConfigure, mapSite);
              let mapOption = window.L.map(this.mapDiv, loadConfiguration);
              this.map = mapOption;
              if (this.showLatLng != undefined) {
                let icon = new window.L.Icon({
                  iconUrl: iconList['marker'],
                  iconSize: [48, 48],
                  iconAnchor: [24, 40],
                  popupAnchor: [-3, -40],
                  shadowSize: [41, 41],
                })

                if (isEditableLayers) {
                  this.editableLayers = new L.FeatureGroup().addTo(mapOption);
                  let options = {
                    position: 'topleft',
                    draw: {
                      polyline: null,
                      polygon: {},
                      circlemarker: null,
                      circle: null,
                      rectangle: {},
                      marker: null,
                      remove: null
                    }
                  };
                  let drawControl = new window.L.Control.Draw(options);
                  mapOption.addControl(drawControl);
                  mapOption.on(window.L.Draw.Event.CREATED, function (e) {
                    let layer = e.layer;
                    let layerType = e.layerType;

                    if (layerType === "polygon") {
                      let latlng = layer.getLatLngs()[0];
                      //一个自定义的计算面积的函数
                      let area = _that.formatArea(latlng);
                      alert(area);
                    } else if (layerType === "polyline") {
                      let latlng = layer.getLatLngs();
                      //一个自定义的计算长度的函数
                      let distance = _that.formatLength(latlng);
                      alert(distance);
                    }
                    this.editableLayers.clearLayers();
                    this.editableLayers.addLayer(layer);
                  });
                }

                mapOption.on('dblclick', function (e) {
                  _that.clearP();
                  _that.showLatLng(e.latlng.lat, e.latlng.lng);
                  let marker = window.L.marker([e.latlng.lat, e.latlng.lng], {
                    icon: icon
                  }).addTo(mapOption);
                  _that.latLngLayers.push(marker)
                  _that.latLngGroup = window.L.layerGroup(_that.latLngLayers)
                  mapOption.addLayer(_that.latLngGroup)
                })
              }
              let stamenLayer = window.L.supermap.tiledMapLayer(stamenurl).addTo(mapOption);
              let osmLayer = window.L.supermap.tiledMapLayer(osmurl).addTo(mapOption);
              L.control.sideBySide(stamenLayer, osmLayer).addTo(mapOption);

            }
          })
        }
      },
      // 获取面积
      /**
       * polygon [{lat:30,lng:104},{lat:30,lng:104},{lat:30,lng:104}]
       */
      formatArea: function (polygon) {
        //L.GeometryUtil.geodesicArea(),返回number类型的数据，单位是平方米，这里做了一下转化
        var seeArea = window.L.GeometryUtil.geodesicArea(polygon);
        let area = (seeArea / 10e5).toFixed(2) + "k㎡";
        return area;
      },
      // 获取长度
      /**
       * line[{lat:30,lng:104},{lat:30,lng:104},{lat:30,lng:104}]
       */
      formatLength: function (line) {
        let dis = 0;
        for (let i = 0; i < line.length - 1; i++) {
          let start = line[i];
          let end = line[i + 1];
          dis += window.L.latLng([start.lat, start.lng]).distanceTo([end.lat, end.lng]);//计算两个点之间的距离，并累加
        }
        //结果得到的也是number类型，单位是 米
        return (dis / 10e2).toFixed(2) + "km";
      },
      setMarkers: function (markersList) {//地图标点
        const _that = this;
        for (let i = 0; i < markersList.length; i++) {
          let isAggregation = markersList[i].isAggregation == null ? false : markersList[i].isAggregation;  //是否聚合点位
          let keepBindPopup = isAggregation == true ? false : markersList[i].keepBindPopup;  //提示气泡是否一直显示

          let icon = new window.L.Icon({
            iconUrl: iconList[markersList[i].icon],
            iconSize: [48, 48],
            iconAnchor: [24, 40],
            popupAnchor: [-3, -40],
            shadowSize: [41, 41],
          })
          let markerClick = window.L.marker([markersList[i].lat, markersList[i].lng], {
            icon: icon
          }).addTo(this.map);
          if (markersList[i].bindPopupHtml != null && markersList[i].bindPopupHtml !== "") {
            let html = markersList[i].bindPopupHtml;
            if (keepBindPopup) {
              markerClick.bindPopup(html, {
                autoClose: false,
                closeOnClick: null,
                closeButton: false
              }).openPopup(markerClick.getLatLng());
            } else {
              markerClick.on('mouseover', function () {
                let html = markersList[i].bindPopupHtml;
                this.bindPopup(html).openPopup(this.getLatLng());
              }).on('mouseout', function () {
                this.closePopup();
              })
            }
          }
          if (markersList[i].click != null && markersList[i].click !== "") {
            if(markersList[i].parameter != null && markersList[i].parameter !== ""){
              markerClick.on('click', function () {
                let clickName = markersList[i].click;
                _that.$emit(clickName,markersList[i].parameter);
              })
            }else{
              markerClick.on('click', function () {
                let clickName = markersList[i].click;
                _that.$emit(clickName);
              })
            }
          }
          if (isAggregation) {
            _that.isAggregationLayers.addLayer(markerClick)
            _that.isAggregationMyGroup = window.L.layerGroup(_that.isAggregationLayers)
            this.map.addLayer(_that.isAggregationLayers);
          } else {
            _that.layers.push(markerClick)
            _that.myGroup = window.L.layerGroup(_that.layers)
            this.map.addLayer(_that.myGroup)
          }

        }
      },
      setMarkersRadius: function (markersList) {//地图标点带范围
        const _that = this;
        for (let i = 0; i < markersList.length; i++) {
          let isAggregation = markersList[i].isAggregation == null ? false : markersList[i].isAggregation;  //是否聚合点位
          let keepBindPopup = isAggregation == true ? false : markersList[i].keepBindPopup;  //提示气泡是否一直显示

          _that.polygon = window.L.circle([markersList[i].lat, markersList[i].lng], {radius: markersList[i].radius * 1000});
          let icon = new window.L.Icon({//传感器
            iconUrl: iconList[markersList[i].icon],
            iconSize: [48, 48],
            iconAnchor: [24, 40],
            popupAnchor: [-3, -40],
            shadowSize: [41, 41],
          })
          let marker = window.L.marker([markersList[i].lat, markersList[i].lng], {
            icon: icon
          });
          if (markersList[i].bindPopupHtml != null && markersList[i].bindPopupHtml !== "") {
            let html = markersList[i].bindPopupHtml;
            if (keepBindPopup) {
              marker.bindPopup(html, {
                autoClose: false,
                closeOnClick: null,
                closeButton: false
              }).openPopup(marker.getLatLng());
            } else {
              marker.on('mouseover', function () {
                let html = markersList[i].bindPopupHtml;
                this.bindPopup(html).openPopup(this.getLatLng());
              }).on('mouseout', function () {
                this.closePopup();
              })
            }
          }
          if (markersList[i].click != null && markersList[i].click != "") {
            if(markersList[i].parameter != null && markersList[i].parameter !== ""){
              marker.on('click', function () {
                let clickName = markersList[i].click;
                _that.$emit(clickName,markersList[i].parameter);
              })
            }else{
              marker.on('click', function () {
                let clickName = markersList[i].click;
                _that.$emit(clickName);
              })
            }
          }
          marker.addTo(this.map);


          if (isAggregation) {
            _that.isAggregationLayers.addLayer(marker);
            _that.radiusLayers.push(_that.polygon);
            this.map.addLayer(_that.isAggregationLayers);
            _that.isAggregationMyGroup = window.L.layerGroup(_that.radiusLayers)
            this.map.addLayer(_that.isAggregationMyGroup)
          } else {
            _that.layers.push(marker);
            _that.layers.push(_that.polygon);
            _that.myGroup = window.L.layerGroup(_that.layers)
            this.map.addLayer(_that.myGroup)
          }
        }
      },
      setConnectList: function (connectList, color) {//地图画线
        const _that = this;
        let points = [];
        for (let i = 0; i < connectList.length; i++) {
          points.push([connectList[i].lat, connectList[i].lng]);//创建点
        }
        let polyline = window.L.polyline(points, {color: color});
        _that.connectLayer = window.L.featureGroup().addTo(this.map);
        _that.connectLayer.addLayer(polyline);
      },
      setGraphicsList: function (graphicsList, color) {//地图图形
        const _that = this;
        let points = [];
        for (let i = 0; i < graphicsList.length; i++) {
          points.push([graphicsList[i].lat, graphicsList[i].lng]);//创建点
        }
        let polygon = window.L.polygon(points, {color: color});
        polygon.addTo(this.map);
        _that.graphicsLayer = window.L.featureGroup().addTo(this.map);
        _that.graphicsLayer.addLayer(polygon);
      },
      dropLocation: function (lat, lng) {//落点定位
        this.map.panTo([lat, lng])
      },
      controlLevel: function (level) {//控制地图缩放级别
        this.map.setZoom(level)
      }
    }
  }
</script>

<style scoped>

</style>