时间戳

首页 > 解决方案 > 是否可以使用 Mapbox 绘制具有海拔（高度）的 LineString？

maps - 是否可以使用 Mapbox 绘制具有海拔（高度）的 LineString？

问题描述

我正在使用 react-mapbox-gl 并试图将带有树坐标的 LineString 传递[[[58.7541522, 55.7444, 10], [48.7041522, 55.7444, 80]]]给GeoJSONLayerline-Layer 

 <GeoJSONLayer
                data={feature}
                linePaint={{
                    'line-color': '#3bb2d0',
                    'line-width': 2,
                }}
/>

但它不起作用

标签： mapsmapboxmapbox-gl-jsmapbox-gl

解决方案

有一种方法可以通过 mapbox-gl-js 使用fill-extrusion和扩展线串以表现得像一个非常薄的多边形。您可以使用lineToPolygonfrom@turf/line-to-polygon将 lineStrings 转换为多边形，以获取可填充的 GeoJSON，如下所示：

{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"height":40},"geometry":{"type":"Polygon","coordinates":[[[58.7541522,55.7444],[48.7041522,55.7444],[48.704152205,55.744405],[58.754152205,55.744405],[58.7541522,55.7444]]]}}]}

然后使用fill-extrusion图层类型将其添加到地图中。

        <Source
          id="linestr"
          geoJsonSource={{
            type: "geojson",
            data: geojson
          }}
        />
        <Layer
          id="linestr"
          sourceId="linestr"
          type="fill-extrusion"
          paint={{
            "fill-extrusion-color": "#f00",
            "fill-extrusion-base": 0.5,
            "fill-extrusion-opacity": 0.5,
            "fill-extrusion-height": ["get", "height"]
          }}
        />

这是完整的示例：https ://codesandbox.io/s/trusting-currying-fpbqf

推荐阅读