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 der Verwendung des chmod-Befehls in Linux
chmod-Befehlssyntax Dies ist die korrekte Syntax ...
So packen Sie das Projekt per Idee in Docker
Viele Freunde wollten schon immer wissen, wie man...
Detaillierte Erklärung der Anwendung und des Unterschieds zwischen Filterattribut und Hintergrundfilter in CSS
Es gibt einige Unterschiede zwischen Filter und H...
Zusammenfassung der Wissenspunkte zum Abdecken von Indizes in MySQL
Wenn ein Index die Werte aller abzufragenden Feld...
Detaillierte Erläuterung der Beispiele für CSS-Gewichtswerte (Kaskadierung)
•Es gibt viele Selektoren in CSS. Was passiert, w...
Docker-Containerüberwachung und Protokollverwaltung – Implementierungsprozessanalyse
Wenn der Umfang der Docker-Bereitstellung zunimmt...
Installation und Konfiguration von MySQL 8.0.15 unter Centos7
In diesem Artikel finden Sie das grafische Tutori...
CSS-Beschreibung des Implementierungscodes zur Anzeige von Text am Ende des horizontalen Fortschrittsbalkens
Problembeschreibung Folgende Ergebnisse möchte ic...
Beispiel für einen reinen CSS3-Mindmap-Stil
Mindmap Er sieht wahrscheinlich so aus: Die meist...
Zusammenfassung der XHTML-Anwendung im Webdesign-Studium
<br />Im Allgemeinen ist die Dateiorganisati...
Detaillierte Erklärung der Mixin-Verwendung in Vue
Inhaltsverzeichnis Vorwort 1. Was sind Mixins? 2....
Detaillierte Erklärung zur Verwendung mehrerer Timer in CocosCreator
1. setTimeOut Drucken Sie abc nach 3 Sekunden. Nu...
Webdesign: Wenn der Titel nicht vollständig angezeigt werden kann
<br />Ich habe mir heute die neu gestaltete ...
Detaillierte Beschreibung von Shallow Copy und Deep Copy in js
Inhaltsverzeichnis 1. js-Speicher 2. Abtretung 3....
Übung zum dynamischen Erstellen von Dialogen entsprechend dem Dateinamen in vue+el-element
Inhaltsverzeichnis Hintergrund erreichen 1. Gekap...