OpenLayers realisiert die Methode zur aggregierten Anzeige von Punkt-Feature-Layern

OpenLayers realisiert die Methode zur aggregierten Anzeige von Punkt-Feature-Layern

1. Einleitung

In vielen Fällen kann die Anzahl der Features in einem Punkt-Feature-Layer Hunderte oder Tausende betragen. Wenn sie ohne jegliche Verarbeitung direkt auf die Karte geladen werden, verschlechtert sich nicht nur das visuelle Erlebnis des Benutzers, sondern es kommt auch dazu, dass die Kartenoberfläche einfriert. Der folgende Code erstellt 1000 zufällige Punkte zur Anzeige:

<!DOCTYPE html>
<html>
<Kopf>
    <meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <Titel>OpenLayers</Titel>
    <Stil>
        html, Text, #map {
            Breite: 100 %;
            Höhe: 100%;
            Rand: 0;
            Polsterung: 0;
        }
    </Stil>
    <link href="libs/ol/ol.css" rel="stylesheet" />
    <script src="libs/ol/ol.js"></script>
</Kopf>
<Text>
    <div id="Karte"></div>

    <Skript>
        // 1000 zufällige Funktionen erstellen var source = new ol.source.Vector();
        für (var i = 1; i <= 200; i++) {
            var Koordinaten = [120,00 + Math.random(), 30,00 + Math.random()];
            var feature = neues ol.Feature(neues ol.geom.Point(Koordinaten));
            Quelle.AddFeature(Feature);
        }
        für (var i = 1; i <= 200; i++) {
            var Koordinaten = [120,01 + Math.random(), 30,01 + Math.random()];
            var feature = neues ol.Feature(neues ol.geom.Point(Koordinaten));
            Quelle.AddFeature(Feature);
        }
        für (var i = 1; i <= 200; i++) {
            var Koordinaten = [120,02 + Math.random(), 30,02 + Math.random()];
            var feature = neues ol.Feature(neues ol.geom.Point(Koordinaten));
            Quelle.AddFeature(Feature);
        }
        für (var i = 1; i <= 200; i++) {
            var Koordinaten = [120,03 + Math.random(), 30,03 + Math.random()];
            var feature = neues ol.Feature(neues ol.geom.Point(Koordinaten));
            Quelle.AddFeature(Feature);
        }
        für (var i = 1; i <= 200; i++) {
            var Koordinaten = [120,04 + Math.random(), 30,04 + Math.random()];
            var feature = neues ol.Feature(neues ol.geom.Point(Koordinaten));
            Quelle.AddFeature(Feature);
        }

        // Eine Ebene erstellen var layer = new ol.layer.Vector({
            Quelle: Quelle,
            Stil: Funktion (Merkmal, Auflösung) {
                var Stil = neuer ol.Stil.Stil({
                    Bild: neues ol.style.Icon({
                        Quelle: „img/location.png“
                    })
                })
                Rückgabestil;
            }
        });

        // Eine Karte erstellen var map = new ol.Map({
            Ziel: 'Karte',
            Schichten:
                neue ol.layer.Tile({
                    Quelle: neue ol.source.OSM()
                }),
                Schicht
            ],
            Ansicht: neue ol.View({
                Projektion: 'EPSG:4326',
                Mitte: [120, 30],
                Zoom: 10,
                minZoom: 5,
                maxZoom: 14
            })
        });
    </Skript>
</body>
</html>

Die Laufergebnisse sind in der folgenden Abbildung dargestellt:

Bildbeschreibung hier einfügen

Ist es nicht abstoßend, so viele Punkte so dicht beieinander zu sehen? Wenn ein Punkt-Feature-Layer eine große Anzahl von Punkten enthält, verarbeiten wir ihn im Allgemeinen durch圖層聚合. Beachten Sie jedoch:圖層聚合只對點要素圖層有效，對線和面圖層無效.

2. Aggregation von Punkt-Feature-Layern

