Lösen Sie das Problem beim Laden der Vektorkartenquelle in OpenLayers 3

Lösen Sie das Problem beim Laden der Vektorkartenquelle in OpenLayers 3

1. Vektorkarte

Vektorgrafiken 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 GeoJSON , TopoJSON , GML , KML , ShapeFile usw. Zusätzlich zur letzten ShapeFile unterstützt OpenLayers 3 mehrere andere Vektorkartenformate.

2. Laden von Vektorkarten im GeoJson-Format

1. Projektstruktur

2. Karte.geojson

{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[104.08859252929688,30.738294707383368],[104.18060302734375,30.691068801620155],[104.22042846679688,30.739475058679485],[104.08859252929688,30.738294707383368]]]}},{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[104.08859252929688,30.52323029223123],[104.08309936523438,30.359841397025537],[104.1998291015625,30.519681272749402],[104.08859252929688,30.52323029223123]]]}},{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[103.70269775390624,30.675715404167743],[103.69308471679688,30.51494904517773],[103.83316040039062,30.51494904517773],[103.86474609375,30.682801890953776],[103.70269775390624,30.675715404167743]]]}}]}

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 fest

1.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 EPSG:4326 . Wir können den integrierten Kartenformatparser in OpenLayers 3 verwenden, um Koordinaten in EPSG:3857

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:
  • Detaillierte Erklärung der Kartenüberlagerung in OpenLayers6
  • Drei häufige Verwendungen von OpenLayers6-Karten-Overlays (Markierungstext im Popup-Fenster)
  • Openlayers zeichnet Kartenanmerkungen

<<:  Spezifische Verwendung von MySQL-Operatoren (und, oder, in, nicht)

>>:  Einführung in die Partitionierung des Stammverzeichnisses von Ubuntu mit der virtuellen Maschine Vmvare

Artikel empfehlen

Problem bei der Schriftartauswahl für Copyright-Symbole in HTML (wie man Copyright-Symbole schöner macht)

1. Entdecken Sie das Problem &copy; ist das Co...

Ein Beispiel, wie Tomcat Session verwaltet

Sie haben ConcurrentHashMap gelernt, wissen aber ...

Einführung in die Verwendung der vier wichtigsten SQL-Rankingfunktionen ROW_NUMBER, RANK, DENSE_RANK, NTILE

1. ROW_NUMBER() Definition: Die Funktion ROW_NUMB...

Eine vollständige Anleitung zur Konfiguration von Linux-Umgebungsvariablen

Konfiguration der Linux-Umgebungsvariablen Beim A...

Detaillierte Erläuterung der Wissenspunkte zu Linux-Dateivorgängen

Verwandte Systemaufrufe für Dateioperationen erst...

In der HTML-Tabelle wird nur der äußere Rand der Tabelle angezeigt

Ich möchte eine Frage stellen. Ich habe in Dreamw...

MySQL-8.0.26 Konfigurationsgrafik-Tutorial

Vorwort: Vor kurzem hat das Unternehmensprojekt d...

So verbergen Sie die Versionsnummer und die Cache-Zeit von Webseiten in Nginx

Nginx-Optimierung --- Versionsnummer und Cache-Ze...

VUE implementiert Token-Anmeldeüberprüfung

In diesem Artikelbeispiel wird der spezifische Co...

Beispiel für eine Vue-Datenanzeige auf einem großen Bildschirm

Um die Anforderungen effizient zu erfüllen und au...

Implementierung des Docker-Buildings für Maven+Tomcat-Basisimages

Vorwort In der Java-Programmierung werden die mei...

Detaillierte Erläuterung zum Upgrade von Python und zur Installation von Pip unter Linux

Upgrade der Linux-Version: 1. Stellen Sie zunächs...

Ein kurzer Vortrag über Responsive Design

1. Was ist Responsive Design? Responsive Design b...

RHCE installiert Apache und greift mit einem Browser auf IP zu

1. at ist so konfiguriert, dass nach 5 Stunden „D...

Detaillierte Erläuterung der MySQL 8.0-Wörterbuchtabellenerweiterung

Das Datenwörterbuch in MySQL ist eine der wichtig...