SuperMap-Vue

说明

Vue 项目中引入超图地图「包括 3D」

功能

• 地图实例化
• 地图加载各种图层
• 地图加载业务数据，支持点、线、不规则多边形、长方形、圆形对象，支持单个对象、对象数组、混合对象
• 在地图上绘制点、线、不规则多边形、长方形、圆形，并支持编辑

步骤

package.json 添加依赖

"leaflet": "^1.7.1",
"leaflet-draw": "^1.0.4",
"@supermap/iclient-leaflet": "^10.2.0",
"@supermap/vue-iclient3d-webgl": "^1.0.9"

supermap.js

import Vue from 'vue'
import L from 'leaflet'
import '@supermap/iclient-leaflet';
import 'leaflet/dist/leaflet.css';

//leaflet-draw 绘制点线面工具
import 'leaflet-draw'
import 'leaflet-draw/dist/leaflet.draw.css'
import '@/map/supermap/draw-cn'

Vue.use(L)

//地图参数
let mapOption = {
  crs: L.CRS.EPSG4326,
  center: [34.8990715279437, 108.93980334345383],
  maxZoom: 18,
  zoom: 13
}

//地图天地图图层
let tiandituTileLayer1 = {
  key: '1d109683f4d84198e37a38c442d68311'
}
let tiandituTileLayer2 = {
  isLabel: true,
  key: '1d109683f4d84198e37a38c442d68311'
}

let markerIcon = L.Icon.extend({
  options: {
    shadowUrl: null,
    iconAnchor: new L.Point(12, 12),
    iconSize: new L.Point(24, 24),
    iconUrl: '@/assets/img/map/darkblue.png'
  }
});

