如果有多个点的话,可以生成多个 feature
(循环调用 addFeature
)
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");
用 geojson
去渲染 mark
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");
生成 geojson
的方式:
@turf/helpers
,它提供了 point
、featureCollection
等方法{ "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] } } ] }
overlay
需要一个 dom
元素,这里是用过 ref
获取的
const o = new Overlay({ element: ref.current }); map?.addOverlay(o); setOverlay(o);
用 select
去做,它有个 select
事件
它事件参数中,有个 selected
,如果不是空数组,说明你鼠标正在 hover mark
,就可以弹出 popover
,显示你想要显示的内容
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);
用 select
去做,本质也是通过 pointerMove
事件,所以可以直接在 map
上监听 pointerMove
事件
具体的实现方式我没有去尝试,通过上面的推断,我觉得是可行的
map.on("pointerMove", (e) => {});
通过 useEffect
返回的函数清理地图中的 mark
useEffect(() => { return () => { // 卸载页面中的 mark iconSource?.getFeatures().forEach((feature) => { iconSource?.removeFeature(feature); }); }; }, [points, iconSource]);
我没有搞清楚他们之间的区别,目前了解的是:
addLayer
:是添加图层,图层分为:
Tile
(图片)Vector
(geojson
、lerc
)VectorTile
(pbf
)addInteraction
:添加 Select
和 Modify
addOverlay
:添加 Overlay
和 Control
Popover
可以用 Overlay
去做