Bootstrap

openlayer 加载geoserver发布的矢量瓦片图层(pbf格式)的一些问题。

背景:本来用的是珊格瓦片,但是考虑到矢量瓦片具有更多优势,于是采用了矢量瓦片。

  1. 前端通过openlayer 加载geoserver发布的矢量瓦片图层,这一步通过查找资料实现了 矢量图层渲染
  2. 后面需求是需要点击地图上的某个要素进行选择,需要改变要素样式
  3. 通过给map添加点击事件,然后通过getFeatureAtPixel 获取到点击的像素下的要素
  4. 拿到这个要素,暂定为feature吧,然后通过feature.setStyle来改变样式,然后就报错了,说setStyle is not a function
  5. 然后打印出来这个feature,发现上面没有setStyle方法,

在这里插入图片描述可以看到这并不是一个真正意义上的feature对象,而是一个renderFeature类型的对象

  1. 奇怪的是,如果换成其他方法创建的矢量源VectorSource的话,这个要素就是feature对象,换句话说,就是如果加载的是 GeoServer 发布的 PBF 格式的数据,并使用 OpenLayers 进行渲染,点击地图获取到的是 Rendereature 对象而不是完整的 Feature 对象
  2. 最后了解到: 如果openlayer 加载geoserver发布的矢量数据时(如PBF格式),openlayer会在内部将数据解析为renderFeature对象来进行显示和渲染,renderFeature对象不是feature对象,所以没有feature对象具有的属性或方法。
  3. renderFeature 是openlayer用于绘制和显示要素信息的内部对象,可以通过getProperties方法拿到具体的要素信息,所以说也存在数据信息安全的问题
  4. 最后如果想实现点击要素让这块高亮的话,就需要考虑其他方法了,比如点击给后端发送一个请求,然后返回具体的坐标进行绘制渲染图层。
    10.以上是我自己查询资料和自己的见解,可能描述的不是很精确和全面,请酌情考虑
;