Methode zum dynamischen Laden von Geojson basierend auf Vue+Openlayer

<Vorlage>
  <div id="Karte" style="Breite: 100vw; Höhe: 100vh"></div>
</Vorlage>
<Skript>
importiere "ol/ol.css";
importiere TileLayer aus „ol/layer/Tile“;
importiere VectorLayer aus „ol/layer/Vector“;
importiere VectorSource aus „ol/source/Vector“;
importiere XYZ aus „ol/source/XYZ“;
importiere { Karte, Ansicht, Funktion, ol } von "ol";
importiere { Stil, Strich, Füllung } aus "ol/style";
importiere { Polygon, MultiPolygon } aus "ol/geom";
 
importiere areaGeo aus "@/assets/chengdu.json";
 
Standard exportieren {
  Daten() {
    zurückkehren {
      Karte: {},
      Bereichsebene: {},
    };
  },
  montiert() {
    this.initMap(); //Kartenmethode initialisieren this.addArea(areaGeo); //Bereichsebenenmethode hinzufügen this.pointMove();
    dies.getFeatureByClick();
  },
  Methoden: {
    PunktBewegung() {
      // Lege den Stil der Maus über dem Vektorelement fest this.map.on("pointermove", (e) => {
        const isHover = this.map.hasFeatureAtPixel(e.pixel);
        this.map.getTargetElement().style.cursor = isHover ? "Zeiger" : "";
      });
    },
    getFeatureByClick() {
      this.map.on("klicken", (e) => {
        : Lassen Sie Features = this.map.getFeaturesAtPixel(e.pixel);
        diese.map.getView().fit(features[0].getGeometry(), {
          Dauer: 1500,
          Polsterung: [100, 100, 100, 100],
        });
      });
    },
    /**
     *Bereich festlegen */
    Bereich hinzufügen(geo = {}) {
      wenn (Object.keys(geo).length == 0 und geo.features.length == 0) zurückgeben;
 
      // Ebene festlegen this.areaLayer = new VectorLayer({
        Quelle: neue Vektorquelle ({
          Merkmale: [],
        }),
      });
      //Ebene hinzufügen this.map.addLayer(this.areaLayer);
 
      Lassen Sie Features = geo.features;
 
      für (lass i in Features) {
        lass Bereichsfeature = {};
 
        wenn (features[i].geometry.type == "MultiPolygon") {
          Bereichsfeature = neues Feature({
            Geometrie: neues MultiPolygon(features[i].geometry.coordinates),
          });
        } sonst wenn (features[i].geometry.type == "Polygon") {
          Bereichsfeature = neues Feature({
            Geometrie: neues Polygon (Features[i].Geometrie.Koordinaten),
          });
        }
        BereichFeature.setStyle(
          neuer Stil({
            füllen: neue Füllung({ Farbe: "#4e98f444" }),
            Strich: neuer Strich({
              Breite: 3,
              Farbe: [71, 137, 227, 1],
            }),
          })
        );
        BereichFeature.setProperties(features[i].properties);
        dies.areaLayer.getSource().addFeature(areaFeature);
      }
    },
    /**
     * Initialisiere die Karte */
    initMap() {
      diese.map = neue Map({
        Ziel: "Karte",
        Schichten:
          neue Kachelebene({
            Quelle: neues XYZ({
              URL: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
            }),
          }),
        ],
        Ansicht: neue Ansicht({
          Projektion: "EPSG:4326",
          Mitte: [103, 31],
          Zoom: 7,
        }),
      });
    },
  },
};
</Skript>