Vue.prototype.$map = {
  vm: null,
  map: null,
  layerGroup: null,
  init: function(vm, id, option={}){
    this.map = L.map(id, Object.assign(mapOption, option));
    L.supermap.tiandituTileLayer(tiandituTileLayer1).addTo(this.map);
    L.supermap.tiandituTileLayer(tiandituTileLayer2).addTo(this.map);

    this.layerGroup = new L.FeatureGroup();
    this.map.addLayer(this.layerGroup);

    //组件实例对象
    this.vm = vm

    return this.map;
  },
  //地图上添加覆盖物-点。obj.geo 格式： lat,lng
  addPoint : function(obj) {
    if(!obj.geo || obj.geo.indexOf(',') == -1) {
      //无效点
      return
    }

    //默认样式、图标
    obj.style = obj.style || 'park'  // TODO
    obj.icon = obj.icon || 'actiontezhongcheliang' // TODO

    obj.code = obj.code || 'default'
    obj.name = obj.name || '默认'
    obj.obj = obj.obj || {}
    obj.clickable = obj.clickable || false //默认不支持点击事件

    let markIcon = L.divIcon({
      className: "dIcon",
      html: `<div class=` + obj.style + `>
                     <i class="icon action-jeecg `+ obj.icon + `"></i>
                     <p>`+ obj.name + `</p>
                     </div>`,
      iconSize: [20, 38],
      iconAnchor: [10, 38],  //定位图标
    })
    let [lat, lng] = obj.geo.split(",")
    let marker = L.marker([parseFloat(lat), parseFloat(lng)], {
      icon: markIcon,
      riseOnHover: true,
    })
    this.layerGroup.addLayer(marker);

    if(obj.clickable) {
      let that = this
      marker.on('click', function () {
        that.vm.$emit('data-obj-click', {
          code: obj.code,
          record: obj.obj
        })
      })
    }

    return marker
  },
  //地图上添加覆盖物-点集合
  addPoints: function(arr) {
    for (let i = 0; i < arr.length; i++) {
      this.addPoint(arr[i])
    }
  },
  addPolyline: function (obj) {
    let geo = obj.geo
    if(!geo) {
      console.log("无效值:" + geo)
      return
    }

    let line = geo.split('#')
    if(line.length < 2) return

    let polyline = []
    line.forEach(j => {
      let o = [parseFloat(j.split(',')[0]), parseFloat(j.split(',')[1])]
      polyline.push(o)
    })

    obj.code = obj.code || 'default'
    obj.name = obj.name || '默认'
    obj.obj = obj.obj || {}

    let option = obj.option || {}
    option.color = option.color || '#3388ff'
    option.weight = option.weight || 3

    let polylines = L.polyline(polyline, option);
    this.layerGroup.addLayer(polylines);

    obj.code = obj.code || 'default'
    obj.obj = obj.obj || {}
    obj.clickable = obj.clickable || false //默认不支持点击事件

    if(obj.clickable) {
      let that = this
      polylines.on('click', function () {
        that.vm.$emit('data-obj-click', {
          code: obj.code,
          record: obj.obj
        })
      })
    }
  },
  //地图上添加覆盖物-面。obj.geo 格式：[lat,lng;]lat1,lng1#lat2,lng2
  addPolygon: function (obj) {
    let data = obj.geo
    if(!data) {
      console.log("无效值:" + data)
      return
    }

    let arr = data.split(';')
    let points = [];
    if(arr.length == 2) {
      // 有中心点
      let center = arr[0];
      if(obj.center) {
        let centerObj = {...obj, geo: center}
        this.addPoint(centerObj)
      }
      points = arr[1].split('#')
    } else {
      points = arr[0].split('#')
    }

    if(points.length < 3) return

    let polygon = []
    for (let i = 0; i < points.length; i++) {
      let [lat, lng] = points[i].split(',')
      polygon.push([parseFloat(lat), parseFloat(lng)])
    }

    let option = obj.option || {}
    option.stroke = option.stroke || true
    option.weight = option.weight || 3
    option.color = option.color || '#3388ff'
    option.opacity = option.opacity || 1.0
    option.fill = option.fill || true
    option.fillColor = option.fillColor || '#3388ff'
    option.fillOpacity = option.fillOpacity || 0.2

    let polygons = L.polygon(polygon, option);
    this.layerGroup.addLayer(polygons);

    //触发添加事件
    this.vm.$emit('add-polygon', { id: polygons._leaflet_id, obj })

    obj.code = obj.code || 'default'
    obj.obj = obj.obj || {}
    obj.clickable = obj.clickable || false //默认不支持点击事件

    let that = this
    if(obj.clickable) {
      polygons.on('click', function () {
        that.vm.$emit('data-obj-click', {
          code: obj.code,
          record: obj.obj
        })
      })
    }

    obj.center = obj.center || false
    //无中心点且要显示中心点，则计算中心点并显示
    if(arr.length == 1 && obj.center) {
      let center = polygons.getCenter();
      this.addPoint({ ...obj, geo: center.lat + "," + center.lng })
    }
  },
  //地图上添加圆形。obj.geo 格式：lat1,lng1;lat2,lng2
  addCircle: function (obj) {
    let data = obj.geo
    if(!data) {
      console.log("无效值:" + data)
      return
    }

    let arr = data.split(';')
    if(arr.length != 2) {
      console.log("无效值:" + data)
      return
    }

    let center = arr[0].split(',');
    let circle = L.circle([parseFloat(center[0]), parseFloat(center[1])], {radius: parseFloat(arr[1])});
    this.layerGroup.addLayer(circle);

    obj.code = obj.code || 'default'
    obj.obj = obj.obj || {}
    obj.clickable = obj.clickable || false //默认不支持点击事件

    let that = this
    if(obj.clickable) {
      circle.on('click', function () {
        that.vm.$emit('data-obj-click', {
          code: obj.code,
          record: obj.obj
        })
      })
    }

    obj.center = obj.center || false
    if(obj.center) {
      this.addPoint({...obj, geo: arr[0]})
    }
  },
  getCenter(data) { //data 数据格式： lat,lng#lat,lng
    let area = 0;
    let x = 0;
    let y = 0;
    let arr = data.split('#')
    let pointArr = []
    for (let i = 0; i < arr.length; i++) {
      let pArr = arr[i].split(",")
      let o = [];
      o.push(parseFloat(pArr[0]))
      o.push(parseFloat(pArr[1]))
      pointArr.push(o)
    }
    for (let i = 1; i <= pointArr.length; i++) {
      let lat = pointArr[i % pointArr.length][0];
      let lng = pointArr[i % pointArr.length][1];
      let nextLat = pointArr[i - 1][0];
      let nextLng = pointArr[i - 1][1];
      let temp = (lat * nextLng - lng * nextLat) / 2;
      area += temp;
      x += (temp * (lat + nextLat)) / 3;
      y += (temp * (lng + nextLng)) / 3;
    }
    x = x / area;
    y = y / area;
    return x + "," + y
  },
  getPointsByLayer(type, layer) {
    let points = ""

    let arr = []
    if(type == 'polyline') {
      let latLngs = layer.getLatLngs()
      for (let i = 0; i < latLngs.length; i++) {
        arr.push(latLngs[i].lat + "," + latLngs[i].lng)
      }
      points += (arr.join("#"))
    } else if (type == 'polygon' || type == 'rectangle') {
      let latLngs = layer.getLatLngs()
      let obj = latLngs[0]
      for (let i = 0; i < obj.length; i++) {
        arr.push(obj[i].lat + "," + obj[i].lng)
      }
      let p = arr.join("#")
      let center = layer.getCenter()
      points += (center.lat + "," + center.lng)
      points += ";"
      points += p
    } else if (type == 'circle') {
      let center = layer.getLatLng()
      let radius = layer.getRadius()
      points += (center.lat + "," + center.lng)
      points += ";"
      points += radius
    }
    return points
  },
  draw(options) {
    options = options || {}
    options.position = options.position || 'topleft'
    options.type = options.type || 'polygon'

    options.draw = options.draw || {}
    options.draw.marker = false
    options.draw.circlemarker = false
    options.draw.polyline = options.draw.polyline || false
    options.draw.polygon = options.draw.polygon || false
    options.draw.circle = options.draw.circle || false
    options.draw.rectangle = options.draw.rectangle || false

    options.edit = {
      featureGroup: this.layerGroup,
      remove: true,
      edit: true
    }

    let drawControl = new L.Control.Draw(options);
    this.map.addControl(drawControl);
    handleMapEvent(drawControl._container, this.map);

    let that = this
    this.map.on(L.Draw.Event.CREATED, function (e) {
      let layer = e.layer
      that.layerGroup.addLayer(layer);

      let points = that.getPointsByLayer(e.layerType, layer)
      that.vm.$emit("drawing", {
        eventType: 'created',
        id: layer._leaflet_id,
        points
      })
    });

    this.map.on('draw:edited', function (e) {
      let layers = e.layers;
      layers.eachLayer(function (layer) {
        let points = that.getPointsByLayer(options.type, layer)
        that.vm.$emit("drawing", {
          eventType: 'edited',
          id: layer._leaflet_id,
          points
        })
      });
    });

    this.map.on('draw:deleted', function (e) {
      let layers = e.layers;
      layers.eachLayer(function (layer) {
        that.vm.$emit("drawing", {
          eventType: 'deleted',
          id: layer._leaflet_id
        })
      });
    });

    function 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();
      });
    }
  },
  clickEventListener(marker, func) {
    let that = this
    this.map.on('click', (e) => {
      let lat = e.latlng.lat //纬度
      let lng = e.latlng.lng //经度
      let geo = lat + "," + lng

      that.removeLayer(marker)
      marker = that.addPoint({ geo });

      func(marker, geo)
    })
  },
  removeLayer(layer) {  //从图层上删除覆盖物
    if(layer) {
      this.layerGroup.removeLayer(layer);
    }
  }
}

