openlayers 实现空间查询和测量的提取的的代码块

测量类型

// An highlighted block
// 测量相关
export const Measures = {
  draw: null,
  helpMsg: '',
  sketch: null,             // 当前绘制的要素
  helpTooltipElement: null, // 帮助工具提示元素。
  helpTooltip: null,          // 覆盖以显示帮助消息.
  measureTooltipElement: null,// 度量工具提示元素
  measureTooltip: '',       // 覆盖以显示测量值。
  continuePolygonMsg: '继续点击绘制多边形',     // 用户绘制多边形时显示的消息
  continueLineMsg: '继续点击绘制线',            // 用户绘制线条时显示的消息
  measures(map, measureType, VectorSource) {   // 传入3个参数，map 绘制类型 矢量图层
    let _this = this;
    map.on('pointermove', pointerMoveHandler);

    map.getViewport().addEventListener('mouseout', function () {
      _this.helpTooltipElement.classList.add('hidden');
    });

    // 绘制前
    function addInteraction() {
      map.removeInteraction(_this.draw);
      measureType = measureType == 'area' ? 'Polygon' : 'LineString';
      _this.draw = new ol.interaction.Draw({
        source: VectorSource,
        type: measureType,
        style: style()
      });
      map.addInteraction(_this.draw);
      createMeasureTooltip();
      createHelpTooltip();
      var listener;

      _this.draw.on('drawstart', function (evt) {
        // 设置草图
        _this.sketch = evt.feature;

        var tooltipCoord = evt.coordinate;

        listener = _this.sketch.getGeometry().on('change', function (evt) {
          var geom = evt.target;
          var output;
          if (geom instanceof ol.geom.Polygon) {
            output = formatArea(geom);
            tooltipCoord = geom.getInteriorPoint().getCoordinates();
          }
          else if (geom instanceof ol.geom.LineString) {
            output = formatLength(geom);
            tooltipCoord = geom.getLastCoordinate();
          }
          _this.measureTooltipElement.innerHTML = output;
          _this.measureTooltip.setPosition(tooltipCoord);
        });
      });
      _this.draw.on('drawend', function (e) {
        _this.measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
        _this.measureTooltip.setOffset([0, -7]);
        _this.sketch = null;  // unset sketch
        _this.measureTooltipElement = null;  // 取消设置工具提示以便可以创建新的工具提示
        createMeasureTooltip();
        ol.Observable.unByKey(listener);
        map.removeInteraction(_this.draw);
        map.removeOverlay(_this.helpTooltip);
      });
    };
    function style() {
      return new ol.style.Style({
        fill: new ol.style.Fill({ color: 'rgba(255, 255, 255, 0.2)' }),
        stroke: new ol.style.Stroke({ color: '#0099FF', solid: [10, 10], width: 2 }),
        image: new ol.style.Circle({ radius: 5, stroke: new ol.style.Stroke({ color: 'rgba(0, 0, 0, 0.7)' }),
        fill: new ol.style.Fill({ color: 'rgba(255, 255, 255, 0.2)' })
        })
      })
    };
    // 创建新的帮助工具提示
    function createHelpTooltip() {
      if (_this.helpTooltipElement) {
        _this.helpTooltipElement.parentNode.removeChild(_this.helpTooltipElement);
      }
      _this.helpTooltipElement = document.createElement('div');
      _this.helpTooltipElement.className = 'ol-tooltip hidden';
      _this.helpTooltip = new ol.Overlay({
        element: _this.helpTooltipElement,
        offset: [15, 0],
        positioning: 'center-left',
      });
      map.addOverlay(_this.helpTooltip);
    };
    // 创建新的度量工具提示
    function createMeasureTooltip() {
      if (_this.measureTooltipElement) {
        _this.measureTooltipElement.parentNode.removeChild(_this.measureTooltipElement);
      }
      _this.measureTooltipElement = document.createElement('div');
      _this.measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';
      _this.measureTooltip = new ol.Overlay({
        element: _this.measureTooltipElement,
        offset: [0, -15],
        positioning: 'bottom-center',
      });
      map.addOverlay(_this.measureTooltip);
    };
    // 长度测量
    function formatLength(line) {
      var length = ol.sphere.getLength(line);
      var output;
      if (length > 100) {
        output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km';
      } else {
        output = Math.round(length * 100) / 100 + ' ' + 'm';
      }
      return output;
    };
    // 区域测量
    function formatArea(polygon) {
      var area = ol.sphere.getArea(polygon);
      var output;
      if (area > 10000) {
        output = Math.round((area / 1000000) * 100) / 100 + ' ' + 'km<sup>2</sup>';
      } else {
        output = Math.round(area * 100) / 100 + ' ' + 'm<sup>2</sup>';
      }
      return output;
    };
    // 移动提示节点
    function pointerMoveHandler(evt) {
      if (evt.dragging) return
      _this.helpMsg = '单击开始绘制';
      if (_this.sketch) {
        let geom = _this.sketch.getGeometry();
        if (geom instanceof ol.geom.Polygon) { _this.helpMsg = _this.continuePolygonMsg; }
        else if (geom instanceof ol.geom.LineString) { _this.helpMsg = _this.continueLineMsg; }
      }
      _this.helpTooltipElement.innerHTML = _this.helpMsg;
      _this.helpTooltip.setPosition(evt.coordinate);
      _this.helpTooltipElement.classList.remove('hidden');
    }
    addInteraction()
  },
  // 移除测量动作
  removeInteraction(map) {
    map.removeInteraction(this.draw);
    map.removeOverlay(this.helpTooltip);
  },
};

