Vue+Openlayer Batch-Einstellung von Flash Point-Implementierungscode (basierend auf dem Postrender-Mechanismus)

<Vorlage>
  <div id="Karte" style="Breite: 100vw; Höhe: 100vh" />
</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 } von "ol";
importiere { Stil, Kreis, Strich } aus "ol/style";
importiere { Punkt } aus "ol/geom";
importiere { getVectorContext } von "ol/render";
 
// Grenze JSON-Datenexport Standard {
  Daten() {
    zurückkehren {
      Karte: {},
      Koordinaten: [
        { x: "106.918082", y: "31.441314" }, // Chongqing { x: "86.36158200334317", y: "41.42448570787448" }, // Xinjiang { x: "89.71757707811526", y: "31.02619817424643" }, // Tibet { x: "116.31694544853109", y: "39.868508850821115" }, // Peking { x: "103.07940932026341", y: "30.438580338450862" }, // Chengdu],
      Geschwindigkeit: 0,3,
    };
  },
  montiert() {
    dies.initMap();
    dies.addDynamicPoints(diese.coordinates);
  },
  Methoden: {
    /**
     * 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: [108.522097, 37.272848],
          Zoom: 4,7,
        }),
      });
    },
    /**
     * Blinkende Punkte stapelweise hinzufügen */
    addDynamicPoints(Koordinaten) {
      // Ebene einrichten let pointLayer = new VectorLayer({ source: new VectorSource() });
      //Ebene hinzufügen this.map.addLayer(pointLayer);
      // Schleife zum Hinzufügen von Funktionen
      lass PunktFeature = [];
      für (lass i = 0; i < Koordinaten.Länge; i++) {
        // Ein Feature erstellen. Ein Feature ist eine Punktkoordinateninformation const feature = new Feature({
          Geometrie: neuer Punkt([Koordinaten[i].x, Koordinaten[i].y]),
        });
        PunktFeature.push(Feature);
      }
      //Fügen Sie die Feature-Sammlung zur Ebene hinzu pointLayer.getSource().addFeatures(pointFeature);
      // Der entscheidende Punkt ist hier: Hören Sie auf das Postrender-Ereignis und setzen Sie den Kreisstil darin zurück. let radius = 0;
      pointLayer.on("postrender", (e) => {
        wenn (Radius >= 20) Radius = 0;
        let opacity = (20 - radius) * (1 / 20); // Deckkraft let pointStyle = new Style({
          Bild: neuer Kreis({
            Radius: Radius,
            Strich: neuer Strich({
              Farbe: "rgba(255,0,0" + Deckkraft + ")",
              Breite: 3 - Radius / 10, //Breite festlegen}),
          }),
        });
        // Den Vektor-Feature-Kontext abrufen let vectorContext = getVectorContext(e);
        Vektorkontext.setStyle(Punktstil);
        pointFeature.fürEach((feature) => {
          Vektorkontext: drawGeometry(feature.getGeometry());
        });
        radius = radius + this.speed; //Blinkgeschwindigkeit anpassen //Kartendarstellung anfordern (beim nächsten Animationsbild)
        diese.Karte.render();
      });
    },
  },
};
</Skript>