openlayers高级视图定位
先看效果图
image.png
其实中间的框是由四个div框出来的
image.png
为他们分别设置样式
image.png
这样就能让地图的四周模糊中间清晰
对于那三个功能则是只要利用了两个函数
view.fit(polygon, {padding: [170, 50, 30, 150]});
view.centerOn(point.getCoordinates(), size, [570, 500]);
view.fit作用是定位到一个范围(屏幕的范围) 所以传参是 {padding: [170, 50, 30, 150]}
view.conterOn是定位到一个点(屏幕的点) 所以传参是[570, 500]
框选功能
1.在map中加入select
image.png
2.加入DragBox(因为需要将选择的元素放入DragBox中进行处理)
image.png
3.判断窗口是否倾斜 如果不倾斜则将select选中的元素放入candidateFeatures 变量
image.png
4.将选择的元素加入到candidateFeatures 中
image.png
5.
image.png
聚集点
聚集点功能主要是靠一个ol/source/Cluster类 这是一个source
参数如下
image.png
我们可以看到 往其中传入一个含有特征点的vectorSource 这个类就会对该vectorSource进行包装,生成一个聚类的source
然后就可以创建vectorLayer显示该source
示例步骤如下
image.png
2.生成ClusterSource
image.png
3.然后将该ClusterSource放入vectorLayer中 再放入map中显示就好
4.设置点击要素点就放大到该像素点的功能
image.png
