Openlayer add mark及添加hover效果实例详解

const iconStyle = () =>
  new Style({ image: new Icon({ scale: 0.2, src: image }) });
const addFeature = (point: Coordinate) =>
  new Feature({
    geometry: new Point(Proj.fromLonLat(point)),
    properties,
    name: "当前位置",
    population: 4000,
    rainfall: 500,
  });
const pointSource = new VectorSource({
  features: [addFeature(point)],
});
const clusterSourceForLayer = new Cluster({
  source: pointSource,
  distance: 50,
});
const pointLayer = new VectorLayer({
  source: clusterSourceForLayer,
  zIndex: 3,
  style: iconStyle,
});
map.addLayer(pointLayer);
pointLayer.set("baseMap", "iconLayer");

const iconStyle = () =>
  new Style({ image: new Icon({ scale: 0.2, src: image }) });
const pointSource = new VectorSource({
  features: new GeoJSON().readFeatures(geojson, {
    dataProjection: "EPSG:4326",
    featureProjection: "EPSG:3857",
  }),
});
const clusterSourceForLayer = new Cluster({
  source: pointSource,
  distance: 50,
});
const pointLayer = new VectorLayer({
  source: clusterSourceForLayer,
  zIndex: 3,
  style: iconStyle,
});
map?.addLayer(pointLayer);
pointLayer.set("baseMap", "iconLayer");

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "id": "customer002",
        "name": "c2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [119.777738303153, 32.91324329434815]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "id": "customerId007",
        "name": "张三"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [109.54393448864997, 35.7427088696462]
      }
    }
  ]
}

const o = new Overlay({ element: ref.current });
map?.addOverlay(o);
setOverlay(o);

const select = new Select({
  condition: pointerMove,
  hitTolerance: 1,
  layers: [iconLayer],
  style: iconStyle,
});
select.on("select", (e) => {
  const { selected } = e;
  if (selected.length) {
    const [feature] = selected;
    const _feature = feature.get("features")[0];
    const id = _feature.get("id");
    const name = _feature.get("name");
    setContent({ name, id });
    const coordinate = feature.get("geometry").flatCoordinates;
    overlay.setPosition(coordinate);
  } else {
    overlay.setPosition(undefined);
  }
});
map?.addInteraction(select);

map.on("pointerMove", (e) => {});

useEffect(() => {
  return () => {
    // 卸载页面中的 mark
    iconSource?.getFeatures().forEach((feature) => {
      iconSource?.removeFeature(feature);
    });
  };
}, [points, iconSource]);