openlayers点击某个瓦片高亮展示

• 使用矢量图层vectorLayer进行图层高亮, 拿到点击的那个瓦片的feature, 他是一个renderFeature ,

• 不是创建矢量图层时需要的Feature, 需要将renderFeature

• 通过获取他的几何图形坐标,通过一个二维数组的数组生成Polygon ,

• 通过Polygon 创建一个geometry,在创建Feature

详细构建参数请参考openlayers API :
openlayers API

import Feature from "ol/Feature";
import Polygon from "ol/geom/Polygon";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";

removeHighLightLayer() {
      // 移除高亮矢量图层
      if (this.vectorLayer) {
        this.map.removeLayer(this.vectorLayer);
      }
    },

initSingleClickEventLister() {
      const that = this;
      //为图层增加点击事件，查看图层属性字段,不希望点击到的图层，可以在geoserver中将图层queryable去掉勾选
      this.map.on("singleclick", (evt) => {
        if (this.isDraw) {
          return;
        }
        // 移除高亮矢量图层
        that.removeHighLightLayer();

        // 定义状态值，只取一个图层上的feature，即如果取到了房屋图层的要素，就不显示宅基地的要素信息
        let hasSelected = 0;
        this.map.forEachFeatureAtPixel(
          evt.pixel,
          (feature) => {
            console.log(feature)
            if (hasSelected > 0) {
              return false;
            }
            let record = feature.getProperties();
            let selection = {};
            selection[feature.getId()] = feature;
            //转二维数组
            //每一行 有108 和34两个值 所以下面 取余 相除都是 2
            let arr = new Array();
            let baseArray = feature.getGeometry().getFlatCoordinates();
            let len = baseArray.length;
            let lineNum = len % 2 === 0 ? len / 2 : Math.floor(len / 2 + 1);
            for (let i = 0; i < lineNum; i++) {
              let temp = baseArray.slice(i * 2, i * 2 + 2);
              arr.push(temp);
            }
            //创建高亮层
            that.vectorLayer = new VectorLayer({
              source: new VectorSource({
                features: [
                  new Feature({
                  //这里new Polygon 构造时 需要传一个数组其元素由二维数组构成
                    geometry: new Polygon([arr]),
                  }),
                ],
              }),
              zIndex: 3,
              style: that.highlightStyle,//高亮样式
            });
            that.map.addLayer(that.vectorLayer);
            hasSelected++;
            //弹出详情框
            this.$refs.information.showInit(record);
          },
          {
            hitTolerance: 0, // 点击面不需要缓冲区，点或线等不容易被点中的可以加缓冲区帮助点中
            layerFilter: function f(obj) {
              //必须是有意义图层, 即mapping中定义的图层，避免其他绘制的临时图层
              return new Set(mapconfig.mapping.mapLayers.keys()).has(
                obj.get("name")
              );
            },
          }
        );
      });
    },

拓展

这个思路适合点击的瓦片是整体展示的,且该方法实现的性能较好.

还有一种思路是使用VectorTileLayer,
数据源放入当前layer的source,而不是上述方法中的
点击直接在生成一层图层,拿出地块id一样的区域进行高亮,这个性能较差,需要遍历全部的瓦片信息,但是不会出现高亮区域不全是自己需要的
这里 我画个图:

现象描述:
如上图,红色框为地块,蓝色线将地图信息分割为不同的瓦片或其他的元素.
期望效果,点击红色任意部分,红色全部高亮.
期望效果:

进行矢量图层的:
点击左下角时, 只有左下角的红色部分高亮,而红色地块其余部分并未高亮
如图:
在这里插入图片描述

原因:
这是因为此时点击返回的是点击的地块所在瓦片的那一部分的几何图形的坐标集合. 而不是我们需要的整个地块的坐标集合

源码地址:

https://github.com/qlanto224/mmap