In openlayers lauten die allgemeinen Schritte zur Layer-Aggregation wie folgt:

  • Erstellen von Features
  • Erstellen einer Datenquelle und Hinzufügen von Features
  • Erstellen einer aggregierten Datenquelle und Festlegen der Aggregationsdistanz
  • Erstellen Sie eine Ebene und legen Sie die Datenquelle auf die aggregierte Datenquelle fest
  • Erstellen einer Karte und Hinzufügen einer Aggregatebene

Der Layer-Aggregationscode lautet wie folgt:

<!DOCTYPE html>
<html>
<Kopf>
    <meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <Titel>OpenLayers</Titel>
    <Stil>
        html, Text, #map {
            Breite: 100 %;
            Höhe: 100%;
            Rand: 0;
            Polsterung: 0;
        }
    </Stil>
    <link href="libs/ol/ol.css" rel="stylesheet" />
    <script src="libs/ol/ol.js"></script>
</Kopf>
<Text>
    <div id="Karte"></div>

    <Skript>
        // 1000 zufällige Funktionen erstellen var source = new ol.source.Vector();
        für (var i = 1; i <= 200; i++) {
            var Koordinaten = [120,00 + Math.random(), 30,00 + Math.random()];
            var feature = neues ol.Feature(neues ol.geom.Point(Koordinaten));
            Quelle.AddFeature(Feature);
        }
        für (var i = 1; i <= 200; i++) {
            var Koordinaten = [120,01 + Math.random(), 30,01 + Math.random()];
            var feature = neues ol.Feature(neues ol.geom.Point(Koordinaten));
            Quelle.AddFeature(Feature);
        }
        für (var i = 1; i <= 200; i++) {
            var Koordinaten = [120,02 + Math.random(), 30,02 + Math.random()];
            var feature = neues ol.Feature(neues ol.geom.Point(Koordinaten));
            Quelle.AddFeature(Feature);
        }
        für (var i = 1; i <= 200; i++) {
            var Koordinaten = [120,03 + Math.random(), 30,03 + Math.random()];
            var feature = neues ol.Feature(neues ol.geom.Point(Koordinaten));
            Quelle.AddFeature(Feature);
        }
        für (var i = 1; i <= 200; i++) {
            var Koordinaten = [120,04 + Math.random(), 30,04 + Math.random()];
            var feature = neues ol.Feature(neues ol.geom.Point(Koordinaten));
            Quelle.AddFeature(Feature);
        }

        // Aggregationsvar cluster = new ol.source.Cluster({
            Quelle: Quelle,
            Entfernung: 100
        })

        // Eine Ebene erstellen var layer = new ol.layer.Vector({
            Quelle: Cluster,
            Stil: Funktion (Merkmal, Auflösung) {
                var Größe = Feature.get('Features').Länge;
                var Stil = neuer ol.Stil.Stil({
                    Bild: neuer ol.style.Circle({
                        Radius: 30,
                        Strich: neuer ol.style.Stroke({
                            Farbe: 'weiß'
                        }),
                        füllen: neues ol.style.Fill({
                            Farbe: 'blau'
                        })
                    }),
                    Text: neuer ol.style.Text({
                        Text: size.toString(),
                        füllen: neues ol.style.Fill({
                            Farbe: 'weiß'
                        })
                    })
                })
                Rückgabestil;
            }
        });

        // Eine Karte erstellen var map = new ol.Map({
            Ziel: 'Karte',
            Schichten:
                neue ol.layer.Tile({
                    Quelle: neue ol.source.OSM()
                }),
                Schicht
            ],
            Ansicht: neue ol.View({
                Projektion: 'EPSG:4326',
                Mitte: [120, 30],
                Zoom: 10,
                minZoom: 5,
                maxZoom: 14
            })
        });
    </Skript>
</body>
</html>

Die Laufergebnisse sind in der folgenden Abbildung dargestellt:

Bildbeschreibung hier einfügen

3. Spezielle Behandlung der Polymerisation

Obwohl der obige Code die Aggregation von Punkt-Feature-Layern realisiert, gibt es tatsächlich ein Problem:地圖縮放層級最大時仍然保持著聚合效果, wie in der folgenden Abbildung gezeigt:

Bildbeschreibung hier einfügen

