supermap 超图 vue webpack npm leaflet.markercluster


supermap 超图 vue webpack npm leaflet.markercluster

  • 安装
  • 使用
    • 引入
    • 使用

超图图层聚合使用的是第三方插件leaflet.markercluster，使用时需要先安装
安装

leaflet.markercluster安装说明
npm i leaflet.markercluster
安装后的目录结构：
安装后的目录

使用

引入

在对应的vue文件中引入leaflet和leaflet.markerCluster
注意引入顺序
引入leaflet和leaflet.markerCluster

使用

1
2
3
4
5
6
7
8
9
10
let clusterLayer = L.markerClusterGroup({
    2: false,
    showCoverageOnHover: false,
    zoomToBoundsOnClick: true
})
serviceResult.result.features.features.forEach(element => {
    let latLng = L.latLng(element.geometry.coordinates[1], element.geometry.coordinates[0])
    clusterLayer.addLayer(L.marker(latLng))
})
clusterLayer.addTo(_this.map)

参考：Vue-CLI and Leaflet （9）: 点聚合 Leaflet.markercluster