数据驱动的圆半径更大属性

Question

当数据属性--total 更大时，我想画更大的圆圈。 deviceGeojson 是数据，我想我应该在 'circle-raduis' 内写一些代码，但我不知道如何获取它。

var deviceGeojson = [{
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [144.961027, -37.795947]
            },
            "properties": {
                "PC": 100,
                "Mobile": 200,
                "Laptop": 300,
                "total": 600
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [144.960205, -37.797596]
            },
            "properties": {
                "PC": 100,
                "Mobile": 200,
                "Laptop": 300,
                "total": 600
            }
        }
        ];

map.addLayer({
                'id': 'test',
                'type': 'circle',
                'source' : {
                    "type": "geojson",
                    "data": {
                        "type": "FeatureCollection",
                        "features": deviceGeojson,
                    }

            },
            'paint':{
                'circle-color': '#00b7bf',
                'circle-radius': {

                },
                'circle-stroke-width': 1,
                'circle-stroke-color': '#333',
            }
        });

不知道'paint'里面的代码怎么写，谢谢

Answer 1

您可以使用表达式来获取属性:

的值

"circle-radius": ['get', 'total']

或者，如果您要将 total 属性的值设置为 20，您将执行如下操作：

"circle-radius": ['/', ['get', 'total'], 20],

您可以在此处阅读有关表达式的更多信息：https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions

数据驱动的圆半径更大 属性

circle-radius bigger with a data-driven property

mapbox

mapbox-gl-js

数据驱动的圆半径更大属性