Openlayer?add?mark及添加hover效果實(shí)例詳解
add mark
方法一
如果有多個(gè)點(diǎn)的話(huà),可以生成多個(gè) feature
(循環(huán)調(diào)用 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: "當(dāng)前位置", 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
的方式:
- 自己手動(dòng)構(gòu)建
- 使用
@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
需要一個(gè) dom
元素,這里是用過(guò) ref
獲取的
const o = new Overlay({ element: ref.current }); map?.addOverlay(o); setOverlay(o);
方法一
用 select
去做,它有個(gè) select
事件
它事件參數(shù)中,有個(gè) selected
,如果不是空數(shù)組,說(shuō)明你鼠標(biāo)正在 hover mark
,就可以彈出 popover
,顯示你想要顯示的內(nèi)容
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
去做,本質(zhì)也是通過(guò) pointerMove
事件,所以可以直接在 map
上監(jiān)聽(tīng) pointerMove
事件
具體的實(shí)現(xiàn)方式我沒(méi)有去嘗試,通過(guò)上面的推斷,我覺(jué)得是可行的
map.on("pointerMove", (e) => {});
clear mark
通過(guò) useEffect
返回的函數(shù)清理地圖中的 mark
useEffect(() => { return () => { // 卸載頁(yè)面中的 mark iconSource?.getFeatures().forEach((feature) => { iconSource?.removeFeature(feature); }); }; }, [points, iconSource]);
方法 addInteraction、addOverlay、addLayer 區(qū)別
我沒(méi)有搞清楚他們之間的區(qū)別,目前了解的是:
addLayer
:是添加圖層,圖層分為:- 柵格:
Tile
(圖片) - 矢量:
Vector
(geojson
、lerc
) - 矢量柵格:
VectorTile
(pbf
)
- 柵格:
addInteraction
:添加Select
和Modify
addOverlay
:添加Overlay
和Control
Popover
可以用Overlay
去做
以上就是Openlayer add mark及添加hover效果實(shí)例詳解的詳細(xì)內(nèi)容,更多關(guān)于Openlayer添加mark hover效果的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Intl對(duì)象DateTimeFormat?ListFormat?RelativeTimeFormat使用講解
這篇文章主要為大家介紹了Intl對(duì)象DateTimeFormat?ListFormat?RelativeTimeFormat使用講解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06JS前端性能優(yōu)化解決內(nèi)存泄漏頁(yè)面崩潰
這篇文章主要為大家介紹了JS前端性能優(yōu)化解決內(nèi)存泄漏頁(yè)面崩潰示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07Three.js實(shí)現(xiàn)雪糕地球的使用示例詳解
這篇文章主要為大家介紹了Three.js實(shí)現(xiàn)雪糕地球的使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07JavaScript實(shí)現(xiàn)余額數(shù)字滾動(dòng)效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)余額數(shù)字滾動(dòng)效果,將傳入的帶滾動(dòng)的n位數(shù)字拆分成每一個(gè)要滾動(dòng)的數(shù),然后動(dòng)態(tài)的創(chuàng)建裝著滾動(dòng)到每一位相應(yīng)數(shù)字的容器,然后放入傳入的目標(biāo)容器中,更多詳細(xì)內(nèi)容,一起進(jìn)入下面文章學(xué)習(xí)吧2021-12-12微信小程序(應(yīng)用號(hào))開(kāi)發(fā)新聞客戶(hù)端實(shí)例
這篇文章主要介紹了微信小程序(應(yīng)用號(hào))開(kāi)發(fā)新聞客戶(hù)端實(shí)例的相關(guān)資料,需要的朋友可以參考下2016-10-10mitt tiny-emitter發(fā)布訂閱應(yīng)用場(chǎng)景源碼解析
這篇文章主要為大家介紹了mitt tiny-emitter發(fā)布訂閱應(yīng)用場(chǎng)景源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12詳解節(jié)點(diǎn)監(jiān)控相對(duì)準(zhǔn)確的計(jì)算FMP
這篇文章主要為大家介紹了節(jié)點(diǎn)監(jiān)控相對(duì)準(zhǔn)確的計(jì)算FMP詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01Uncaught EvalError:Refused to evaluate a
這篇文章主要為大家介紹了Uncaught EvalError:Refused to evaluate a string as JavaScript解決分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09微信小程序 tabs選項(xiàng)卡效果的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序 tabs選項(xiàng)卡效果的實(shí)現(xiàn)的相關(guān)資料,微信小程序內(nèi)部組件沒(méi)有Tabs 選項(xiàng)卡的功能,自己實(shí)現(xiàn)個(gè)類(lèi)似的,需要的朋友可以參考下2017-01-01