技術共有

Vue プロジェクトの openlayers で jst を使用して wkt と geojson の交差を処理す​​る - (geojson ソース zpi 分析)

2024-07-11

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Vue プロジェクトの openlayers で jst を使用して wkt と geojson の交差を処理す​​る - (geojson ソース zpi 分析)

圧縮パッケージ内の形状を読み取り、前の注意事項を読んでください。Vue プロジェクトは、zip 内の ShapeFile ファイルを読み取り、GeoJson に解析します。

Openlayers は jsts 公式サンプルを使用しますhttps://openlayers.org/en/latest/examples/jsts.html

jsts公式コードアドレス:https://github.com/bjornharrtell/jsts

シェイプから読み取る geojson 形式は次のとおりです。
ここに画像の説明を挿入します
境界の座標点はいくつかしかありません。次の方法では、geojson と wkt を交差させて wkt return に変換します。


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