2016-08-22 3 views
0

Ich habe eine Mapbox Map mit mehreren Cluster und einem Nicht-Cluster-Schichten, die ohne Ausnahmen funktionieren. Aber wenn ich versuche, einen Cluster-Zähler-Layer hinzuzufügen, erhalte ich den folgenden Fehler in der Konsole: Uncaught TypeError: Kann 'in' Operator nicht verwenden, um nach 'Point_count' in undefined zu suchen.Mapbox JS - Ausnahme auf Clusteranzahl Ebene

Ich folgte the Mapbox cluster tutorial, kann aber nicht sehen, warum dieser Fehler angezeigt wird.

Hier ist mein Code:

function setMyApplicationLayers(map, layers) { 
    getMyApplicationLayers().forEach(function(layer) { 
     map.addLayer(layer); 
    }) 
} 

function getMyApplicationLayers() { 
    var layers = [getMyApplicationRestaurantItemLayer()]; 

    ['#ef59a1', '#6ecff6', '#d7df21'] 
      .forEach(function(color, index) { 
     layers.push(getMyApplicationRestaurantGroupLayer(index, color)); 
    }); 

    layers.push(getMyApplicationRestaurantCountLayer()); 

    return layers; 
} 

function getMyApplicationRestaurantItemLayer() { 
    return { 
     id: 'unclustered-restaurants', 
     type: 'symbol', 
     source: 'my-application-restaurants', 
     layout: { 
      'icon-image': 'marker-15' 
     } 
    } 
} 

function getMyApplicationRestaurantGroupLayer(index, color) { 
    return { 
     id: 'clustered-restaurants-' + index, 
     type: 'circle', 
     source: 'my-application-restaurants', 
     paint: { 
      'circle-color': color, 
      'circle-radius': 18 
     }, 
     filter: getMyApplicationRestaurantGroupLayerFilter(index) 
    } 
} 

function getMyApplicationRestaurantGroupLayerFilter(index) { 
    switch (index) { 
     case 0: 
      return ['>=', 'point_count', 25] 
     case 1: 
      return ['all', 
       ['>=', 'point_count', 5], 
       ['<', 'point_count', 25]] 
     case 2: 
      return ['all', 
       ['>=', 'point_count', 0], 
       ['<', 'point_count', 5]] 
    } 
} 

function getMyApplicationRestaurantCountLayer() { 
    return { 
     id: 'cluster-count', 
     type: 'symbol', 
     source: 'my-application-restaurants', 
     layout: { 
      'text-field': '{point_count}', 
      'text-font': [ 
       'DIN Offc Pro Medium', 
       'Arial Unicode MS Bold' 
      ], 
      'text-size': 12 
     } 
    } 
} 
+1

Ich sehe keine Probleme mit dem entsandten Code. Können Sie ein ausführbares Beispiel veröffentlichen, das den Fehler veranschaulicht? –

+0

Hier ist ein [JSFiddle] (https://jsfiddle.net/dyhhqLda/2/). Versuchen Sie zu vergrößern/verkleinern und schauen Sie sich die Konsole an. Vielen Dank ! – OhmWang

Antwort

0

Diese Ausnahme ergibt sich aus einer falschen GeoJSON Struktur.

In der mitgelieferten JSFiddle umfassen Sie eine Reihe von GeoJSON wie diese strukturiert Eigenschaften:

{ 
    type: 'Feature', 
    geometry: { 
     type: 'Point', 
     properties: { 
      description: 'kuk' 
     }, 
     coordinates: [2.7, 46.95] 
    } 
} 

Die GeoJSON Spezifikation sagt:

A feature object must have a member with the name "properties". The value of the properties member is an object (any JSON object or a JSON null value).

Das properties Mitglied sollte auf dem Feature Objekt sein, nicht das Objekt Point. Ein richtig formatiert Feature würde so aussehen

{ 
    type: 'Feature', 
    properties: { 
     description: 'kuk' 
    }, 
    geometry: { 
     type: 'Point', 
     coordinates: [2.7, 46.95] 
    } 
} 

Hier ist eine modifizierte Demo ohne den Fehler: https://jsfiddle.net/dyhhqLda/2/

Verwandte Themen