超图openlayers

地图边界

地图边界json数据取自http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=33.521903996156105&lng=104.29849999999999&zoom=4

import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import GeoJSON from 'ol/format/GeoJSON'
import {Circle, Fill, Stroke, Style} from 'ol/style'

let json = require('./json/hefei.json')
let features = (new GeoJSON({ featureProjection: 'EPSG:4326' })).readFeatures(json)
var vectorSource = new VectorSource({ features: features })
let lineLayer = new VectorLayer({
  zIndex: 99,
  source: vectorSource,
  style: new Style({
    stroke: new Stroke({
      color: 'red',
      width: 3
    }),
    fill: new Fill({
       color: 'rgba(0, 0, 255, 0.1)'
    })
  })
})
this.map.addLayer(lineLayer) // 把图层添加到地图

参考：https://blog.csdn.net/weixin_42776111/article/details/125103005?utm_medium=distribute.pc_relevant.none-task-blog-2_defaultbaidujs_baidulandingword~default-0-125103005-blog-96479717.pc_relevant_blogantidownloadv1&spm=1001.2101.3001.4242.1&utm_relevant_index=2

地图点聚合

let coord
let feature
 let coords = []
 points.forEach(item => {
   coord = [item.lng, item.lat]
   feature = new Feature({
     geometry: new Point(coord)
   })
   coords.push(feature)
 })
 const clusterSource = new Cluster({
   // distance: 10, // 要素将被聚合在一起的像素距离，默认为20
   // minDistance: 20, // 聚合块之间的最小像素距离，默认为零
   source: new VectorSource({
     features: coords
   })
 })
 const clusters = new VectorLayer({
   source: clusterSource,
   name: 'clusterLayer',
   zIndex: 1,
   style: function (feature, resolution) {
     var size = feature.get('features').length
     // 如果是聚合数为1也就是最底层的则是定位图标
     if (size === 1) {
       return new Style({
         image: new Icon({
           src: icon,
           imgSize: [40, 40],
           scale: 0.7 // 缩放倍数
         })
       })
     } else {
       // 这里设置聚合部分的样式
       return new Style({
         image: new Icon({
           anchor: [0.5, 0.4],
           src: require('../../assets/image/point.png')
         }),
         text: new Text({
           text: size.toString(),
           fill: new Fill({
             color: 'white',
             font: '20px'
           })
         })
       })
     }
   }
 })
 this.map.addLayer(clusters)

参考：
https://www.csdn.net/tags/MtTaggysNjgyOTgtYmxvZwO0O0OO0O0O.html
https://blog.csdn.net/weixin_44727080/article/details/120199240