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);

调用后返回效果:
在这里插入图片描述

最近更新

  1. Python利用psutil库进行监控进程和资源

    2024-07-10 23:36:03       0 阅读
  2. SpringBoot RestHighLevelClient 按版本更新

    2024-07-10 23:36:03       0 阅读
  3. 跨域问题几种解决方法

    2024-07-10 23:36:03       0 阅读
  4. Python面试整理-文件处理

    2024-07-10 23:36:03       0 阅读
  5. 分式

    2024-07-10 23:36:03       0 阅读
  6. Spring WebFlux 介绍与效果演示示例

    2024-07-10 23:36:03       0 阅读
  7. django 需要修改的文件

    2024-07-10 23:36:03       0 阅读
  8. Random,ThreadLocalRandom,SecureRandom有什么区别

    2024-07-10 23:36:03       0 阅读
  9. Python 爬虫技术 第05节 异常处理

    2024-07-10 23:36:03       0 阅读
  10. 微信小程序开发:DOM 相关 API 使用详解

    2024-07-10 23:36:03       0 阅读
  11. QtQuick-QML语法

    2024-07-10 23:36:03       0 阅读
  12. Codeforces Round 960 (Div. 2)VP

    2024-07-10 23:36:03       0 阅读
  13. WebAssembly在前端开发中的创新与应用

    2024-07-10 23:36:03       0 阅读

热门阅读

  1. 【MySQL】MySQL索引失效场景

    2024-07-10 23:36:03       9 阅读
  2. Spark SQL

    Spark SQL

    2024-07-10 23:36:03      6 阅读
  3. windows node降级到指定版本

    2024-07-10 23:36:03       7 阅读
  4. 153. 寻找旋转排序数组中的最小值

    2024-07-10 23:36:03       5 阅读
  5. ArduPilot开源代码之AP_OpticalFlow_UPFLOW

    2024-07-10 23:36:03       4 阅读
  6. 【算法】十进制转换为二进制

    2024-07-10 23:36:03       8 阅读
  7. 精通Vim的艺术:Ex命令的深度指南

    2024-07-10 23:36:03       7 阅读
  8. MySQL篇:日志

    2024-07-10 23:36:03       6 阅读
  9. python库 - sentencepiece

    2024-07-10 23:36:03       6 阅读