Vue项目openlayers中使用jsts处理wkt和geojson的交集-(geojson来源zpi解析)

Vue项目openlayers中使用jsts处理wkt和geojson的交集-(geojson来源zpi解析)

读取压缩包中的shape看上一篇笔记：Vue项目读取zip中的ShapeFile文件，并解析为GeoJson

openlayers使用jsts官方示例：https://openlayers.org/en/latest/examples/jsts.html

jsts官方代码地址：https://github.com/bjornharrtell/jsts

我们从shape中读取到的geojson格式如下：

只有边界的一些坐标点，下面的把geojson和wkt做交集然后转化为wkt返回的方法：

import { Component, Emit, Vue } from 'vue-property-decorator';
import { mapGetters, mapMutations } from 'vuex';

import WKT from 'ol/format/WKT';
// eslint-disable-next-line import/extensions
import * as jsts from 'jsts/dist/jsts.min.js';
import {
  Geometry,
  GeometryCollection, LinearRing, LineString, MultiLineString, MultiPoint, Point,
} from 'ol/geom';
import Polygon from 'ol/geom/Polygon';
import MultiPolygon from 'ol/geom/MultiPolygon';

@Component({
  name: 'MapMxins',
  computed: {
    ...mapGetters('map', [
      'getDrawingType',
    ]),
  },
  methods: {
    ...mapMutations('map', [
      'updateDrawingType',
    ]),
  },
})
export default class MapMxins extends Vue {
  getDrawingType;
  
  updateDrawingType;
  
  /**
   * 处理工作区范围-如果上传了shpe
   *
   * @params xzqData: 行政区数据
   * @params geojson：工作区范围数据
   * 用工作区范围和行政区范围做相交处理，保留交集就是最后的范围
   * return: {
   *  geom: 工作区范围和行政区相交的geom，如果没有相交或者工作区范围无效则返回行政区geom
   *  isValid: 工作区范围是否有效
   * }
   */
  hansleWorkspace(xzqData, geojson) {
    // console.log('处理工作区范围-如果上传了shpe:', xzqData, geojson);
    const xzqGeom = xzqData.geom; // 行政区geom
    const format = new WKT();
    const parser = new jsts.io.OL3Parser();
    parser.inject(
      Point,
      LineString,
      LinearRing,
      Polygon,
      MultiPoint,
      MultiLineString,
      MultiPolygon,
      GeometryCollection,
    );

    // eslint-disable-next-line consistent-return
    return new Promise((resolve) => {
      // 工作区范围features
      const workspaceFeatures = geojson.features;
      // 行政区features
      const xzqFeatures = format.readFeatures(xzqGeom);
      // 行政区Geometry
      const xzqGeometry = parser.read(xzqFeatures[0].getGeometry());

      const xzqReturn = {
        geom: xzqGeom,
        isValid: false,
      };

      console.log('xzqFeatures-workspaceFeatures:', xzqFeatures, workspaceFeatures);
      try {
        // 如果工作区范围是多个feature，合并成一个
        let newWfGeometry;
        if (workspaceFeatures.length > 0) {
          workspaceFeatures.forEach((wkFeature) => {
            // 获取类型
            const { type, coordinates: mapdata } = wkFeature.geometry;
            let geometry: Geometry;
            if (type === 'Polygon') {
              geometry = new Polygon(mapdata); // 创建一个 Polygon 对象
              const wfGeometry1 = parser.read(geometry);
              newWfGeometry = newWfGeometry ? newWfGeometry.union(wfGeometry1) : wfGeometry1;
            } else if (type === 'MultiPolygon') {
              // 为每个多边形创建 Polygon
              const polygons = mapdata.map((polygonCoords) => new Polygon(polygonCoords));
              geometry = new MultiPolygon(polygons); // 创建一个 MultiPolygon 对象
              const wfGeometry1 = parser.read(geometry);
              newWfGeometry = newWfGeometry ? newWfGeometry.union(wfGeometry1) : wfGeometry1;
            } else {
              this.$message.error('工作区范围必须是面数据');
              resolve(xzqReturn);
            }
          });
        } else {
          this.$message.error('工作区范围不能为空');
          return resolve(xzqReturn);
        }
        // console.log('合并后的作曲范围数据newWfGeometry:', newWfGeometry, xzqGeometry);
        // 判断工作区范围和行政区范围是否相交
        if (newWfGeometry && xzqGeometry) {
          const intersects = newWfGeometry.intersects(xzqGeometry);
          if (intersects) {
            // 如果相交，取交集做工作区范围
            newWfGeometry = newWfGeometry.intersection(xzqGeometry);
            // 转为wkt
            const newWkt = format.writeGeometry(parser.write(newWfGeometry));
            // console.log(newWkt);
            return resolve({
              geom: newWkt,
              isValid: true,
            });
          }
          console.log('不相交相交');
          // 如果不相交，则返回行政区范围
          return resolve(xzqReturn);
        }
      } catch (err) {
        console.log('工作区范围数据解析出错:', err);
        return resolve(xzqReturn);
      }
    });
  }
}

使用：

// res 是我这里固定的wkt-行政区边界wkt
const geomWorkspace: any = await this.hansleWorkspace(res, this.shpeState.geojson);
console.log('处理后返回的geomWorkspace:', geomWorkspace);

调用后返回效果：