SuperMap实现矢量底图叠加图层，聚合打点

SuperMap实现矢量底图叠加图层，聚合打点

1、SuperMap开发指南：iClient for Leaflet 开发指南

2、初始化地图：矢量底图叠加图层（wmtsLayer、tiledMapLayer）

详细介绍移步官网：iClient for Leaflet API

let map
map = L.map("map", {
        center: [34.6521354,107.3865423], // 中心点经纬度
        zoom: 1,
        maxZoom: 11,
        // minZoom: 1,
        attributionControl: false, // 移除右下角leaflet标识
        crs: L.Proj.CRS("EPSG:2785", {
             scales: 1, // 比例尺数组
             resolutions: [], // 分辨率数组
             bounds: L.bounds([经纬度],[经纬度]) // 范围
         })
      })

      var url = "http://xxxxxx/xxx" // 矢量底图（换成自己所需的）
      var url2 = "http://xxxxxx/xxx" // 叠加图层（换成自己所需的）

      new L.supermap.wmtsLayer(url,
      {
          layer: "xxxx", // 显示的图层
          style: "default", // 图层样式
          tilematrixSet: "xxxx",  // 瓦片矩阵集
          format: "image/png", // wmts 图像格式（'image/png'用于具有透明度的图层）
          requestEncoding: 'KVP', // KVP 或者 REST 的请求方式
      }
      ).addTo(map)

      new L.supermap.tiledMapLayer(url2,
      {
          layersID: "", // 获取进行切片的地图图层 ID，即指定进行地图切片的图层，可以是临时图层集，也可以是当前地图中图层的组合
      }
      ).addTo(map);

3、实现聚合打点（markerClusterGroup、marker）

官网示例：https://iclient.supermap.io/examples/leaflet/editor.html#12_markerCluster

// 聚合
let resultLayer
resultLayer = L.markerClusterGroup({
    spiderfyOnMaxZoom: true,
    showCoverageOnHover: false, //设置为true时显示聚类所占据的范围
    zoomToBoundsOnClick: false, //设置为true时会向低一级聚类缩放
    maxClusterRadius: 40  // 最小聚类距离，默认80
})

// 打点
let list = [
    { name: '北京', latitude: '', longitude: '' },
    { name: '上海', latitude: '', longitude: '' }
]

// 添加地图标记点
let markerList = []
for (var i = 0; i < list.length; i++) {
    let html = '<div>要展示的内容</div>'
    // icon
    var iconMarker = new L.Icon({
        iconUrl: 'xxxxx',
        iconSize: [18, 18]
    })
    // marker latitude、longitude为Number
    var marker
    marker =  L.marker([list[i].latitude, list[i].longitude], {
        icon: iconMarker,
    }).bindPopup(html)
    markerList.push(marker)
    resultLayer.addLayer(marker)
}

map.addLayer(resultLayer)