一、效果

如图所示，地图缩小（即比例尺放大）时，显示聚合小绿点；

地图放大（比例尺缩小）时，展示具体船舶符号：

二、思路

1）设置2个图层，一个展示聚合小绿点；一个展示具体船舶符号。
2）它们通过设置minZoom和maxZoom属性来控制图层的显隐。缩小时，聚合小绿点图层显示，具体船舶符号图层隐藏；放大时，相反。

三、实现

1、上代码

import React, { useEffect, useRef } from 'react';
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import { fromLonLat } from 'ol/proj';
import WebGLPointsLayer from 'ol/layer/WebGLPoints';
import { Vector as VectorSource } from 'ol/source';
import { Feature } from 'ol';
import { Point } from 'ol/geom';
import Cluster from 'ol/source/Cluster';const MapComponent = () => {const mapRef = useRef();useEffect(() => {const map = new Map({target: mapRef.current,layers: [new TileLayer({source: new OSM()})],view: new View({center: fromLonLat([0, 0]),zoom: 2})});const vectorSource = new VectorSource();const clusterSource = new Cluster({distance: 3,source: vectorSource});const shipLayer = new WebGLPointsLayer({source: vectorSource,style: {symbol: {symbolType: 'image',src: 'path/to/ship-icon.png',size: 20,rotateWithView: false,displacement: [0, 0]}},minZoom: 10, // 显示船舶符号的最小缩放级别maxZoom: Infinity // 无限大，表示不会因为缩放级别过大而隐藏});const clusterLayer = new WebGLPointsLayer({source: clusterSource,style: {symbol: {symbolType: 'square', // 使用方块size: 8,color: 'rgba(0, 230, 0, 1)',rotateWithView: false,displacement: [0, 0],opacity: 1,stroke: {color: 'rgba(0, 230, 0, 1)',width: 1}}},minZoom: 0, // 显示聚合点的最小缩放级别maxZoom: 10 // 显示聚合点的最大缩放级别});map.addLayer(shipLayer);map.addLayer(clusterLayer);return <div ref={mapRef} style={{ width: '100%', height: '400px' }}></div>;
}));export default MapComponent;

2、代码解释

openlayers中，图层（layer）会有一个数据来源（source）。其中，简单小点图层的数据来源，又来源于具体船舶图层的数据来源。

1）数据来源：

const vectorSource = new VectorSource();
const clusterSource = new Cluster({distance: 3,source: vectorSource
});

2）图层：

const shipLayer = new WebGLPointsLayer({source: vectorSource,。。。
});const clusterLayer = new WebGLPointsLayer({source: clusterSource,。。。
});

3）图层设置缩放属性，控制显隐：

const shipLayer = new WebGLPointsLayer({。。。minZoom: 10, // 显示船舶符号的最小缩放级别maxZoom: Infinity // 无限大，表示不会因为缩放级别过大而隐藏。其实不设置也可以
});const clusterLayer = new WebGLPointsLayer({。。。minZoom: 0, // 显示聚合点的最小缩放级别maxZoom: 9 // 显示聚合点的最大缩放级别
});

四、题外话

openlayers中，控制图层中的对象变化特别简单，只需操作source里面的feature就可以了。