2017-07-10 6 views
0

Ich möchte sowohl den Marker als auch die Anzahl der verfügbaren Punkte in einem bestimmten Längen- und Breitengrad anzeigen.Wie kann ich die Anzahl der Punkte in der jeweiligen Breite und Länge in Mapboxgl anzeigen?

enter image description here

Ich erwarte, dass über etwas Ähnliches wie.

Aber ich habe weitere 2 Schichten hinzugefügt, um andere Farbe und Zahl darauf anzuzeigen. Wenn ich so vorgehe, erhalte ich einen "undefinierten" Fehler, während das Popup angezeigt wird. Da die Daten von der anderen Schicht übernommen werden. Wenn es von den "Lagen" des Layers ausgeht, funktioniert es wie erwartet. Aber wenn wir mehrere Vorkommen haben, zeigt Popup-Inhalt "undefined". Im Folgenden finden Sie meine Implementierung Ausgabe und Code

enter image description here

map.on('load', function() { 

    map.addSource("place", { 
    type: "geojson", 
    data: liveData, 
    cluster: true, 
    clusterMaxZoom: 14, 
    clusterRadius: 50 
    }); 

map.addLayer({ 
    "id": "locations", 
    "type": "circle", 
    "source": "location", 
    "paint": { 
     "circle-radius": 7, 
     "circle-color": "#FFF000", 
     "circle-stroke-width": 4, 
     "circle-stroke-color": "#FFFFFF" 
    } 

    }); 

    map.addLayer({ 
     id: "clusters", 
     type: "circle", 
     source: "location", 
     filter: ["has", "point_count"], 
     paint: { 
      "circle-color": { 
       property: "point_count", 
       type: "interval", 
       stops: [ 
        [0, "#FFF000"], 
        [2, "#DC143C"], 
       ] 
      }, 
      "circle-radius": { 
       property: "point_count", 
       type: "interval", 
       stops: [ 
        [0, 7], 
        [2, 7], 
       ] 
      } 
     } 
    }); 

    map.addLayer({ 
     id: "cluster-count", 
     type: "symbol", 
     source: "location", 
     filter: ["has", "point_count"], 
     layout: { 
      "text-field": "{point_count_abbreviated}", 
      "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"], 
      "text-size": 12, 
      "text-offset": [0, 5] 
     } 
    }); 

map.on('click', 'locations', function (e) { 
    let htmlString = ""; 
    for (let i = 0; i < e.features.length; i++) { 
     htmlString = htmlString + e.features[i].properties.description; 
     if (i != e.features.length - 1) { 
     htmlString = htmlString + "</br>"; 
     } 
    } 
    new mapboxgl.Popup() 
     .setLngLat(e.features[0].geometry.coordinates) 
     .setHTML(htmlString) 
     .addTo(map); 

    }); 
} 

My working fiddle

soll ich in meinem Ansatz arbeitet diese als erstes Bild oder Pop-up zu erreichen?

Antwort

Verwandte Themen