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

2022-11-21 115阅读 0评论

?=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,它提供了 pointfeatureCollection 等方法
{   "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图片)矢量:Vectorgeojsonlerc)矢量栅格:VectorTilepbfaddInteraction:添加 SelectmodifyaddOverlay:添加 OverlayControlPopover 可以用 Overlay 去做

以上就是Openlayer add mark及添加hover效果实例详解的详细内容,更多关于openlayer添加mark hover效果的资料请关注云初冀北其它相关文章!

免责声明
本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:Goliszhou@gmail.com
$

发表评论

表情:
评论列表 (暂无评论,115人围观)

还没有评论,来说两句吧...