如何在 React 本机 mapbox GL 上绘制多边形？答案

【问题标题】：How to draw polygon on React native mapbox GL?如何在 React 本机 mapbox GL 上绘制多边形？
【发布时间】：2022-08-02 13:30:13
【问题描述】：

我正在尝试在 React 本机 mapbox GL 库中绘制多边形。参考：https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/

所以在 React webapp 中，他们引入了特性，通过添加控制我们可以实现它。我想在 React 本机 mapbox GL 库中实现这一点。参考：https://github.com/rnmapbox/maps

所以请用样本指导我如何在 RN 地图上绘制它。

标签： react-native mapbox-gl-js turfjs react-native-mapbox-gl

【解决方案1】：

这是一个简单的例子：

import React from 'react';
import MapboxGL from '@react-native-mapbox-gl/maps';

// raster style for map
const MapStyle = JSON.stringify({
    sources: {
        osm: {
            type: 'raster',
            tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
            tileSize: 256,
            maxzoom: 19,
        },
    },
    layers: [
        {
            id: 'osm',
            type: 'raster',
            source: 'osm',
        },
    ],
});

// random generated geojson feature
const GeoJson: GeoJSON.FeatureCollection = {
    type: 'FeatureCollection',
    features: [
        {
            type: 'Feature',
            properties: {},
            geometry: {
                type: 'Polygon',
                coordinates: [
                    [
                        [-18.984375, 35.460669951495305],
                        [-11.953125, -41.50857729743933],
                        [66.4453125, -38.272688535980954],
                        [101.25, 18.646245142670608],
                        [73.125, 66.08936427047088],
                        [2.109375, 65.5129625532949],
                        [-18.984375, 35.460669951495305],
                    ],
                ],
            },
        },
    ],
};

// map component
const Map = () => {
    return (
        <MapboxGL.MapView style={{ flex: 1 }} styleJSON={MapStyle}>
            <MapboxGL.Camera
                defaultSettings={{
                    centerCoordinate: [39.7265625, 23.563987128451217],
                    zoomLevel: 0,
                }}
            />

            <MapboxGL.ShapeSource id={'some-feature'} shape={GeoJson}>
                <MapboxGL.LineLayer
                    sourceID="some-feature"
                    id="some-feature-line"
                    style={{
                        lineColor: '#ffffff',
                        lineWidth: 10,
                    }}
                />
                <MapboxGL.FillLayer
                    sourceID="some-feature"
                    id="some-feature-fill"
                    style={{
                        // Example of color interpolation using zoom
                        // more info: https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/
                        fillColor: ['interpolate', ['linear'], ['zoom'], 0, '#eeddbb', 2, '#0daa00', 3, '#bbbbee'],
                    }}
                />
            </MapboxGL.ShapeSource>
        </MapboxGL.MapView>
    );
};

文档参考：

about TileJson (styleJSON)

<MapboxGL.MapView />

<MapboxGL.Camera />

<MapboxGL.FillLayer />

<MapboxGL.LineLayer />

【讨论】：