Vue + Openlayer realisiert den Drag- und Rotationsverformungseffekt von Grafiken

npm ich ol --speichern

npm install --save-dev [email protected]

npm installiere ol-ext --save

npm install --save [email protected]

<Vorlage>
  <div id="Karte" Klasse="Karte"></div>
</Vorlage>

importiere "ol/ol.css";
Ansicht aus „ol/View“ importieren;
Karte aus „ol/Map“ importieren;
importiere TileLayer aus „ol/layer/Tile“;
Overlay aus „ol/Overlay“ importieren;
importiere XYZ aus „ol/source/XYZ“;
importiere { Vektor als SourceVec, Cluster, Vektor als VectorSource } aus "ol/source";
importiere { Feature } von "ol";
importiere { Vektor als LayerVec, Vektor als VectorLayer } aus "ol/layer";
importiere { Punkt, Linienzug, Polygon } aus "ol/geom";
 
importieren {
    Stil,
    Symbol,
    Füllen,
    Schlaganfall,
    Text,
    Kreis als CircleStyle,
  } von "ol/style";
  importiere { OSM, TileArcGISRest } aus "ol/source";

importiere ExtTransform aus „ol-ext/interaction/Transform“

Daten() {
      zurückkehren {
        Karte: null,
        Zentrum: [116.39702518856394, 39.918590567855425], //Längen- und Breitengrad der Verbotenen Stadt in Peking ZentrumGröße: 11,5,
        Projektion: "EPSG:4326",
 
    }
}

montiert() {
  dies.initMap()
}

Methoden: {
      //Karte initialisieren initMap() {
        // Rendere die Karte var layers = [
          //Dunkelblauer Hintergrund// new TileLayer({
          // Quelle: neues XYZ({
          // URL:
          // "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
          // }),
          // }),
          // Hintergrund initialisieren // new TileLayer({
          // Quelle: neues OSM(),
          // })
          neue Kachelebene({
            Titel: "Straßenkarte",
            Quelle: neues XYZ({
              url: "http://localhost:8888/haoxing-map/sosomaps/roadmap/{z}/{x}/{y}.jpg", //zwh lokale Verwendung}),
          }),
        ];
 
        diese.map = neue Map({
          Schichten: Schichten,
          Ziel: "Karte",
          Ansicht: neue Ansicht({
            Zentrum: dieses.Zentrum,
            Projektion: diese.Projektion,
            Zoom: diese.Mittelgröße,
            maxZoom: 17,
            minZoom: 8,
          }),
        });
      },

montiert() {
 dies.initMap()
 dies.createPolygon()
},

 Methoden: {    
 
    //Erstelle ein Polygon createPolygon() {
        //Füge eine Ebene hinzu und lege den Punktbereich fest const polygon = new Feature({
          Geometrie: neues Polygon([
            [
              [116.39314093500519,40.0217660530101],
              [116.47762344990831,39.921746523871924],
              [116.33244947314951,39.89892653421418],
              [116.30623076162784,40.00185925352143],
            ]
          ]),
        })
        //Stil festlegen polygon.setStyle(new Style({
          Strich: neuer Strich({
            Breite: 4,
            Farbe: [255, 0, 0, 1],
          }),
        }))
        //Fügen Sie die Grafiken der Karte hinzu this.map.addLayer(new VectorLayer({
          Quelle: neue Vektorquelle ({
            Funktionen: [Polygon],
          }),
        }))
      },
 
}

montiert() {
  dies.initMap()
  dies.createPolygon()
  dies.onEdit()
},

//Operationsereignis onEdit() {
   const transform = neue ExtTransform({
       enableRotatedTransform: false,
       Treffertoleranz: 2,
       übersetzen: true, // ziehen strecken: false, // strecken skalieren: true, // skalieren drehen: true, // drehen translateFeature: false,
       noFlip: wahr,
       // Ebenen: [],
    })
   this.map.addInteraction(transformieren)
 
 
  //Startereignis transform.on(['rotatestart','translatestart'], function(e){
          // Drehung
          let startangle = e.feature.get('angle')||0;
          // Übersetzung
          konsole.log(1111);
          Konsole.log(Startwinkel);
        });
  //Rotation transform.on('rotierend', Funktion (e) {
          konsole.log(2222);
          console.log("drehen: "+((e.angle*180/Math.PI -180)%360+180).toFixed(2));
          konsole.log(e);
        });
 //Verschieben transform.on('translating', function (e){
          konsole.log(3333);
          Konsole.log(e.delta);
          konsole.log(e);
 
        });
 //Drag-Ereignis transform.on('scaling', function (e){
          konsole.log(4444);
          Konsole.log(z. B. Maßstab);
          konsole.log(e);
        });
  //Ereignisende transform.on(['rotateend', 'translateend', 'scaleend'], function (e) {
          konsole.log(5555);
        });
 
},