Verwenden von Openlayer in Vue, um einen Ladeanimationseffekt zu realisieren

Hinweis: Sie können keine bereichsbezogenen Animationen verwenden! ! ! !

über GIF

<Vorlage>
  <div Klasse="Test">
    <div id="Karte" ref="Karte" style="Breite: 100vw; Höhe: 100vh"></div>
  </div>
</Vorlage>
 
<Skript>
importiere "ol/ol.css";
importiere { Karte, Ansicht, Overlay } von "ol";
importiere TileLayer aus „ol/layer/Tile“;
OSM aus „ol/source/OSM“ importieren;
 
Standard exportieren {
  Name: "gif",
  Daten() {
    zurückkehren {
      Karte: {},
      Überlagerung: {},
      Markierungspunkt: {},
      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],
            },
          },
        ],
      },
    };
  },
  montiert() {
    dies.initMap();
    dies.addGif();
  },
  Methoden: {
    // Initialisiere die Karte initMap() {
      diese.map = neue Map({
        Ziel: "Karte",
        Schichten:
          neue Kachelebene({
            Quelle: neues OSM(),
          }),
        ],
        Ansicht: neue Ansicht({
          Projektion: "EPSG:4326",
          Mitte: [104.912777, 34.730746],
          Zoom: 4,5,
        }),
      });
    },
    // Mit Overlay GIF dynamische Icon-Punktinformationen hinzufügen addGif() {
      let Koordinaten = this.getCoordinatesByGeojson(this.geojsonData);
 
      für (const i in Koordinaten) {
        let gif_span = document.createElement("span");
 
        Dokument.documentElement.appendChild(gif_span);
        dies.$nextTick(() => {
          this.markerPoint = neues Overlay({
            Position: Koordinaten[i],
            Element: gif_span,
            Positionierung: "Mitte-Mitte",
          });
          dies.map.addOverlay(dieser.markerPoint);
        });
      }
    },
    //Holen Sie sich den Koordinatensatz basierend auf GeoJSON-Daten getCoordinatesByGeojson(geojsonData) {
      lass Koordinaten = [];
      geojsonData.features.map((Funktion) => {
        Koordinaten = [...Koordinaten, Feature.Geometrie.Koordinaten];
      });
      Rückflugkoordinaten;
    },
  },
};
</Skript>
<style lang='scss' >
.prüfen {
  Spanne {
    Anzeige: Inline-Block;
    Breite: 80px;
    Höhe: 80px;
    Randradius: 50 %;
    Hintergrund: URL("https://smart-garden-manage.oss-cn-chengdu.aliyuncs.com/gif.gif")
      keine Wiederholung;
    Hintergrundgröße: 80px 80px;
  }
}
</Stil>

Durch Keyframes @keyframes

<Vorlage>
  <div Klasse="Test">
    <div id="Karte" ref="Karte" style="Breite: 100vw; Höhe: 100vh"></div>
  </div>
</Vorlage>
 
<Skript>
importiere "ol/ol.css";
importiere { Karte, Ansicht, Overlay } von "ol";
importiere TileLayer aus „ol/layer/Tile“;
OSM aus „ol/source/OSM“ importieren;
 
