Condivisione della tecnologia

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

Utilizzo di jsts negli openlayer del progetto Vue per gestire l'intersezione di wkt e geojson - (analisi zpi della sorgente geojson)

Leggere la forma nel pacchetto compresso e leggere la nota precedente：Il progetto Vue legge il file ShapeFile nello zip e lo analizza in GeoJson

Openlayers utilizza l'esempio ufficiale di jsts：https://openlayers.org/it/latest/examples/jsts.html

indirizzo del codice ufficiale jsts:Italiano: https://github.com/bjornharrtell/jsts

Il formato geojson che leggiamo da shape è il seguente:

Sono presenti solo alcuni punti di coordinate del confine. Il metodo seguente consiste nell'intersecare geojson e wkt e quindi convertirlo in 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) =
                                   

                    上一篇
                    下一篇