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
Schritte zum Konfigurieren von Nginx SSL zur Implementierung des HTTPS-Zugriffs (für Anfänger geeignet)
Vorwort Nach der Bereitstellung des Servers besuc...
Detaillierte Erklärung der RPM-Installation in MySQL
Installation und Deinstallation anzeigen # rpm -q...
Detaillierter Code des Beispiels zum Herunterladen des Docker-Installationspakets von yum und zur Installation auf einem Offline-Computer
1. Verwenden Sie auf einem vernetzten Computer di...
SSM VUE Axios Detaillierte Erklärung
Inhaltsverzeichnis Wie wird das SQL-Protokoll ang...
Detaillierte Erklärung, wie Sie den Speicherverbrauch in MySql reduzieren können
Vorwort Standardmäßig initialisiert MySQL einen g...
So führen Sie den Betrieb nach dem Verlassen des Docker-Containers weiter aus
Phänomen: Führen Sie ein Image aus, zum Beispiel ...
Paketieren, Zusammenführen und Komprimieren von Vue-Projekten zur Optimierung der Reaktionsgeschwindigkeit von Webseiten
Inhaltsverzeichnis Vorwort 1. Der Anforderungsinh...
XHTML-Einführungstutorial: Webseitenkopf und DTD
Obwohl Kopf und DTD nicht auf der Seite angezeigt...
Beispielcode zur Implementierung komplexer Tabellenüberschriften in HTML-Tabellen
Verwenden Sie HTML, um komplexe Tabellen zu erste...
So verwenden Sie JS zum Implementieren des Wasserfalllayouts von Webseiten
Inhaltsverzeichnis Vorwort: Was ist ein Wasserfal...
So deinstallieren Sie Docker Toolbox vollständig
Docker Toolbox ist eine Lösung zur Installation v...
So ändern Sie die Standardübermittlungsmethode des Formulars
Die Standard-Übermittlungsmethode von HTML ist get...
JavaScript-Lösung für die Setinterval-Verzögerung um eine Sekunde
Bei Verwendung von setinterval wird festgestellt,...
Einfaches Anwendungsbeispiel für rekursive MySQL 8.0-Abfragen
Vorwort Dieser Artikel verwendet die neuen Funkti...
MySQL-Tutorial zum Bereitstellen mehrerer Instanzen auf einer einzigen Maschine mit mysqld_multi
Inhaltsverzeichnis 1. MySQL-Kompilierung und -Ins...