sgup-jsutil-leaflet v1.0.0

sgup-jsutil-leaflet 一个基于leaflet封装的操作地图的基类

包的使用

1、安装
npm install sgup-jsutil-leaflet --save

2、面向对象开发
// 导入基类
import SgupJsutilLeaflet from 'sgup-jsutil-leaflet'
// 导入样式
import 'sgup-jsutil-leaflet/dist/leaflet.css'
// 配置文件
import { MarkerConfig, ClusterConfig, LeafletPopup } from './leaflet-config'

// 子类
class SgupLeafletMap extends SgupJsutilLeaflet{
    // 获取点位图标
  getMarkerConfig (markerType) {
    return MarkerConfig[markerType]
  }

  // 获取popup弹框
  getLeafletPopup (markerType) {
    return LeafletPopup[markerType]
  }
    
  // 绘制轨迹
  addTrack (trackList) {
    // 加速度列表
    var speedList = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
    this.trackFeature = L.featureGroup()
    this.trackFeature.setZIndex(120)

    // 轨迹线
    const polyline = L.polyline(trackList, {
      color: '#FF00FF',
      fillColor: '#FF00FF',
      weight: 4
    })

    // 轨迹开始点位
    const startPoint = this.creatOrdinaryMarker('tractStart', {
      latitude: trackList[0][0],
      longitude: trackList[0][1],
      id: '0'
    }, new L.Icon({
      iconSize: [40 * this.rate, 40 * this.rate],
      // 图标的取图地址
      iconUrl: require('./icons/track_start.png'),
      // 图标中心点偏移量
      iconAnchor: [20, 20]
    }))

    // 轨迹结束点位
    const endPoint = this.creatOrdinaryMarker('tractEnd', {
      latitude: trackList[trackList.length - 1][0],
      longitude: trackList[trackList.length - 1][1],
      id: '1'
    }, new L.Icon({
      iconSize: [40 * this.rate, 40 * this.rate],
      // 图标的取图地址
      iconUrl: require('./icons/track_end.png'),
      // 图标中心点偏移量
      iconAnchor: [20, 20]
    }))

    // 移动的点位
    const moveMarker = L.animatedMarker(polyline.getLatLngs(), {
      speedList: speedList,
      interval: 3000,
      zIndexOffset: 130,
      icon: new L.Icon({
        iconSize: [32 * this.rate, 32 * this.rate],
        // 图标的取图地址
        iconUrl: require('./icons/track_move.png'),
        // 图标中心点偏移量
        iconAnchor: [16, 16]
      }),
      autoStart: false
    })

    this.trackFeature.addLayer(moveMarker)
    this.trackFeature.addLayer(polyline)
    this.trackFeature.addLayer(startPoint)
    this.trackFeature.addLayer(endPoint)
    this.trackFeature.addTo(this.leafletMap)
    this.leafletMap.setView(trackList[0], 17)

    return moveMarker
  }

  // 清除轨迹
  clearTrack () {
    if (this.trackFeature) {
      const bool = this.leafletMap.hasLayer(this.trackFeature)
      if (bool) {
        this.trackFeature.remove()
      }
    }
  }
    
   // 添加聚合
  addCluster (data, type) {
    const clusterOptions = ClusterConfig[type]
    var cluster = this.clusters[type] || L.markerClusterGroup({
      showCoverageOnHover: false,
      iconCreateFunction: function (cluster) {
        const count = cluster._childCount
        let bgUrl = clusterOptions['level1']
        if (count > 10 && count <= 99) {
          bgUrl = clusterOptions['level2']
        } else if (count > 99) {
          bgUrl = clusterOptions['level3']
        }
        return L.divIcon({ iconSize: [40, 40], html: `<div style="background:url('${bgUrl}') no-repeat;background-size: 100%;width:40px;height:40px;text-align:center;line-height:40px;color: #fff;">${count}</div>` })
      }
    })
    if (!this.clusters[type]) {
      this.leafletMap.addLayer(cluster)
    } else {
      this.clusters[type].clearLayers()
    }
    data.forEach(item => {
      cluster.addLayer(item)
    })
    this.clusters[type] = cluster
    return this.clusters[type]
  }

  // 清除聚合
  clearCluster (type) {
    if (!this.clusters[type]) return

    if (type && this.clusters[type]) {
      this.clusters[type].remove()
      delete this.clusters[type]
    } else {
      for (const key in this.clusters) {
        this.clusters[key] && this.clusters[key].remove()
      }
      this.clusters = {}
    }
  }
  
  // WMS图层返回的数据
  wmsCallback (data) {
    console.log('wms图层数据')
  }
    
}