import '@supermap/vue-iclient3d-webgl/dist/styles/vue-iclient3d-webgl.min.css';
import VueiClient from '@supermap/vue-iclient3d-webgl';
Vue.use(VueiClient);

main.js 引入 supermap.js

import '@/map/supermap/supermap'  

地图组件 TMap.vue

<template>
  <div class="mapbox">
    <div id="map"></div>
  </div>
</template>
<script>
  export default {
    name: 'TMap',
    props: {
      dataType: String,  // 点： point 线：polyline 面：polygon
      dataObj: Object,   //一个对象，数据格式与type要求一致:
      // 点： {geo: '23.45,123.45'}
      // 线： {geo: '23.45,123.45#23.45,123.45'}
      // 多边形、长方形： {geo: '23.45,123.45;23.45,123.45#23.45,123.45'} 或 {geo: '23.45,123.45#23.45,123.45#23.45,123.45'}
      // 圆形： {geo: '23.45,123.45;200'}
      dataArr: Array,    //批量对象，数据格式与type要求一致
      dataArrPro: Array, //批量对象，支持混合,
      clickable: {
        type: Boolean,
        default: false
      },
      drawOption: Object //{ draw: false, type: 'polyline|polygon|rectangle|circle' } 标注类型：线、面,是否缩放
    },
    data() {
      return {
        map: null,
        marker: null,  //单个标注点
      }
    },
    methods: {
      initData() {
        if (this.dataType) {
          if (this.dataObj) {
            let type = this.dataType

            if (type == 'point') {
              this.marker = this.$map.addPoint(this.dataObj);
            } else if (type == 'polyline') {
              this.$map.addPolyline(this.dataObj);
            } else if (type == 'polygon' || type == 'rectangle' ) {
              this.$map.addPolygon(this.dataObj);
            } else if (type == 'circle') {
              this.$map.addCircle(this.dataObj);
            }
          }

          if (this.dataArr) {
            let type = this.dataType
            if (type == 'point') {
              for (let i = 0; i < this.dataArr.length; i++) {
                this.$map.addPoint(this.dataArr[i]);
              }
            } else if (type == 'polyline') {
              for (let i = 0; i < this.dataArr.length; i++) {
                this.$map.addPolyline(this.dataArr[i]);
              }
            } else if (type == 'polygon' || type == 'rectangle') {
              for (let i = 0; i < this.dataArr.length; i++) {
                this.$map.addPolygon(this.dataArr[i]);
              }
            } else if (type == 'circle') {
              for (let i = 0; i < this.dataArr.length; i++) {
                this.$map.addCircle(this.dataArr[i]);
              }
            }
          }
        }

        if (this.dataArrPro) {
          for (let i = 0; i < this.dataArrPro.length; i++) {
            let type = this.dataArrPro[i].type
            if (type == 'point') {
              this.$map.addPoint(this.dataArrPro[i]);
            } else if (type == 'polyline') {
              this.$map.addPolyline(this.dataArrPro[i]);
            } else if (type == 'polygon' || type == 'rectangle') {
              this.$map.addPolygon(this.dataArrPro[i]);
            } else if (type == 'circle') {
              this.$map.addCircle(this.dataArrPro[i]);
            }
          }
        }

        let that = this
        if (this.clickable && !this.drawOption.draw) {
          this.$map.clickEventListener(that.marker, function(marker, point) {
            that.marker = marker
            that.$emit('map-click', point)
          })
        }
      },
      initTools() {
        if (this.drawOption.draw) {
          let options = {
            type: this.drawOption.type,
            draw: {
              polyline: this.drawOption.type=='polyline',
              polygon: this.drawOption.type=='polygon',
              circle: this.drawOption.type=='circle',
              rectangle: this.drawOption.type=='rectangle'
            }
          }
          this.$map.draw(options);
        }
      }
    },
    mounted() {
      this.map = this.$map.init(this, 'map')
      this.$emit('initMapFinished', this.map)

      //加载数据
      this.initData()

      //初始化工具
      this.initTools()
    }
  };
