Vue+openlayer5-Methode zum Abrufen der Koordinaten des aktuellen Mauszeigers

Vorwort:

Wie erhält man die Koordinaten der aktuellen Maus im Vue-Projekt? Hier ist eine Methode zum Teilen. Ergebnis:

Implementierungsschritte:

1. Relevante Dokumente importieren

importiere MousePosition aus „ol/control/MousePosition“;
importiere {createStringXY} aus „ol/coordinate“;

2. Erstellen Sie eine Karte

var Ebenen = [
        //Dunkelblauer Hintergrund new TileLayer({
           Quelle: neues XYZ({
             URL:
              "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
           }),
         }),
       
      ];
diese.map = neue Map({
        Schichten: Schichten,
        Ziel: "Karte",
        Ansicht: neue Ansicht({
          Zentrum: dieses.Zentrum,
          Projektion: diese.Projektion,
          Zoom: diese.Mittelgröße,
          maxZoom: 17,
          minZoom: 5,
          Ausmaß: [
            73.32783475401652, 3.33795, 135.16017906160056,
            53.83501005646246,
          ],
        }),
      });

3. Mausereignisse hinzufügen

var mousePositionControl = neue Mausposition({
         coordinateFormat: createStringXY(6), //Holen Sie sich die Standortprojektion: 'EPSG:4326',
         Klassenname: "benutzerdefinierte Mausposition",
         target: document.getElementById('mouse-position'), //Positionsdaten dort einfügen undefinedHTML: '&nbsp'
      });
      diese.map.addControl(mousePositionControl);

4. Auf der Seite hinzufügen

<div id="Karte" Klasse="Karte" ref="imageDom">
 
    Position div
    <div id="Mausposition" style="
        Farbe: #fff;
        Position: absolut;
        unten: 10px;
        rechts: 10px;
        Z-Index: 10000000;
        Breite: 200px;
        Zeilenhöhe: 30px;
        Hintergrund: rgba(0,0,0,0,5);
    "></div>
</div>

Dies ist das Ende dieses Artikels über das Abrufen der Koordinaten der aktuellen Maus durch vue+openlayer5. Weitere relevante Inhalte zu den Mauskoordinaten durch vue+openlayer5 finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:

Detaillierte Erläuterung des Beispiels der Koordinatenauswahlfunktion von Vue
vue-openlayers realisiert den Popup-Box-Effekt für Kartenkoordinaten
Vue verwendet die Gaode-Karte, um Punkte anhand von Koordinaten zu lokalisieren
Vue-Methode zum Abrufen von Elementbreite, -höhe, -abstand von links, rechts, oben usw. sowie der XY-Koordinatenachse
Vue+Openlayers realisiert Echtzeit-Koordinatenpunktanzeige

<<: Drei Verwendungszwecke und Unterschiede von MySQL sind nicht gleich

>>: Einführung in die Verwendung des Select-Optgroup-Tags in HTML