使用动态样式为同一图层内的多个多边形设置单独的填充颜色

时间:2018-10-02 13:09:48

标签: react-native mapbox geojson mapbox-gl

使用react-native-mapbox-gl。

是否可以使用动态样式为同一图层或FeatureCollection中的每个多边形设置单独的填充颜色?目前,我正在将一个FeatureCollection对象传递给MapboxGL.ShapeSource,但不确定如何访问“循环”以及如何从feature属性中设置各个样式。我知道我可以从他们的文档中使用[“ get”,“ color”],但是对我来说,它的实现尚不清楚。例子...

        <View style={GLOBAL_WRAP.WRAP}>
            <MapboxGL.MapView
                centerCoordinate={[ userLocation.longitude, userLocation.latitude ]}
                pitchEnabled={false}
                rotateEnabled={false}
                style={{ flex: 1 }}
                showUserLocation={true}
                styleURL={MapboxGL.StyleURL.Standard}
                userTrackingMode={MapboxGL.UserTrackingModes.MGLUserTrackingModeFollow}
                zoomLevel={8}
            >
                    <MapboxGL.ShapeSource
                        key='polygon'
                        id='polygon'
                        onPress={this._onPolyPress}
                        shape={{type: "FeatureCollection", features: polyFeatures}}
                        type='geojson'
                    >
                        <MapboxGL.FillLayer
                            id="smileyFaceFill"
                            style={MapboxGL.StyleSheet.create({
                                fillAntialias: true,
                                fillColor: ["get", "color"]
                            })}
                        />
                    </MapboxGL.ShapeSource>
            </MapboxGL.MapView>
            { this._renderModal()}
        </View>

polyFeature 看起来像这样...

{
type: "FeatureCollection",
features: [
    type: "Feature"
    geometry: {
        type: "MultiPolygon",
        coordinates: [ 
            [ Array(2), Array(2) ],
            [ Array(2), Array(2) ],
        ]
    }
    properties: {
        color: "#323232",
        name: "example name",
        id: 1,
    },
    type: "Feature",
    geometry: {
        type: "MultiPolygon",
        coordinates: [ 
            [ Array(2), Array(2) ],
            [ Array(2), Array(2) ],
        ]
    }
    properties: {
        color: "#323232",
        name: "example name",
        id: 1,
    },
    ....
    ...
]

}

0 个答案:

没有答案