</script>

使用CarMap.vue

<template>
  <div id="mapcontent">
    <div class="standard-car">
      <p v-for="(items,index) in trajectory" :key="index" :style="{color:items.color,}">
        <i class="icon action-jeecg" :class="items.icon"></i>
        <span>{{items.name}}</span>
      </p>
    </div>
    <TMap :draw-option="drawOption" @drawing="drawing"

          :data-type="data.dataType"
          :data-obj="data.obj"
          :data-arr="data.arr"
          :data-arr-pro="data.arrPro"
          @data-obj-click="objClick"
          @add-polygon="addPolygon"

          :clickable="clickable"
          @map-click="mapClick"
          @initMapFinished="initMapFinished" />
    <vehicle-modal ref="modalFormvehicle"></vehicle-modal>
  </div>
</template>
<script>
import TMap from '@/map/TMap'
import VehicleModal from '../modules/VehicleModal.vue'
import '@/assets/less/TableExpand.less'
export default {
  name: 'CarMap',
  components: {
    TMap,
    VehicleModal
  },
  props: {
  },
  data () {
    return {
      drawOption: {
        draw: false, //是否开启绘制
        type: 'polygon',  //绘制类型-线 polyline、多边形 polygon、长方形 rectangle 、圆形 circle
      },
      clickable: false, //地图是否支持点击事件，支持时返回点击位置的坐标点
      data: {
      //   dataType: 'polygon', //数据类型：点、线、面
      //   obj: { // 对象示例
      //     name: '111', //图标显示名称
      //     code: 'tree', //标识
      //     obj: {  //业务数据
      //       id: '123',
      //       age: 30
      //     },
      //     option: {  // 线、面选项
      //       color: '#71e352',
      //       weight: 3,
      //       stroke: true,
      //       opacity: 0.3,
      //       fill: true,
      //       fillColor: '#a72f1f',
      //       fillOpacity: 0.2
      //     },
      //     clickable: true,  //对象是否可点击, 事件回调中有code、 obj
      //     center: false,  //对象为多边形时，是否显示中心点。无中心点时会根据坐标点集合计算中心点
      //     // geo: '34.8970816040039,108.90901565551758', // 点信息
      //     geo: '34.902522670445535,108.90691832442523;34.907738800048826,108.90146255493164#34.90455883026123,108.91459465026855#34.8970816040039,108.90901565551758#34.899230232238764,108.90189170837402',
      //   },
        arr: [
        //   {
        //   code: '111',
        //   center: false,
        //   geo: '34.92313833179651,108.89398454572074#34.921801952586975,108.91084122355096#34.91278117551701,108.89547350176144'
        // },{
        //   code: '222',
        //   center: false,
        //   geo: '34.91379823040916,108.91100043256301#34.91381784930127,108.92297743353993#34.89712851354852,108.92383146565408#34.89824104355648,108.91054124571383'
        // }
        ],
        arrPro: [
        //   {
        //   type: 'point',
        //   name: '1',
        //   code: '1',
        //   obj: {  //业务数据
        //     id: '123',
        //     age: 30
        //   },
        //   clickable: true,
        //   geo: '34.91921424865723,108.90008926391602'
        // },{
        //   type: 'circle',
        //   name: '2',
        //   code: '2',
        //   obj: {  //业务数据
        //     id: '222',
        //     age: 20
        //   },
        //   clickable: true,
        //   center: true,
        //   geo: '34.905593729916255,108.91717646470464;500'
        // }
        //   ,{
        //   type: 'polyline',
        //   name: '123',
        //   clickable: true,
        //   geo: '34.907738800048826,108.90146255493164#34.90455883026123,108.91459465026855#34.8970816040039,108.90901565551758#34.899230232238764,108.90189170837402'
        // },{
        //   type: 'polygon',
        //   name: '456',
        //   clickable: true,
        //   center: true,
        //   geo: '34.902522670445535,108.90691832442523;34.907738800048826,108.90146255493164#34.90455883026123,108.91459465026855#34.8970816040039,108.90901565551758#34.899230232238764,108.90189170837402'
        // }
        ],
      },
      trajectory: [
        {
          name: "垃圾运输车",
          color: "#eb6877",
          icon: "actiontezhongcheliang",

        },
        {
          name: "洒水车",
          color: "#5f52a0",
          icon: "actiontezhongcheliang",
        },
        {
          name: "清扫车",
          color: "#00b7ee",
          icon: "actiontezhongcheliang",
        }
      ],
      car1: [
        {
          code: "garbage",
          name: "垃圾运输车",
          latlng: "34.904680252075195,108.93424987792969#34.90382194519043,108.93768310546875#34.89815711975098,108.94231796264648#34.89189147949219,108.9484977722168",
        }],
      car2: [
        {
          code: "Watering",
          name: "洒水车",
          latlng: "34.905707048713616,108.93818252344404#34.892403291187755,108.94504882303694#34.899012254603825,108.959296394692175",
        }],
      car3: [
        {
          code: "clean",
          name: "清扫车",
          latlng: "34.90373294275816,108.93303279874941#34.89841143974782,108.92565152668703#34.89025752384487,108.93105873761645",
        }],
    }
  },
  created () {
  },
  methods: {
    addPolygon(data){ // 添加多边形且绘制开启时有效
      console.log(data)
    },
    objClick({code, record}) {
      console.log(code, record)
      this.$refs.modalFormvehicle.edit(record);
      this.$refs.modalFormvehicle.title = "详情";
      this.$refs.modalFormvehicle.disableSubmit = true;
    },
    mapClick(point){
      console.log(point)
    },
    drawing(data) {
      console.log(data)
    },
    initMapFinished(map) {
      let that = this
      // let ListInfo = res.result.records
      that.car1.forEach(i => {
        if(!i.latlng) {
          return
        }
        let latangs = i.latlng.split('#').pop()
        that.$map.addPoint({ obj: i, clickable: true, code: i.code, geo: latangs, style: i.code, icon: 'actiontezhongcheliang'} );
      });
      that.car2.forEach(i => {
        if(!i.latlng) {
          return
        }
        let latangs = i.latlng.split('#').pop()
        that.$map.addPoint({ obj: i, clickable: true, code: i.code, geo: latangs, style: i.code, icon: 'actiontezhongcheliang'} );
      });
      that.car3.forEach(i => {
        if(!i.latlng) {
          return
        }
        let latangs = i.latlng.split('#').pop()
        that.$map.addPoint({ obj: i, clickable: true, code: i.code, geo: latangs, style: i.code, icon: 'actiontezhongcheliang'} );
      });
    }
  }
};
</script>