Generell gilt:當某處只有一個點時就應該取消聚合效果. Zu diesem Zeitpunkt müssen wir einige Änderungen am style: function (feature, resolution) . Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<Kopf>
    <meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <Titel>OpenLayers</Titel>
    <Stil>
        html, Text, #map {
            Breite: 100 %;
            Höhe: 100%;
            Rand: 0;
            Polsterung: 0;
        }
    </Stil>
    <link href="libs/ol/ol.css" rel="stylesheet" />
    <script src="libs/ol/ol.js"></script>
</Kopf>
<Text>
    <div id="Karte"></div>

    <Skript>
        // 1000 zufällige Funktionen erstellen var source = new ol.source.Vector();
        für (var i = 1; i <= 200; i++) {
            var Koordinaten = [120,00 + Math.random(), 30,00 + Math.random()];
            var feature = neues ol.Feature(neues ol.geom.Point(Koordinaten));
            Quelle.AddFeature(Feature);
        }
        für (var i = 1; i <= 200; i++) {
            var Koordinaten = [120,01 + Math.random(), 30,01 + Math.random()];
            var feature = neues ol.Feature(neues ol.geom.Point(Koordinaten));
            Quelle.AddFeature(Feature);
        }
        für (var i = 1; i <= 200; i++) {
            var Koordinaten = [120,02 + Math.random(), 30,02 + Math.random()];
            var feature = neues ol.Feature(neues ol.geom.Point(Koordinaten));
            Quelle.AddFeature(Feature);
        }
        für (var i = 1; i <= 200; i++) {
            var Koordinaten = [120,03 + Math.random(), 30,03 + Math.random()];
            var feature = neues ol.Feature(neues ol.geom.Point(Koordinaten));
            Quelle.AddFeature(Feature);
        }
        für (var i = 1; i <= 200; i++) {
            var Koordinaten = [120,04 + Math.random(), 30,04 + Math.random()];
            var feature = neues ol.Feature(neues ol.geom.Point(Koordinaten));
            Quelle.AddFeature(Feature);
        }

        // Aggregationsvar cluster = new ol.source.Cluster({
            Quelle: Quelle,
            Entfernung: 100
        })

        // Eine Ebene erstellen var layer = new ol.layer.Vector({
            Quelle: Cluster,
            Stil: Funktion (Merkmal, Auflösung) {
                var Größe = Feature.get('Features').Länge;
                wenn (Größe == 1) {
                    gib neuen ol.style.Style zurück({
                        Bild: neues ol.style.Icon({
                            Quelle: „img/location.png“
                        })
                    })
                }
                anders {
                    gib neuen ol.style.Style zurück({
                        Bild: neuer ol.style.Circle({
                            Radius: 30,
                            Strich: neuer ol.style.Stroke({
                                Farbe: 'weiß'
                            }),
                            füllen: neues ol.style.Fill({
                                Farbe: 'blau'
                            })
                        }),
                        Text: neuer ol.style.Text({
                            Text: size.toString(),
                            füllen: neues ol.style.Fill({
                                Farbe: 'weiß'
                            })
                        })
                    })
                }
            }
        });

        // Eine Karte erstellen var map = new ol.Map({
            Ziel: 'Karte',
            Schichten:
                neue ol.layer.Tile({
                    Quelle: neue ol.source.OSM()
                }),
                Schicht
            ],
            Ansicht: neue ol.View({
                Projektion: 'EPSG:4326',
                Mitte: [120, 30],
                Zoom: 10,
                minZoom: 5,
                maxZoom: 14
            })
        });
    </Skript>
</body>
</html>

Die Laufergebnisse sind in der folgenden Abbildung dargestellt:

Bildbeschreibung hier einfügen

Tatsächlich ist dieser Effekt sehr einfach zu implementieren. Der Kerncode lautet: var size = feature.get('features').length; Wenn size>1 ist, wird der Aggregatstil zurückgegeben, andernfalls der Bildstil.

4. Spezielle Behandlung der Polymerisation 2

Im obigen Code habe ich die maximale Zoomstufe der Karte auf 14 eingestellt, was zu einem Problem führt:當地圖縮放到最大層級時，還有很多點保持著聚合效果. Manchmal fordern Benutzer möglicherweise當地圖縮放到最大層級時，取消全部聚合效果. Wenn wir diese Funktion implementieren möchten, müssen wir auf die Kartenereignisse hören. Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<Kopf>
    <meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <Titel>OpenLayers</Titel>
    <Stil>
        html, Text, #map {
            Breite: 100 %;
            Höhe: 100%;
            Rand: 0;
            Polsterung: 0;
        }
    </Stil>
    <link href="libs/ol/ol.css" rel="stylesheet" />
    <script src="libs/ol/ol.js"></script>
</Kopf>
<Text>
    <div id="Karte"></div>

    <Skript>
        // 1000 zufällige Funktionen erstellen var source = new ol.source.Vector();
        für (var i = 1; i <= 200; i++) {
            var Koordinaten = [120,00 + Math.random(), 30,00 + Math.random()];
            var feature = neues ol.Feature(neues ol.geom.Point(Koordinaten));
            Quelle.AddFeature(Feature);
        }
        für (var i = 1; i <= 200; i++) {
            var Koordinaten = [120,01 + Math.random(), 30,01 + Math.random()];
            var feature = neues ol.Feature(neues ol.geom.Point(Koordinaten));
            Quelle.AddFeature(Feature);
        }
        für (var i = 1; i <= 200; i++) {
            var Koordinaten = [120,02 + Math.random(), 30,02 + Math.random()];
            var feature = neues ol.Feature(neues ol.geom.Point(Koordinaten));
            Quelle.AddFeature(Feature);
        }
        für (var i = 1; i <= 200; i++) {
            var Koordinaten = [120,03 + Math.random(), 30,03 + Math.random()];
            var feature = neues ol.Feature(neues ol.geom.Point(Koordinaten));
            Quelle.AddFeature(Feature);
        }
        für (var i = 1; i <= 200; i++) {
            var Koordinaten = [120,04 + Math.random(), 30,04 + Math.random()];
            var feature = neues ol.Feature(neues ol.geom.Point(Koordinaten));
            Quelle.AddFeature(Feature);
        }

        // Aggregationsvar cluster = new ol.source.Cluster({
            Quelle: Quelle,
            Entfernung: 100
        })

        // Eine Ebene erstellen var layer = new ol.layer.Vector({
            Quelle: Cluster,
            Stil: Funktion (Merkmal, Auflösung) {
                var Größe = Feature.get('Features').Länge;
                wenn (Größe == 1) {
                    gib neuen ol.style.Style zurück({
                        Bild: neues ol.style.Icon({
                            Quelle: „img/location.png“
                        })
                    })
                }
                anders {
                    gib neuen ol.style.Style zurück({
                        Bild: neuer ol.style.Circle({
                            Radius: 30,
                            Strich: neuer ol.style.Stroke({
                                Farbe: 'weiß'
                            }),
                            füllen: neues ol.style.Fill({
                                Farbe: 'blau'
                            })
                        }),
                        Text: neuer ol.style.Text({
                            Text: size.toString(),
                            füllen: neues ol.style.Fill({
                                Farbe: 'weiß'
                            })
                        })
                    })
                }
            }
        });

        // Eine Karte erstellen var map = new ol.Map({
            Ziel: 'Karte',
            Schichten:
                neue ol.layer.Tile({
                    Quelle: neue ol.source.OSM()
                }),
                Schicht
            ],
            Ansicht: neue ol.View({
                Projektion: 'EPSG:4326',
                Mitte: [120, 30],
                Zoom: 10,
                minZoom: 5,
                maxZoom: 14
            })
        });

        // Auf Ereignisse zur Änderung der Kartenauflösung warten map.getView().on('change:resolution', function (event) {
            wenn (map.getView().getZoom() == map.getView().getMaxZoom()) {
                cluster.setDistance(0);
            }
            anders {
                cluster.setDistance(100);
            }
        })
    </Skript>
</body>
</html>

Die Laufergebnisse sind in der folgenden Abbildung dargestellt:

Bildbeschreibung hier einfügen

Die Implementierung dieses Effekts ist ebenfalls sehr einfach. Sie müssen nur auf das Ereignis zur Änderung der Auflösung der aktuellen Karte hören. Wenn die aktuelle Zoomstufe bereits die maximale Stufe ist, setzen Sie die Aggregationsdistanz auf 0 .

5. Fazit

Bei einer großen Anzahl von Elementen sollten wir eine Zusammenlegung in Betracht ziehen. Dadurch wird nicht nur das Benutzererlebnis verbessert, sondern auch ein Einfrieren der Benutzeroberfläche vermieden. Tatsächlich habe ich im obigen Code auf change:resolution gehört. Sie können es auch in ein anderes Ereignis ändern - moveend . Der Code lautet wie folgt:

map.on('moveend', Funktion (Ereignis) {
    wenn (map.getView().getZoom() == map.getView().getMaxZoom()) {
        cluster.setDistance(0);
    }
    anders {
        cluster.setDistance(100);
    }
});

Derselbe Effekt lässt sich durch Abhören des moveend Ereignisses erzielen, da dieses Ereignis unabhängig davon ausgelöst wird, ob die Karte gezoomt oder geschwenkt wird.

Dies ist das Ende dieses Artikels über die Implementierung der aggregierten Anzeige von Punkt-Feature-Layern in OpenLayers. Weitere Inhalte zur aggregierten Anzeige von Punkt-Feature-Layern in OpenLayers finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Openlayers+EasyUI Tree realisiert dynamisch die Layer-Steuerung
  • OpenLayers3 implementiert Layer-Steuerungsfunktion
  • OpenLayers implementiert Layer-Switching-Steuerung

<<:  Lösung für Ubuntu 20.04 Firefox kann keine Videos abspielen (Flash-Plug-In fehlt)

>>:  Äußerst detaillierte Freigabe der MySQL-Nutzungsspezifikation

Artikel empfehlen

Detaillierte Erläuterung der Dateisystemformate der EXT-Serie in Linux

Linux-Dateisystem In der Abbildung oben sind herk...

Detaillierte Diskussion der Speicherprinzipien: Werden Variablen in JS im Heap oder Stack gespeichert?

Inhaltsverzeichnis 1. Der Elefant, der nicht in d...

So richten Sie einen freigegebenen Ordner auf einer virtuellen VMware16-Maschine ein

1. Richten Sie auf der virtuellen Maschine einen ...

12 nützliche Array-Tricks in JavaScript

Inhaltsverzeichnis Array-Deduplizierung 1. from()...

VUE Erste Schritte Erlernen der Ereignisbehandlung

Inhaltsverzeichnis 1. Funktionsbindung 2. Mit Par...

Tutorial zur Installation von Android Studio unter Ubuntu 19 und darunter

Aus Erfahrung weiß man, dass es eine gute Angewoh...

Der grundlegendste Code für Webseiten

◆Zu Favoriten hinzufügen veranschaulichen Klicken...

So gehen Sie mit dem Verlust von Parametern um, wenn Sie die Seite aktualisieren und Parameter an den Vue-Router übergeben

Inhaltsverzeichnis Überblick Methode 1: Parameter...

Vue realisiert den Logistik-Timeline-Effekt

In diesem Artikelbeispiel wird der spezifische Co...

Der vollständige Prozess der Docker-Image-Erstellung

Inhaltsverzeichnis Vorwort Erstellungsschritte Er...

So erstellen Sie schnell MySQL Master-Slave mit mysqlreplicate

Einführung Das mysql-utilities-Toolset ist eine S...

Detaillierte Erklärung des Unterschieds zwischen der v-model-Direktive und dem .sync-Modifikator in Vue

Inhaltsverzeichnis V-Modell .sync Der Unterschied...

HTML-Kopfstruktur

Im Folgenden werden die häufig verwendete Kopfstr...

Die wichtigsten Unterschiede zwischen MySQL 4.1/5.0/5.1/5.5/5.6

Einige Befehlsunterschiede zwischen den Versionen...

Die Eisernen Gesetze der MySQL-Datenbank (Zusammenfassung)

Gute Datenbankspezifikationen tragen dazu bei, di...