// A code block
Measures.measures(this.map, measureType, this.MeasureVector); // 传递map, 测量类型， 矢量图层

空间查询代码块

// An highlighted block
// 空间查询
import { EPSG3857, EPSG4326, EPSG900913 } from './index';
import store from '@/store'
export const QuerySpace = {
  // 获取所有列表
  getAll(params = {
    装备编号: '',
    装备名称: '',
    使用状态: '',
    所属单位: '',
  }, source) {
    let featureRequest = null;
    const geometry = source?.getFeatures()[source?.getFeatures().length-1]?.getGeometry();
    return new Promise(resolve => {
      const result = new Promise(resolve => {
        if (!geometry) {
          featureRequest = new ol.format.WFS().writeGetFeature({
            srsName: EPSG900913,   //坐标系统
            featureNS: window.base_url.spatial_query_url,//命名空间 URI
            featurePrefix: 'hbsdzy',  //工作区名称
            featureTypes: ['hbsdzy:zb'],//查询图层，可以是同一个工作区下多个图层，逗号隔开
            outputFormat: 'application/json',
            filter: ol.format.filter.and(
              ol.format.filter.like('装备编号', '*' + params['装备编号']),
              ol.format.filter.like('装备名称', '*' + params['装备名称']),
              ol.format.filter.like('使用状态', '*' + params['使用状态'] + '*'),
              ol.format.filter.like('所属单位', '*' + params['所属单位'] + '*'),
            )
          });
          resolve(featureRequest)
        }
        else {
          featureRequest = new ol.format.WFS().writeGetFeature({
            srsName: EPSG900913,//坐标系统
            featureNS: window.base_url.spatial_query_url,//命名空间 URI
            featurePrefix: 'hbsdzy',//工作区名称
            featureTypes: ['hbsdzy:zb'],//查询图层，可以是同一个工作区下多个图层，逗号隔开
            outputFormat: 'application/json',
            filter: ol.format.filter.and(
              ol.format.filter.within("geom", geometry),  //前者是属性名，后者是对应值
              // ol.format.filter.or(
                ol.format.filter.like('装备编号', '*' + params['装备编号']),
                ol.format.filter.like('装备名称', '*' + params['装备名称']),
                ol.format.filter.like('使用状态', '*' + params['使用状态'] + '*'),
                ol.format.filter.like('所属单位', '*' + params['所属单位'] + '*'),
              // )
            )
          });
          resolve(featureRequest)
        }
      })
      result.then(data => {
        fetch(window.base_url.spatial_request_url, { method: 'POST', body: new XMLSerializer().serializeToString(data)})
        .then(response => response.json()).then(json => resolve({json}))
      })
    });
    
  },
  // 框选获取列表
  getSelection(params, draw, source) {
    /*
    1:  输入搜索 回车事件 调用all
    2： 拉框绘制  调用sele
    3： 有文字时 拉框绘制 调用sele
    4： 存在框选 输入文字 回车事件 调用sele
    */
    return new Promise(resolve => {
      const result = new Promise(res => {
        let featureRequest = null;
        const geometry = source?.getFeatures()[0]?.getGeometry();
        if (!geometry) { // 表示没有绘制
        draw.on('drawend', evt => {
          featureRequest = new ol.format.WFS().writeGetFeature({
            srsName: EPSG900913,//坐标系统
            featureNS: window.base_url.spatial_query_url,//命名空间 URI
            featurePrefix: 'hbsdzy',//工作区名称
            featureTypes: ['hbsdzy:zb'],//查询图层，可以是同一个工作区下多个图层，逗号隔开
            outputFormat: 'application/json',
            filter: ol.format.filter.and(
              ol.format.filter.intersects("geom", evt.feature.getGeometry()),  //前者是属性名，后者是对应值
              // ol.format.filter.or(
                ol.format.filter.like('装备编号', '*' + params['装备编号']),
                ol.format.filter.like('装备名称', '*' + params['装备名称']),
                ol.format.filter.like('使用状态', '*' + params['使用状态'] + '*'),
                ol.format.filter.like('所属单位', '*' + params['所属单位'] + '*'),
              // )
            )
          });
          res(featureRequest)
        });
        }
        else {  // 存在绘制图形
          featureRequest = new ol.format.WFS().writeGetFeature({
            srsName: EPSG900913,//坐标系统
            featureNS: window.base_url.spatial_query_url,//命名空间 URI
            featurePrefix: 'hbsdzy',//工作区名称
            featureTypes: ['hbsdzy:zb'],//查询图层，可以是同一个工作区下多个图层，逗号隔开
            outputFormat: 'application/json',
            filter: ol.format.filter.and(
              ol.format.filter.within("geom", geometry),  //前者是属性名，后者是对应值
              // ol.format.filter.or(
                ol.format.filter.like('装备编号', '*' + params['装备编号']),
                ol.format.filter.like('装备名称', '*' + params['装备名称']),
                ol.format.filter.like('使用状态', '*' + params['使用状态'] + '*'),
                ol.format.filter.like('所属单位', '*' + params['所属单位'] + '*'),
              // )
            )
          });
          res(featureRequest)
        }
      });
      result.then(data => {
        fetch(window.base_url.spatial_request_url, { method: 'POST', body: new XMLSerializer().serializeToString(data) })
        .then(response => response.json()).then(json => resolve({json}))
      });
      // end
    })
  },
  // 缓冲区
  buffered: null,                               // 生成缓冲区的数据值
  corrdinates: null,                            // 绘制后的要素
  getBuffered(params, draw, source) {
    let featureRequest;                         // 缓冲数据值
    let format = new ol.format.GeoJSON();       // 格式化类
    const distance = store.state.Map.distance;  // 取缓冲距离值
    const geometry = source?.getFeatures()[0]?.getGeometry();
    return new Promise(resolve => {
      const result = new Promise(resolve => {
        if (!geometry) {
          draw.on('drawend', evt => {
            this.corrdinates = evt.feature.getGeometry().getCoordinates();
            const center = ol.proj.transform(this.corrdinates, EPSG3857, EPSG4326);
            const point = turf.point(center);
            let buffered = turf.buffer(point, distance, { units: 'kilometers' });
            buffered = format.readFeature(buffered);
            buffered.getGeometry().transform(EPSG4326, EPSG3857);
            this.buffered = buffered;
            featureRequest = new ol.format.WFS().writeGetFeature({
              srsName: EPSG900913,//坐标系统
              featureNS: window.base_url.spatial_query_url,//命名空间 URI
              featurePrefix: 'hbsdzy',//工作区名称
              featureTypes: ['hbsdzy:zb'],//查询图层，可以是同一个工作区下多个图层，逗号隔开
              outputFormat: 'application/json',
              filter: ol.format.filter.and(
                ol.format.filter.intersects("geom", buffered.getGeometry()),  //前者是属性名，后者是对应值
                // ol.format.filter.or(
                  ol.format.filter.like('装备编号', '*' + params['装备编号']),
                  ol.format.filter.like('装备名称', '*' + params['装备名称']),
                  ol.format.filter.like('使用状态', '*' + params['使用状态'] + '*'),
                  ol.format.filter.like('所属单位', '*' + params['所属单位'] + '*'),
                // )
              )
            });
            resolve(featureRequest);
          });
        }
        else {
          const center = ol.proj.transform(this.corrdinates, EPSG3857, EPSG4326);
          const point = turf.point(center);
          this.buffered = turf.buffer(point, distance, { units: 'kilometers' });
          this.buffered = format.readFeature(this.buffered);
          this.buffered.getGeometry().transform(EPSG4326, EPSG3857);

          featureRequest = new ol.format.WFS().writeGetFeature({
            srsName: EPSG900913,//坐标系统
            featureNS: window.base_url.spatial_query_url,//命名空间 URI
            featurePrefix: 'hbsdzy',//工作区名称
            featureTypes: ['hbsdzy:zb'],//查询图层，可以是同一个工作区下多个图层，逗号隔开
            outputFormat: 'application/json',
            filter: ol.format.filter.and(
              ol.format.filter.within("geom", this.buffered.getGeometry()),
              // ol.format.filter.or(
                ol.format.filter.like('装备编号', '*' + params['装备编号']),
                ol.format.filter.like('装备名称', '*' + params['装备名称']),
                ol.format.filter.like('使用状态', '*' + params['使用状态'] + '*'),
                ol.format.filter.like('所属单位', '*' + params['所属单位'] + '*'),
              // )
            )
          });
          resolve(featureRequest);
        };
      });
      result.then(data => {
        fetch(window.base_url.spatial_request_url, { method: 'POST', body: new XMLSerializer().serializeToString(data) })
        .then(response => response.json()).then(json => resolve({json, shape: this.buffered}))
      });
    })
  }
};

// A code block

map.removeInteraction(Draw); // 执行操作完移除draw；

空间查询和缓冲区查询清除操作

// 清除查询
    this.$bus.$on(CLEARSCOPEFACTOR, () => {
      const layers = this.map.getLayers().getArray();
      layers.forEach(v => {
        if (v.get("name") == "rangeLayerVector") {
          v.getSource().clear();
          map.removeInteraction(this.rangeSelectionDraw);
          map.removeLayer(this.rangeLayerVector)
          this.rangeVectorSource = null;
          this.rangeLayerVector = null;
          this.$bus.$emit('scopeSelectFactor', {flag: 'getAll'});  // 获取all列表
        }
      });
    });