ym.services.Area

Overview

Die Area-Klasse ruft die Polygone einer Region über die GeoJson-WebService-Schnittstelle ab. Wird die Area-Klasse ohne erweiterte Kartenfunktionen verwendet, kann auf das GeoJson wie folgt zugegriffen werden:

Code example: Initialization area service

ym.ready(function () {
   var area = new ym.services.Area();

   area.on('success', function (request, response) {
      console.log(response.body);
   });

   area.load({lat: 51.163375, lng: 10.447683});
});

Constructor(options)

Der Konstruktor akzeptiert dieselben Optionen wie die Klasse ym.provider.GeoJSON.

Methods

Area.load(LatLng, levels, providerId)

Lädt GeoJson-Polygone vom GeoJson-WebService.

Parameter: latLng
Die Geo-Koordinate, in der gesucht werden soll.
Parameter: levels
Optional; Standardwert: [1, 2]. Es können mehrere Werte übergeben werden.

Level	Bedeutung
0	Land
1	Bundesland
2	Regierungsbezirk
3	Landkreis
4	POSTLEITZAHL
5	Gemeinde
6	Stadtbezirk

Parameter: providerId
Optional; Standard: OSM

Example call

area.load({lat: 51.163375, lng: 10.447683});

Area.addTo(layer)

Die Methode addTo wird verwendet, um einen Area für einen Karten-Layer zu registrieren und ihn automatisch zu aktualisieren, sobald ein neues GeoJson verfügbar ist. Das bedeutet, dass Sie kein weiteres GeoJson-Objekt erstellen müssen und sich nicht um den Success-Listener kümmern müssen. Ab dem Moment, in dem Sie sich bei den Layern registrieren, wird die GeoJSON-Anzeige jedes Mal aktualisiert, sobald eine neue Anfrage an die GeoJSON-Schnittstelle erfolgt. Der Karten-Layer muss eine Instanz von ym.provider.Map sein.

Parameter: layer
Der von ym.provider.Map abgeleitete Karten-Layer, auf dem der Area gezeichnet werden soll.

Example calls

Das Beispiel ist vollständig; Sie können es lokal in einer Datei speichern und in Ihrem Browser ansehen. Sie müssen zuvor lediglich den Wert für den apiKey ersetzen.

Im ersten Beispiel werden die Verwaltungsebenen 1 bis 3 angefordert, also Bundesland, Landkreis und Regierungsbezirk.

Code example: Example call (Lvl. 1 - 3)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8" />
</head>
<body>
    <!-- Position where a map should be displayed. The ID is referred to at the bottom of the script. -->
    <div id="map" style="height: 400px; width: 700px;"></div>

    <!-- Loading of the SmartMaps API. -->
    <script src="https://www.yellowmap.de/api_rst/api/loader/?apiKey=[INSERT API-KEY]&libraries=free-3"></script>

    <!-- Access to the SmartMaps API. -->
    <script>
        ym.ready(function (modules) {
           var provider = modules.provider;

           var map = new provider.Map("map", {
              center: new provider.LatLng(51.163375, 10.447683), // Center of Germany
              zoom: 6
           });

           var area = new ym.services.Area({
              onEachFeature: function (feature, layer) {
                 var popupContent = "";
                 for (var k in feature.properties) {
                    popupContent += "<b>" + k + "</b> " + feature.properties[k] + "<br>";
                 }
                 layer.bindPopup("<pre>" + popupContent + "</pre>");
              }
           });
           area.addTo(map);

           area.load(map.getCenter(), [1,2,3]);

           window.map = map;
        });
    </script>
</body>
</html>

Alternativ können Sie den Area selbst instanziieren und den Success-Listener verwenden:

Code example: Example call (Success-Listener)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8" />
</head>
<body>
    <!-- Position where a map should be displayed. The ID is referred to at the bottom of the script. -->
    <div id="map" style="height: 400px; width: 700px;"></div>

    <!-- Loading of the SmartMaps API. -->
    <script src="https://www.yellowmap.de/api_rst/api/loader/?apiKey=[INSERT API-KEY]&libraries=free-3"></script>

    <!-- Access to the SmartMaps API. -->
    <script>
        ym.ready(function (modules) {
           var provider = modules.provider;

           var map = new provider.Map("map", {
              center: new provider.LatLng(51.163375, 10.447683), // Center of Germany
              zoom: 6
           });

           var geoJson = new provider.GeoJSON(null, {
              onEachFeature: function (feature, layer) {
                 var popupContent = "";
                 for (var k in feature.properties) {
                    popupContent += "<b>" + k + "</b> " + feature.properties[k] + "<br>";
                 }
                 layer.bindPopup("<pre>" + popupContent + "</pre>");
              }
           });

           var area = new ym.services.Area();
           area.on('success', function (request, response) {
              geoJson.addData(response.body);
           });

           area.load(map.getCenter(), [1,2,3]);

           geoJson.addTo(map);

           window.map = map;
        });
    </script>
</body>
</html>

Area.removeFrom(layer)

Entfernt das GeoJson vom Layer.

Events

Die Grundlage der Area-Klasse ist die Request-Klasse. Entsprechend gibt es auch die Event-Listener success und error, die mitteilen, ob eine Anfrage erfolgreich war oder fehlgeschlagen ist.