openlayer 实现空间查询6.4v

最近项目中用到空间查询，开始感觉很神奇。就点开百度各种搜索，最终实现结果。达到能能直接通过图层的features拿到信息。将信息渲染成列表，后面实现了发现其实不难。

这是点开窗口直接渲染列表

这是拉框过滤实现数据

```javascript
// An highlighted block
// 类型，参数，绘制形状
    this.$bus.$on(SCOPESELECTFACTOR, async ({flag, params, shape="Polygon"}) => {
      let result = null;
      if (flag === 'getAll') result = await QuerySpace.getAll(params, this.rangeVectorSource);
      if (flag === 'getSelection') {
        const source = this._checkVectorSource("rangeVectorSource"); //矢量图层Vector作为绘制层
        const layer = this._checkLayerVector("rangeLayerVector", "rangeVectorSource");
        const draw = this._checkInteractDraw('rangeSelectionDraw', 'rangeVectorSource', shape);
        result = await QuerySpace.getSelection(params, draw, source);  // 查询字段 绘制对象
        map.removeInteraction(draw); // 执行操作完移除draw
      };
      this.$bus.$emit('changeBtnCode', this.rangeVectorSource?.getFeatures());
      this.$bus.$emit('noticeChangeing', {features: result.json.features});
    });

    // 缓冲区查询
    this.$bus.$on(BUFFERQUER, async ({flag, params, shape}) => {
      let result = null;
      let features;
      const source = this._checkVectorSource("rangeVectorSource"); //矢量图层Vector作为绘制层
      const layer = this._checkLayerVector("rangeLayerVector", "rangeVectorSource");
      const draw = this._checkInteractDraw('rangeSelectionDraw', 'rangeVectorSource', shape);
      result = await QuerySpace.getBuffered(params, draw, source);  // 查询字段 绘制对象
      map.removeInteraction(draw); // 执行操作完移除draw
      source.addFeature(result.shape);
      features = source.getFeatures();
      if (features.length > 2) source.removeFeature(features[1]); // 清除多余绘制的图形
      this.$bus.$emit('changeBtnCode', this.rangeVectorSource?.getFeatures());
      this.$bus.$emit('noticeChangeing', {features: result.json.features});
    });

这个封装的代码块

/* 初始化绘制元素*/
    _checkVectorSource(source) {
      //如果没有VectorSource则进行创建
      if (this[source] === null) {
        this[source] = initDrawElements.DrawVectorSource();
      }
      return this[source];
    },
    _checkLayerVector(layer, source) {
      //如果没有LayerVector则进行创建
      if (this[layer] === null) {
        this[layer] = initDrawElements.LayerVector(layer);
        this[layer].setSource(this[source]);
        this.map.addLayer(this[layer]);
      }
      return this[layer];
    },
    _checkInteractDraw(draw, source, shape) {
      let geometryFunction = undefined;
      if (this[draw] !== null) map.removeInteraction(this[draw]);
      if (shape === 'Square' || shape === 'LineString') geometryFunction = ol.interaction.Draw.createBox();
      this[draw] = interactionDraw(this[source], {type: shape, geometryFunction});
      map.addInteraction(this[draw]);
      return this[draw];
    },

// 附属文件配置
export const EPSG3857 = 'EPSG:3857';
export const EPSG4326 = 'EPSG:4326';
export const EPSG900913 = 'EPSG:900913';

export const initDrawElements = {
  //根据类型生成要素
  FeatureFactory: (featureTpye,coordinate) => {
    switch(featureTpye){
      case 'Point':{
        return new ol.Feature({
          geometry: new ol.geom.Point(coordinate)
        })
        break;
      }         
      case 'LineString':{
        return new ol.Feature({
          geometry: new ol.geom.LineString([coordinate[0],coordinate[1]])
        })
        break;
      }
      case 'Circle': {
        let circleIn3857 = new ol.geom.Circle(transform(coordinate[0], 'EPSG:4326', 'EPSG:3857'),coordinate[1],'XY');
        let circleIn4326 = circleIn3857.transform('EPSG:3857','EPSG:4326');
        return new ol.Feature({
          geometry: circleIn4326
        })
       break;
      }
      case 'Square': {
        let circleIn3857 = new ol.geom.Circle(transform(coordinate[0], 'EPSG:4326', 'EPSG:3857'), coordinate[1],'XY');
        let circleIn4326 = circleIn3857.transform('EPSG:3857','EPSG:4326');
        let Square = new ol.geom.Polygon.fromCircle(circleIn4326, 4 ,150)
        return new ol.Feature({
          geometry:  Square
        })
      }
      case 'Rectangle':{
        let Rectangle = new ol.geom.Polygon.fromExtent(coordinate)
        let ret = null
        try{
          ret = new ol.Feature({
            geometry: Rectangle
          })
          return ret;
        }
        catch(ex){
          this.$message.error(ex)
          return;
        }

      }
      case 'Polygon':{
        let Polygon = new olPolygon([coordinate])
        return new olFeature({
          geometry: Polygon
        })
      }
    }
  },
  /**
   * 根据类型生成样式
   *  */
  StyleFactory: (featureTpye, label) => {
    switch(featureTpye) {
      case 'Point': {
        return new ol.style.Style({
          // image: new ol.style.Circle({
          //   radius: 10,
          //   fill: new ol.style.Fill({ color: "red", opacity: 1 })
          // }),
          text: new ol.style.Text({ //文本样式
            font: '12px Calibri,sans-serif',
            text: label,
            fill: new ol.style.Fill({
              color: 'white'
            }),
            offsetY: -55,
            stroke: new ol.style.Stroke({
              color: 'red',
              width: 2
            }),
          }),
          image: new ol.style.Icon({
              anchor: [0.5, 80],
              anchorXUnits: 'fraction',
              anchorYUnits: 'pixels',
              scale: .6,
              src: require('./8.png')
            })
        })
        
      }
      case 'LineString': {
        return new ol.style.Style({
           //填充色
           fill: new Fill({
             color: 'rgba(255, 255, 255, 0.2)'
           }),
           //边线颜色
           stroke: new ol.style.Stroke({
              color: '#0099FF',
              width: 5
           }),
           //形状
           image: new ol.style.Circle({
              radius: 7,
              fill: new ol.style.Fill({
                  color: '#ffcc33'
              })
           })
        })
      }
      case 'Circle': {
        return new ol.style.Style({
          //填充色
          fill: new ol.style.Fill({
            color: 'rgba(255, 255, 255, 0.5)'
          }),
          //边线颜色
          stroke: new ol.style.Stroke({
              color: '#0099FF',
              width: 6
          }),
          //形状
          image: new ol.style.Circle({
              radius: 7,
              fill: new Fill({
                  color: '#ffcc33'
              })
          })
        })
      }
      case 'Square': {
        return new ol.style.Style({
          //填充色
          fill: new ol.style.Fill({
            color: 'rgba(255, 255, 255, 0.8)'
          }),
          //边线颜色
          stroke: new ol.style.Stroke({
              color: 'red',
              width: 2
          }),
          //形状
          image: new ol.style.Circle({
              radius: 7,
              fill: new Fill({
                  color: '#0099FF'
              })
          })
        })
      }
      case 'Polygon': {
        return new ol.style.Style({
          //填充色
          fill: new ol.style.Fill({
            color: 'rgba(255, 255, 255, 0.8)'
          }),
          //边线颜色
          stroke: new ol.style.Stroke({
              color: '#0099FF',
              width: 2
          }),
          //形状
          image: new ol.style.Circle({
              radius: 7,
              fill: new ol.style.Fill({
                  color: '#0099FF'
              })
          })
        })
      }
    }
  },
  /* 传当前绘制draw 经纬度 类型为[111, 22]*/ 
  BufferMark: (evt, distance) => {
    const geometry = evt.feature.getGeometry();
    const corrdinates = geometry.getCoordinates();
    const center = ol.proj.transform(corrdinates, EPSG3857, EPSG4326);
    const point =  turf.point(center);
    const buffered = turf.buffer(point, distance, {units: 'kilometers'});
    const points_buffered = new ol.format.GeoJSON().readFeature(buffered);
    return points_buffered.getGeometry().transform(EPSG4326, EPSG3857);
  },


  DrawVectorSource : () => {return new ol.source.Vector()},

  LayerVector:(name) =>{ return new ol.layer.Vector({name}) } 
};

export const interactionDraw = (source, data) => {
  return new ol.interaction.Draw({
    source: source,
    type: data.type,
    geometryFunction: data.geometryFunction,
    maxPoints: data.maxPoints,
 })
}

https://blog.csdn.net/Anonymous996/article/details/110916165 地址有查询 缓冲区 测试相关的函数 配合着使用。