openlayers高級(jí)視圖定位
先看效果圖
image.png
其實(shí)中間的框是由四個(gè)div框出來(lái)的
image.png
為他們分別設(shè)置樣式
image.png
這樣就能讓地圖的四周模糊中間清晰
對(duì)于那三個(gè)功能則是只要利用了兩個(gè)函數(shù)
view.fit(polygon, {padding: [170, 50, 30, 150]});
view.centerOn(point.getCoordinates(), size, [570, 500]);
view.fit作用是定位到一個(gè)范圍(屏幕的范圍) 所以傳參是 {padding: [170, 50, 30, 150]}
view.conterOn是定位到一個(gè)點(diǎn)(屏幕的點(diǎn)) 所以傳參是[570, 500]
框選功能
1.在map中加入select
image.png
2.加入DragBox(因?yàn)樾枰獙⑦x擇的元素放入DragBox中進(jìn)行處理)
image.png
3.判斷窗口是否傾斜 如果不傾斜則將select選中的元素放入candidateFeatures 變量
image.png
4.將選擇的元素加入到candidateFeatures 中
image.png
5.
image.png
聚集點(diǎn)
聚集點(diǎn)功能主要是靠一個(gè)ol/source/Cluster類(lèi) 這是一個(gè)source
參數(shù)如下
image.png
我們可以看到 往其中傳入一個(gè)含有特征點(diǎn)的vectorSource 這個(gè)類(lèi)就會(huì)對(duì)該vectorSource進(jìn)行包裝,生成一個(gè)聚類(lèi)的source
然后就可以創(chuàng)建vectorLayer顯示該source
示例步驟如下
image.png
2.生成ClusterSource
image.png
3.然后將該ClusterSource放入vectorLayer中 再放入map中顯示就好
4.設(shè)置點(diǎn)擊要素點(diǎn)就放大到該像素點(diǎn)的功能
image.png
