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
Einführung in den Aufbau von NFS-Diensten unter Centos7
Inhaltsverzeichnis 1. Server 2. Kunde 3. Testdien...
Teilen Sie 13 hervorragende Web-Wireframe-Design- und Produktionstools
Wenn Sie mit der Arbeit an einem Projekt beginnen...
Detaillierte Erklärung der HTML-Tabellen-Tags (für Anfänger geeignet)
TABELLE> <TR> <TD> <TH> <...
Lösen Sie das Problem, dass Sie sich bei der Installation von MySQL auf einem Mac mit Homebrew nicht anmelden können
Wenn Ihr Computer ein Mac ist, ist die Verwendung...
Der Unterschied zwischen JS-Pre-Parsing und Variablen-Promotion im Web-Interview
Inhaltsverzeichnis Was ist eine Voranalyse? Der U...
Wissen Sie, wie Sie das Flash-Wmode-Attribut in Webseiten verwenden?
Bei der Webentwicklung kann es vorkommen, dass Fl...
jQuery Treeview-Baumstrukturanwendung
In diesem Artikelbeispiel wird der Anwendungscode...
Die drei neuen Indizes, die in MySQL 8 hinzugefügt wurden, sind versteckt, absteigend und Funktionen
Inhaltsverzeichnis Versteckte, absteigende und fu...
Detaillierte Erläuterung der Nginx-Statusüberwachung und Protokollanalyse
1. Nginx-Statusüberwachung Nginx bietet eine inte...
Navicat für MySql Visueller Import von CSV-Dateien
In diesem Artikel wird der spezifische Code von N...
Implementierung einer zeitgesteuerten MySQL-Datenbanksicherung (vollständige Datenbanksicherung)
Inhaltsverzeichnis 1. MySQL-Datensicherung 1.1. m...
Lösung für „Keine solche Datei oder kein solches Verzeichnis“ im Gebietsschema nach der Installation von glibc-2.14 in CentOS6.5
Inhaltsverzeichnis 1. In die Grube fallen 2. Verg...
mysql8.0.11 Winx64 Installations- und Konfigurationstutorial
Das Installationstutorial für MySQL 8.0.11 WinX64...
Nginx-Lastausgleichskonfiguration, automatischer Umschaltmodus bei Ausfallzeiten
Streng genommen verfügt nginx nicht über eine Int...
Docker implementiert das erneute Taggen und Löschen des Images des ursprünglichen Tags
Die Docker-Image-ID ist eindeutig und kann ein Im...