Standard exportieren {
  Name: "gif",
  Daten() {
    zurückkehren {
      Karte: {},
      Überlagerung: {},
      Punktüberlagerung: {},
      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],
            },
          },
        ],
      },
    };
  },
  montiert() {
    dies.initMap();
    dies.addGif();
  },
  Methoden: {
    // Initialisiere die Karte initMap() {
      diese.map = neue Map({
        Ziel: "Karte",
        Schichten:
          neue Kachelebene({
            Quelle: neues OSM(),
          }),
        ],
        Ansicht: neue Ansicht({
          Projektion: "EPSG:4326",
          Mitte: [104.912777, 34.730746],
          Zoom: 4,5,
        }),
      });
    },
    // Mit Overlay GIF dynamische Icon-Punktinformationen hinzufügen addGif() {
      let Koordinaten = this.getCoordinatesByGeojson(this.geojsonData);
 
      für (const i in Koordinaten) {
        let point_div = document.createElement("div");
        point_div.Klassenname = "css_animation";
        point_div.id = `Koordinate_${i}`;
        Dokument.documentElement.appendChild(point_div);
 
        dies.$nextTick(() => {
          this.point_overlay = neues Overlay({
            Position: Koordinaten[i],
            Element: point_div,
            Positionierung: "Mitte-Mitte",
          });
          diese.map.addOverlay(diese.point_overlay);
        });
      }
    },
    //Holen Sie sich den Koordinatensatz basierend auf GeoJSON-Daten getCoordinatesByGeojson(geojsonData) {
      lass Koordinaten = [];
      geojsonData.features.map((Funktion) => {
        Koordinaten = [...Koordinaten, Feature.Geometrie.Koordinaten];
      });
      Rückflugkoordinaten;
    },
  },
};
</Skript>
<style lang='scss' >
.prüfen {
  .css_animation {
    Höhe: 50px;
    Breite: 50px;
    Randradius: 50 %;
    Hintergrund: rgba(255, 0, 0, 0,9);
    Box-Shadow: Einschub 0 0 8px rot;
    transformieren: Skalierung(0);
    Animation: meine ersten 3er;
    animation-iteration-count: unendlich; // Endlosschleife}
  @keyframes meinerstes {
    Zu {
      transformieren: skalieren(2);
      Hintergrund: rgba(0, 0, 0, 0);
      Box-Shadow: Einschub 0 0 50px rgba(255, 0, 0, 0);
    }
  }
}
</Stil>

Es kann Animationen laden und die Attribute der Merkmalspunkte abrufen, an denen sich die Animationen befinden.

HINWEIS: Es gibt ein Problem mit diesem Code. Aktuell ist es nur möglich, per Klick Eigenschaften abzurufen oder Animationen anzuzeigen, jedoch nicht gleichzeitig. Hier besteht Optimierungsbedarf!

<Vorlage>
  <div Klasse="Test">
    <div id="Karte" ref="Karte" style="Breite: 100vw; Höhe: 100vh"></div>
    <div
      id="Popup"
      Stil="
        Position: absolut;
        Hintergrundfarbe: rgba(47, 57, 90, 0,678);
        unten: 20px;
        links: 30px;
        Rand: 1px durchgehend weiß;
        Polsterung: 10px;
        Breite: 60px;
      "
    >
      {{ Eigenschaften.Titel }}
    </div>
  </div>
</Vorlage>
 
<Skript>
importiere "ol/ol.css";
importiere { Karte, Ansicht, Overlay } 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";
importiere { Füllung, Strich, Stil, Kreis } aus "ol/style";
 
Standard exportieren {
  Name: "gif",
  Daten() {
    zurückkehren {
      Karte: {},
      Schicht: {},
 
      Überlagerung: {},
      Punktüberlagerung: {},
      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: {},
      Eigenschaften:
        Titel: "",
      },
    };
  },
  montiert() {
    dies.initMap();
    // this.addGif(); //Nach dem Auskommentieren klicken, um Feature-Attribute abzurufen},
  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);
 
      let overlayer_popup = neues Overlay({
        Element: document.getElementById("Popup"),
        Positionierung: "Mitte-Mitte", //Muss hinzugefügt werden, sonst kommt es zu einem Versatz});
 
      dies.select.on("auswählen", (e) => {
        let coordinate = e.mapBrowserEvent.coordinate; //Die ausgewählten Koordinaten abrufen let featureSelect = e.selected[0]; //Ausgewähltes Feature if (e.selected.length !== 0) {
          overlayer_popup.setPosition(Koordinate);
          diese.map.addOverlay(overlayer_popup);
        } anders {
          overlayer_popup.setPosition("");
        }
 
        wenn (Featureauswahl) {
          this.properties = featureSelect.getProperties(); //Alle Eigenschaften des aktuellen Features abrufen //Den ausgewählten Stil festlegen featureSelect.setStyle(
            neuer Stil({
              Bild: neuer Kreis({
                Radius: 10,
                füllen: neue Füllung({
                  //Füllfarbe und Transparenzfarbe der Vektorebene: "rgba(255,0,0,0.5)",
                }),
                Strich: neuer Strich({
                  //Rahmenstilfarbe: "rgba(100, 90, 209, 0.6)",
                  Breite: 3,
                }),
              }),
            })
          );
        }
      });
 
      // 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" : "";
      });
    },
    // Mit Overlay GIF dynamische Symbolpunktinformationen hinzufügen addGif() {
      let Koordinaten = this.getCoordinatesByGeojson(this.geojsonData);
 
      für (const i in Koordinaten) {
        let point_div = document.createElement("div");
        point_div.Klassenname = "css_animation";
        point_div.id = `Koordinate_${i}`;
        Dokument.documentElement.appendChild(Punkt_Div);
 
        dies.$nextTick(() => {
          this.point_overlay = neues Overlay({
            Position: Koordinaten[i],
            Element: point_div,
            Positionierung: "Mitte-Mitte",
          });
          diese.map.addOverlay(diese.point_overlay);
        });
      }
    },
    //Holen Sie sich den Koordinatensatz basierend auf GeoJSON-Daten getCoordinatesByGeojson(geojsonData) {
      lass Koordinaten = [];
      geojsonData.features.map((Funktion) => {
        Koordinaten = [...Koordinaten, Feature.Geometrie.Koordinaten];
      });
      Rückflugkoordinaten;
    },
  },
};
</Skript>
<style lang='scss' scoped>
.prüfen {
}
</Stil>
<style lang='scss' >
.prüfen {
  .css_animation {
    Höhe: 50px;
    Breite: 50px;
    Randradius: 50 %;
    Hintergrund: rgba(255, 0, 0, 0,9);
    Box-Shadow: Einschub 0 0 8px rot;
    transformieren: Skalierung(0);
    Animation: meine ersten 3er;
    animation-iteration-count: unendlich; // Endlosschleife}
  @keyframes meinerstes {
    Zu {
      transformieren: skalieren(2);
      Hintergrund: rgba(0, 0, 0, 0);
      Box-Shadow: Einschub 0 0 50px rgba(255, 0, 0, 0);
    }
  }
}
</Stil>

Dies ist das Ende dieses Artikels über die Ladeanimation von Vue+Openlayer. Weitere verwandte Inhalte zur Ladeanimation von Vue Openlayer 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: