Openlayer add mark及添加hover效果实例详解
作者:uccs
这篇文章主要为大家介绍了Openlayer add mark及添加hover效果实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
add mark
方法一
如果有多个点的话,可以生成多个 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 格式
生成 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] } } ] }
hover mark
popover
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) => {});
clear mark
通过 useEffect
返回的函数清理地图中的 mark
useEffect(() => { return () => { // 卸载页面中的 mark iconSource?.getFeatures().forEach((feature) => { iconSource?.removeFeature(feature); }); }; }, [points, iconSource]);
方法 addInteraction、addOverlay、addLayer 区别
我没有搞清楚他们之间的区别,目前了解的是:
addLayer
:是添加图层,图层分为:- 栅格:
Tile
(图片) - 矢量:
Vector
(geojson
、lerc
) - 矢量栅格:
VectorTile
(pbf
)
- 栅格:
addInteraction
:添加Select
和Modify
addOverlay
:添加Overlay
和Control
Popover
可以用Overlay
去做
以上就是Openlayer add mark及添加hover效果实例详解的详细内容,更多关于Openlayer添加mark hover效果的资料请关注脚本之家其它相关文章!