Technologieaustausch

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

Verwendung von JSTs in den OpenLayers des Vue-Projekts, um die Schnittmenge von WKT und GeoJson zu verarbeiten – (Geojson-Quell-ZPI-Analyse)

Lesen Sie die Form in der komprimierten Verpackung und lesen Sie die vorherige Notiz：Das Vue-Projekt liest die ShapeFile-Datei in der ZIP-Datei und analysiert sie in GeoJson

Openlayers verwendet das offizielle Beispiel von jsts：https://openlayers.org/en/latest/examples/jsts.html

Offizielle JSTs-Codeadresse:https://github.com/bjornharrtell/jsts

Das Geojson-Format, das wir aus der Form lesen, ist wie folgt:

Es gibt nur einige Koordinatenpunkte der Grenze. Die folgende Methode besteht darin, Geojson und WKT zu schneiden und sie dann in WKT umzuwandeln.

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

                    上一篇
                    下一篇