Implementierungscode für die Verwendung von „Select“ zum Auswählen von Elementen in Vue+Openlayer

<Vorlage>
  <div id="Karte" ref="Karte" style="Breite: 100vw; Höhe: 100vh"></div>
</Vorlage>
 
<Skript>
importiere "ol/ol.css";
importiere { Karte, Ansicht } von "ol";
importiere { OSM, Vektor als Vektorquelle } aus "ol/source";
importiere { Vektor als Vektorebene, Kachel als Kachelebene } aus "ol/layer";
GeoJSON aus „ol/format/GeoJSON“ importieren;
 
Importieren Sie Select aus „ol/interaction/Select“.
importiere { altKeyOnly, click, pointerMove } aus "ol/events/condition";
 
Standard exportieren {
  Name: "gif",
  Daten() {
    zurückkehren {
      Karte: {},
      Schicht: {},
      Geojson-Daten:
        Typ: "FeatureCollection",
        Merkmale: [
          {
            Typ: "Feature",
            Eigenschaften:
              Titel: "Alarm 1",
            },
            Geometrie:
              Typ: "Punkt",
              Koordinaten: [91.48879670091165, 37.83814884701121],
            },
          },
          {
            Typ: "Feature",
            Eigenschaften:
              Titel: "Alarm 2",
            },
            Geometrie:
              Typ: "Punkt",
              Koordinaten: [99.19515576149941, 26.713646654711134],
            },
          },
          {
            Typ: "Feature",
            Eigenschaften:
              Titel: "Alarm 3",
            },
            Geometrie:
              Typ: "Punkt",
              Koordinaten: [123.74363825288785, 44.363694825734726],
            },
          },
        ],
      },
      wählen: {},
    };
  },
  montiert() {
    dies.initMap();
  },
  Methoden: {
    // Initialisiere die Karte initMap() {
      diese.Ebene = neue Vektorebene({
        Quelle: neue Vektorquelle ({
          Funktionen: neues GeoJSON().readFeatures(this.geojsonData),
        }),
      });
      diese.map = neue Map({
        Ziel: "Karte",
        Schichten:
          neue Kachelebene({
            Quelle: neues OSM(),
          }),
          diese.Schicht,
        ],
        Ansicht: neue Ansicht({
          Projektion: "EPSG:4326",
          Mitte: [104.912777, 34.730746],
          Zoom: 4,5,
        }),
      });
 
      diese.Auswahl = neue Auswahl({
        Bedingung: Klick, //Klicken zum Auswählen});
      diese.map.addInteraction(diese.select);
      dies.select.on("auswählen", (e) => {
        let coordinate = e.mapBrowserEvent.coordinate; //Die ausgewählten Koordinaten abrufen let Properties = e.selected[0].getProperties(); //Alle Eigenschaften des aktuellen Features abrufen });
 
      // 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" : "";
      });
    },
  },
};
</Skript>