// 方法使用 创建SgupLeafletMap实例对象
import SgupLeafletMap from '../../map/SgupLeafletMap'
// 地图中心点 纬度在前  必传
const mcenter = [36.78839127856239, 116.68853759765626]
// 地图底图地址 必传
const mtile = '/sgup/tile?x={x}&y={y}&z={z}&customid=midnight&type=WGS84'
// wms服务地址 非必传 默认值为null
const wmsservice = '/geoserver/qh_grid/wms'
// wms服务图层 非必传 默认值为null
const wmslayer = 'qh_grid:qh_grid_1130_84'
const MAP = new SgupLeafletMap(mcenter, mtile, wmsservice, wmslayer)

leaflet-config.js文件

import Vue from 'vue'
import EventPop from './popup/EventPop.vue'

// marker
export const MarkerConfig = {
  event: {
    defaultIcon: require('@/assets/gis/event_default.png'),
    activeIcon: require('@/assets/gis/event_active.png'),
    defaultSize: [34, 42],
    activeSize: [40, 50]
  },
  equipment: {
    defaultIcon: require('@/assets/gis/equipment_default.png'),
    activeIcon: require('@/assets/gis/equipment_default.png'),
    defaultSize: [34, 42],
    activeSize: [40, 50]
  }
}

// 聚合
export const ClusterConfig = {
  equipment: {
    level1: require('@/assets/gis/equipment_0.png'),
    level2: require('@/assets/gis/equipment_1.png'),
    level3: require('@/assets/gis/equipment_2.png')
  }
}

// 弹框
export const LeafletPopup = {
  'event': Vue.extend(EventPop),
}

方法说明

方法名	方法用途	参数	参数说明	是否必须	使用示例
createMap	创建地图对象	mapId, option	mapId：地图容器；option：地图配置项	是；否	MAP.createMap('leaflet-wrap-map', { preferCanvas: true, zoomControl: true, attributionControl: true})
getZoom	获取地图层级	无	无	无	MAP.getZoom()
setZoom	设置地图层级	zoom	zoom：地图层级，Number类型	是	MAP.setZoom(MAP.getZoom() + 1)
setCenter	设置地图中心点	latLng	latLng: 经纬度数组	是	MAP.setCenter(36.18418, 116.162767)
getCenter	获取地图中心点	无	无	无	MAP.getCenter()
setCenterZoom	设置中心点及层级	latLng, zoom	latLng：中心点数组；zoom：层级	是	MAP.setCenterZoom(36.18418, 116.162767, 15)
addFeature	添加图层	type	type: 图层类型，String类型	是	MAP.addFeature('event')
getFeature	获取图层	type	type: 图层类型，String类型	是	MAP.getFeature('event')
removeaFeature	清除图层	type	type: 图层类型，String类型，不传则删除全部图层	·否	MAP.removeaFeature('event')
addPolyLine	绘制线	latLngs, lineType, option	latLngs：线数组,lineType：线类型, option：线配置	是，是，否	MAP.addPolyLine([36.78839127856239, 116.68853759765626, 36.789954, 116.725273], 'line')
clearPolyLine	清除线	lineType	线类型，String	是	MAP.clearPolyLine('line')
addCricle	绘制圆形	latLng,cricleType radius	latLng：中心点, cricleType: 类型，radius：半径	是，是，否	MAP.addCricle(36.789954, 116.725273, 'cricle')
clearCricle	清除圆形	cricleType	cricleType: 类型，	是	MAP.clearCricle('cricle')
addOneMarker	添加点位	detail，clickEvent，showDetail	detail：点位详情，其中要包含isCluster和markerType字段，isCluster表示是否聚合，markerType表示点位类型，clickEvent：点位点击事件，showDetail：是否显示详情	是，否，否
clearMarker	删除点位	type	点位类型	是	MAP.clearMarker('event')
addAreaPolygon	绘制地理边界	data, callback, showName , color, fillColor	data：网格边界数据, callback：网格的点击回调, showName ：是否显示网格标注,如果需要展示网格标注，请在网格边界数据中心添加groupName字段， color：网格边界颜色, fillColor：网格填充色	是，否，否，否，否	MAP.addAreaPolygon(data, this.gridClick, true)
clearAreaPolygon	清除地理边界	无	无	无	MAP.clearAreaPolygon()
addHeatMap	绘制热力图	data, type	data：热力图数据, type：热力图类型	是，是
clearHeatmap	清除热力图	type	热力图类型	是	MAP.clearHeatmap('equipment')
clearWMS	清除WMS图层	无	无	无	MAP.clearWMS()
addWMS	添加WMS图层	无	无	无	MAP.addWMS()