Mapbox JS -集群计数层异常

Mapbox JS - Exception on cluster count layer

本文关键字：异常 JS -集 Mapbox      更新时间：2023-09-26

我得到了一个Mapbox地图与多个集群和一个非集群层的工作没有例外。但是当我尝试添加集群计数层时，我在控制台中获得以下错误:Uncaught TypeError:不能使用'in'操作符在未定义的中搜索'point_count'。

我遵循了Mapbox集群教程，但不明白为什么会出现这个错误。

下面是我的代码: 
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
        }
    }
}

此异常源于不正确的GeoJSON结构。

在提供的JSFiddle中，您包含了许多结构类似于以下的GeoJSON特性:

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

GeoJSON规范说:

一个特性对象必须有一个名为"properties"的成员。properties成员的值是一个对象(任何JSON对象或JSON空值)。

properties成员应该在Feature对象上，而不是Point对象上。正确格式化的特性应该像

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

下面是一个没有错误的修改后的演示:https://jsfiddle.net/dyhhqLda/2/

相关文章：