Realisieren Sie Kartenaggregations- und Streueffekte basierend auf Vue + OpenLayer
Vorwort:Openlayer ist eine Open-Source-Software, die häufig in unserem GIS verwendet wird und sehr gute Rückmeldungen erhalten hat. Wie zuvor ol3 war es der letzte Schrei. Die Kartenimplementierung ist auch sehr einfach und praktisch. Derzeit werden in Vue viele Karten verwendet. Was also wäre, wenn wir Openlayer in Vue einführen und den Kartenstreuungseffekt oder sogar einen tieferen Kartenaggregationseffekt realisieren würden? In diesem Artikel wird die Implementierung von Karten in Vue erläutert. Derzeit sind die Serien 5 und 6.5 von OpenLayer universell und getestet und verfügbar. Ergebnis:1. Polymerisationseffekt:
2. Streuseleffekt:
Konkrete Umsetzungsschritte:1. Führen Sie Openlayer in das Projekt ein
2. Konfiguration (wird auf Anfrage eingeführt)(1) Erstellen Sie eine neue Vue-Datei (2) Vorlage
(3) js Teil Importbezogene Konfigurationsdateien. Dies sind alle meine Importe. Sie können sie je nach Ihrer Situation löschen.
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 } aus "ol/source";
importiere { Feature } von "ol";
importiere { Vektor als LayerVec, Vektor als VectorLayer } aus "ol/layer";
importiere { Punkt, LineString } aus "ol/geom";
importieren {
Stil,
Symbol,
Füllen,
Schlaganfall,
Text,
Kreis als CircleStyle,
} von "ol/style";
importiere { OSM, TileArcGISRest } aus "ol/source";3. Kartenanzeige realisieren
montiert:
montiert() {
dies.initMap();
},Methoden: Ich stelle hier zwei Kartenvorlagen zur Verfügung, beide sind online. Wenn es sich um ein Intranet handelt, ersetzen Sie es durch Ihre eigene Adresse.
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(),
// }),
];
diese.map = neue Map({
Schichten: Schichten,
Ziel: "Karte",
Ansicht: neue Ansicht({
Projektion: 'EPSG:4326',
Mitte: [120, 30],
Zoom: 10,
minZoom: 5,
maxZoom: 14
}),
});
//Klicken Sie, um die aktuellen Koordinaten abzurufen this.map.on(
"klicken",
Funktion (evt) {
Alarm(evt.Koordinate[0] + ";" + evt.Koordinate[1]);
},
Karte
);
}4. Streufunktion
montiert:
montiert() {
dies.initMap();
},Methoden:
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(),
}),
];
diese.map = neue Map({
Schichten: Schichten,
Ziel: "Karte",
Ansicht: neue Ansicht({
Projektion: 'EPSG:4326',
Mitte: [120, 30],
Zoom: 10,
minZoom: 5,
maxZoom: 14
}),
});
//Klicken Sie, um die aktuellen Koordinaten abzurufen this.map.on(
"klicken",
Funktion (evt) {
Alarm(evt.Koordinate[0] + ";" + evt.Koordinate[1]);
},
Karte
);
//Ich schreibe hier einen festen Datenpunkt, daher kannst du this.addMarker() nach dem Rendern der Adresse direkt aufrufen.
},
Marker hinzufügen(){
//Zeichenbrett erstellen let sourceArr = new SourceVec({});
//Zufallsdaten definieren, hier sind 200 Zufallszahlen for (var i = 1; i <= 200; i++) {
//Informationen zu Punktkoordinaten let coordinates = [120.00 + Math.random(), 30.00 + Math.random()];
let feature = neues Feature(neuer Punkt(Koordinaten));
let markerStyle = neuer Stil({
Bild: neues Symbol({
Deckkraft: 0,75,
Quelle: this.fixedStationImg1,
}),
})
feature.setStyle(Markierungsstil)
sourceArr.addFeature(Funktion);
}
//LayerVec /VectorLayer Beide sind OK var layer = new VectorLayer({
Quelle: sourceArr,
})
//Fügen Sie der Karte ein Zeichenbrett hinzu this.map.addLayer(
Schicht
);
}5. Aggregationseffekt
montiert:
montiert() {
dies.initMap();
},Methoden:
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(),
}),
];
diese.map = neue Map({
Schichten: Schichten,
Ziel: "Karte",
Ansicht: neue Ansicht({
Projektion: 'EPSG:4326',
Mitte: [120, 30],
Zoom: 10,
minZoom: 5,
maxZoom: 14
}),
});
//Klicken Sie, um die aktuellen Koordinaten abzurufen this.map.on(
"klicken",
Funktion (evt) {
Alarm(evt.Koordinate[0] + ";" + evt.Koordinate[1]);
},
Karte
);
//Ich schreibe hier einen festen Datenpunkt, daher kannst du this.addMarker() nach dem Rendern der Adresse direkt aufrufen.
},
Markieren Sie die Markierung ().
//Zeichenbrett erstellen let sourceArr = new SourceVec({});
//Zufallsdaten definieren, hier sind 200 Zufallszahlen for (var i = 1; i <= 200; i++) {
//Informationen zu Punktkoordinaten let coordinates = [120.00 + Math.random(), 30.00 + Math.random()];
let feature = neues Feature(neuer Punkt(Koordinaten));
let markerStyle = neuer Stil({
Bild: neues Symbol ({
Deckkraft: 0,75,
Quelle: this.fixedStationImg1,
}),
})
feature.setStyle(Markierungsstil)
sourceArr.addFeature(Funktion);
}
//Zur Kartenebene hinzufügen - Aggregationspunkt - LayerVec / VectorLayer Beide sind OK var layer = new LayerVec({
Quelle: this.ClusterSource,
Stil: Funktion (Merkmal, Auflösung) {
var Größe = Feature.get('Features').Länge;
//Wenn die Aggregationsnummer 1 ist, bedeutet dies, dass die unterste Ebene das Positionierungssymbol ist, wenn (Größe == 1) {
gib neuen Stil zurück ({
Bild: neues Symbol ({
Anker: [0,5, 1],
Quelle: erforderlich("../../assets/Img/marker_yes.png"),
})
})
}anders {
//Legen Sie hier den Stil des Aggregationsteils fest return new Style({
Bild: neuer CircleStyle({
Radius: 30,
Strich: neuer Strich({
Farbe: 'weiß'
}),
füllen: neue Füllung({
Farbe: 'blau'
})
}),
Text: neuer Text({
Text: size.toString(),
füllen: neue Füllung({
Farbe: 'weiß'
})
})
})
}
}
})
//Fügen Sie der Karte ein Zeichenbrett hinzu this.map.addLayer(
Schicht
);
}Quellen: Verwenden von OpenLayer in js: https://blog.csdn.net/HerryDong/article/details/110951955 Dies ist das Ende dieses Artikels über vue+openlayer zum Erzielen von Kartenaggregations- und Streueffekten. Weitere relevante Inhalte zur Kartenaggregation 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:
|
<<: 10 schlechte Angewohnheiten, die Sie bei Docker-Containeranwendungen vermeiden sollten
>>: Beschreiben Sie kurz die vier Transaktionsisolationsebenen von MySql
Artikel empfehlen
Detaillierte Erklärung, wie eine SQL-Anweisung in MySQL ausgeführt wird
Überblick Ich habe vor Kurzem begonnen, mir Wisse...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17 winx64
Ich habe die vorherigen Hinweise zur Installation...
Seitenlayout für Bootstrap 3.0-Lernnotizen
Dieses Mal werden wir hauptsächlich etwas über da...
So installieren Sie Theano und Keras auf einem Ubuntu-System
Hinweis: Das System ist Ubuntu 14.04LTS, ein 32-B...
vue-table implementiert das Hinzufügen und Löschen
In diesem Artikelbeispiel wird der spezifische Co...
Tutorial zur grafischen Installation der MySQL 8.0.15 WinX64-Dekomprimierungsversion
Jedes Mal, wenn ich das System installiert habe, ...
Die Verwendung und Methoden von async und await in JavaScript
asynchrone Funktion und await-Schlüsselwort in JS...
Eine kurze Erläuterung des Prinzips des flachen Einstiegs und tiefen Ausstiegs von MySQL
Inhaltsverzeichnis 1. Übersicht der Seite 2. Infi...
Grundlegendes Tutorial zur Bedienung von Dateien und Berechtigungen in CentOS
Vorwort Bevor wir beginnen, sollten wir uns kurz ...
Miniprogramm zur Implementierung der Token-Generierung und -Verifizierung
Inhaltsverzeichnis Verfahren Demo Mini-Programm B...
js implementiert das Popup-Anmeldefeld durch Klicken auf das Popup-Fenster
In diesem Artikel wird der spezifische Code von j...
Einführung in die wichtigsten Browser und ihre Kernel
Trident-Kern: IE, MaxThon, TT, The World, 360, So...
JavaScript zum Erzielen eines ausgewogenen digitalen Scroll-Effekts
Inhaltsverzeichnis 1. Hintergrund zur Umsetzung 2...
So paginieren Sie schnell MySQL-Datenmengen im zweistelligen Millionenbereich
Vorwort Um bei der Backend-Entwicklung zu verhind...
Verwendung von MySQL DDL-Anweisungen
Vorwort Die Sprachklassifikation von SQL umfasst ...