Partage de technologie

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

Utilisation de jsts dans les openlayers du projet Vue pour gérer l'intersection de wkt et geojson - (analyse zpi source geojson)

Lisez la forme dans l'emballage compressé et lisez la note précédente：Le projet Vue lit le fichier ShapeFile dans le zip et l'analyse dans GeoJson

Openlayers utilise l'exemple officiel de JST：https://openlayers.org/fr/derniers/exemples/jsts.html

Adresse du code officiel jsts :https://github.com/bjornharrtell/jsts

Le format geojson que nous lisons à partir de shape est le suivant :

Il n'y a que quelques points de coordonnées de la frontière. La méthode suivante consiste à croiser geojson et wkt, puis à les convertir en 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) =
                                   

                    上一篇
                    下一篇