Lösen Sie das Problem beim Laden der Vektorkartenquelle in OpenLayers 3
1. VektorkarteVektorgrafiken verwenden gerade Linien und Kurven zur Beschreibung von Grafiken. Die Elemente dieser Grafiken sind Punkte, Linien, Rechtecke, Polygone, Kreise, Bögen usw., die alle durch die Berechnung mathematischer Formeln erhalten werden. Da Vektorgrafiken durch Formelberechnung erstellt werden können, ist die Dateigröße von Vektorgrafiken im Allgemeinen gering. Der größte Vorteil von Vektorgrafiken besteht darin, dass sie nicht verzerrt werden, egal ob sie vergrößert, verkleinert oder gedreht werden. Karten haben eine große Zahl von Anwendungsmöglichkeiten und stellen einen sehr wichtigen Bestandteil von Kartendaten dar. Um die Speicherung, Übertragung und Verwendung zu erleichtern, werden Vektorkarten in bestimmten Formaten ausgedrückt, beispielsweise den gängigen Formaten 2. Laden von Vektorkarten im GeoJson-Format1. Projektstruktur
2. Karte.geojson
3. karte.html
<!Doctype html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<Kopf>
<meta http-equiv='Inhaltstyp' content='text/html;charset=utf-8'>
<meta http-equiv='X-UA-kompatibel' content='IE=edge,chrome=1'>
<Metainhalt='immer' Name='Referrer'>
<title>OpenLayers 3: Vektorkarten laden</title>
<link href='ol.css ' rel='stylesheet' type='text/css'/>
<Skripttyp='text/javascript' src='ol.js' charset='utf-8'></Skript>
</Kopf>
<Text>
<div id='Karte' style='Breite: 1000px;Höhe: 800px;Rand: auto'></div>
<Skript>
/**
* Erstelle eine Karte */
neue alte Karte({
// Festlegen der Kartenebenen layer: [
//Erstellen Sie eine Ebene, die die Open Street Map-Kartenquelle verwendet new ol.layer.Tile({
Quelle: neue ol.source.OSM()
}),
//Lade eine GeoJSON-Vektorkarte new ol.layer.Vector({
Quelle: neuer ol.source.Vector({
url: 'geojson/map.geojson', // Kartenquellformat: neues ol.format.GeoJSON() // Formatierungsklasse zum Parsen von Vektorkarten})
})
],
// Ansicht so einstellen, dass die Kartenansicht angezeigt wird: new ol.View({
center: [104,30], // Setzt den Mittelpunkt der Kartenanzeige auf den Längengrad 104 Grad und den Breitengrad 30 Grad zoom: 10, // Setzt die Kartenanzeigeebene auf 10
Projektion: 'EPSG:4326' //Projektion festlegen}),
// Lassen Sie das Div mit der ID „map“ der Container des Map-Ziels sein: „map“
})
</Skript>
</body>
</html>
4. Operationsergebnisse
3. Holen Sie sich alle Features auf der Vektorkarte und legen Sie den Stil fest1.Karte2.html
<!Doctype html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<Kopf>
<meta http-equiv='Inhaltstyp' content='text/html;charset=utf-8'>
<meta http-equiv='X-UA-kompatibel' content='IE=edge,chrome=1'>
<Metainhalt='immer' Name='Referrer'>
<title>OpenLayers 3: Alle Features auf der Vektorkarte abrufen und den Stil festlegen</title>
<link href='ol.css ' rel='stylesheet' type='text/css'/>
<Skripttyp='text/javascript' src='ol.js' charset='utf-8'></Skript>
</Kopf>
<Text>
<div id='Karte' style='Breite: 800px;Höhe: 500px;Rand: auto'></div>
<br>
<div Stil = 'Breite: 800px;Rand: auto'>
<button type="button" onclick = 'updateStyle()' >Feature-Stil ändern</button>
</div>
<Skript>
/**
* Erstelle eine Karte */
var map = neues ol.Map({
// Festlegen der Kartenebenen layer: [
//Erstellen Sie eine Ebene, die die Open Street Map-Kartenquelle verwendet new ol.layer.Tile({
Quelle: neue ol.source.OSM()
}),
],
// Ansicht so einstellen, dass die Kartenansicht angezeigt wird: new ol.View({
center: [104,30], // Setzt den Mittelpunkt der Kartenanzeige auf den Längengrad 104 Grad und den Breitengrad 30 Grad zoom: 10, // Setzt die Kartenanzeigeebene auf 10
Projektion: 'EPSG:4326' //Projektion festlegen}),
// Lassen Sie das Div mit der ID „map“ der Container des Map-Ziels sein: „map“
});
//Erstellen Sie eine Quellebene für die Vektorkarte und legen Sie den Stil fest var vectorLayer = new ol.layer.Vector({
Quelle: neuer ol.source.Vector({
url: 'geojson/map.geojson', // Quellformat der Karte: neues ol.format.GeoJSON() // Formatierungsklasse zum Parsen von Vektorkarten}),
// Stil festlegen, Farbe ist grün, Linienstärke ist 1 Pixel style: new ol.style.Style({
Strich: neuer ol.style.Stroke({
Farbe: 'grün',
Größe: 1
})
})
});
map.addLayer(Vektorebene);
/**
* Alle Features auf der Vektorebene abrufen und den Stil festlegen */
Funktion updateStyle(){
//Erstelle einen Stil mit roter Farbe und einer Linienstärke von 3 Pixeln var featureStyle = new ol.style.Style({
Strich: neuer ol.style.Stroke({
Farbe: 'rot',
Größe: 3
})
})
//Alle Features auf der Vektorebene abrufen
var Funktionen = Vektorlayer.getSource().getFeatures()
//Alle Features durchlaufen und den Stil für jedes Feature festlegen for (var i = 0; i < features.length; i++) {
Funktionen[i].setStyle(Funktionsstil)
}
}
</Skript>
</body>
</html>
2. Ergebnisse der Operation
4. Konvertierung des Koordinatensystems einer Vektorkarte Vektorkarten verwenden 1.Karte3.html
<!Doctype html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<Kopf>
<meta http-equiv='Inhaltstyp' content='text/html;charset=utf-8'>
<meta http-equiv='X-UA-kompatibel' content='IE=edge,chrome=1'>
<Metainhalt='immer' Name='Referrer'>
<title>OpenLayers 3: Konvertierung des Koordinatensystems einer Vektorkarte</title>
<link href='ol.css ' rel='stylesheet' type='text/css'/>
<Skripttyp='text/javascript' src='ol.js' charset='utf-8'></Skript>
<script src="jquery-3.6.0.js"></script>
</Kopf>
<Text>
<div id='Karte' style='Breite: 1000px;Höhe: 800px;Rand: auto'></div>
<Skript>
/**
* Erstelle eine Karte */
var map = neues ol.Map({
// Festlegen der Kartenebenen layer: [
//Erstellen Sie eine Ebene, die die Open Street Map-Kartenquelle verwendet new ol.layer.Tile({
Quelle: neue ol.source.OSM()
})
],
// Ansicht so einstellen, dass die Kartenansicht angezeigt wird: new ol.View({
center: ol.proj.fromLonLat([104,30]), // Stelle den Mittelpunkt der Kartenanzeige auf den Längengrad 104 Grad und den Breitengrad 30 Grad ein zoom: 10, // Stelle die Kartenanzeigeebene auf 10 ein
}),
// Lassen Sie das Div mit der ID „map“ der Container des Map-Ziels sein: „map“
});
// Vektorkarte laden Funktion addGeoJSON(data) {
var layer = neuer ol.layer.Vektor({
Quelle: neuer ol.source.Vector({
Features: (neues ol.format.GeoJSON()).readFeatures(data, { // Verwenden Sie die Methode readFeatures, um das Koordinatensystem anzupassen dataProjection: 'EPSG:4326', // Legen Sie das von den JSON-Daten verwendete Koordinatensystem fest featureProjection: 'EPSG:3857' // Legen Sie das Koordinatensystem des von der aktuellen Karte verwendeten Features fest })
})
});
map.addLayer(Ebene);
};
$.ajax({
URL: „geojson/map.geojson“,
Erfolg: Funktion (Daten, Status) {
//Nach erfolgreichem Abrufen des Dateninhalts die Methode zum Hinzufügen der Vektorkarte zur Karte aufrufen addGeoJSON(data);
}
});
</Skript>
</body>
</html>
2. Ergebnisse der Operation
Dies ist das Ende dieses Artikels über die Quelle für das Laden von Vektorkarten in OpenLayers 3. Weitere Informationen zum Laden von Vektorkarten in OpenLayers 3 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:
|
<<: Spezifische Verwendung von MySQL-Operatoren (und, oder, in, nicht)
Artikel empfehlen
Vue implementiert Paging-Funktion
In diesem Artikelbeispiel wird der spezifische Co...
Implementierung der Multisite-Konfiguration von Nginx auf Mac M1
Hinweis: nginx über brew installiert Stammverzeic...
Codebeispiele für MySQL-Batchoperationsanweisungen „Select“, „Insert“ und „Update“
In Projekten werden häufig Batch-Operationsanweis...
Der Unterschied zwischen ID- und Name-Attributen von HTML-Elementen
Heute bin ich etwas verwirrt über <a href="...
27 Linux-Befehle zum Bearbeiten von Dokumenten, die es wert sind, gesammelt zu werden
Linux-Befehl „col“ Der Linux-Befehl col wird zum ...
Detaillierte Erklärung der React-Ereignisbindung
1. Was ist In react Anwendungen werden Ereignisna...
So lässt man in CSS die Höhe eines untergeordneten Divs den verbleibenden Platz des übergeordneten Containers ausfüllen
1. Verwenden Sie die Floating-Methode Effektbild:...
Lösungen für Probleme im Zusammenhang mit der Meldung von Softwarepaketabhängigkeiten während der Installation unter Linux
Inhaltsverzeichnis Hintergrund 1) Aktivieren Sie ...
CSS-Standard: Eigenschaft „vertical-align“
<br />Originaltext: http://www.mikkolee.com/...
Ein Artikel zum Verständnis der erweiterten Funktionen von K8S
Inhaltsverzeichnis Erweiterte Funktionen des K8S ...
Tomcat meldet einen Fehler beim Starten des Springboot-Projekt-War-Pakets: Fehler beim Starten des untergeordneten
Heute ist das Springboot-Projekt des Unternehmens...
Detaillierte Erklärung zur JavaScript-Datenabflachung
Inhaltsverzeichnis Was ist Abflachung? Rekursion ...
Detaillierte Analyse mehrerer Situationen, in denen MySQL-Indizes fehlschlagen
1. Führende Fuzzy-Abfragen können keinen Index ve...
Prinzip und Anwendungsbeispiele des URL-Umschreibmechanismus von Nginx
Durch das Umschreiben der URL lässt sich die bevo...
Tutorial zur Installation des MySQL 5.7.18-Binärpakets unter Linux (ohne Standardkonfigurationsdatei my_default.cnf)
Ich lerne gerade MySQL. Ich bin ein kompletter Ne...