Add an image layer to react mapbox gl

timeline系列文章链接：

Package AWS Lambda function (Mar 12, 2020)
Read H264 livestream using ffmpeg and cv2 (Mar 12, 2020)
Add an image layer to react mapbox gl (Mar 12, 2020)
IP Camera BAT 310 Hacking (Mar 12, 2020)
IP Camera BAT 310 Hacking (Mar 12, 2020)
Parse URL params using API Gateway and lambda (Mar 12, 2020)
Add an image layer to react mapbox gl (Mar 12, 2020)
Translante IDL script to python (Mar 12, 2020)
IP Camera BAT 310 Hacking (Mar 12, 2020)

Images could be added to mapbox using a Layer and a Source component.

Layer configuration

Prepare a source configuration by referenceing (this document)[https://docs.mapbox.com/mapbox-gl-js/style-spec/#sources-image]

const Image_SOURCE_OPTIONS = {
    "type": "image",
    "url": "https://docs.mapbox.com/mapbox-gl-js/assets/radar.gif",
    "coordinates": [
        [-80.425, 46.437],
        [-71.516, 46.437],
        [-71.516, 37.936],
        [-80.425, 37.936]
    ] 
};

For base64 image, the url could be data:image/png;base64, + base64 image data:

const Image_SOURCE_OPTIONS = {
    "type": "image",
    "url": "data:image/png;base64,...",
    "coordinates": [
        [-80.425, 46.437],
        [-71.516, 46.437],
        [-71.516, 37.936],
        [-80.425, 37.936]
    ] 
};

Create a Source

1	<Source id="source_id" tileJsonSource={RASTER_SOURCE_OPTIONS} />

Create a Layer

Reference (react-mapbox-gl document)[https://github.com/alex3165/react-mapbox-gl/blob/master/docs/API.md#layer], the type could only be symbol, line, raster, …

1	<Layer type="raster" id="layer_id" sourceId="source_id" />

专题: timeline

本文发表于 2020-03-12，最后修改于 2020-03-13。

本站永久域名「 jevy.wang 」，也可搜索「 Jevy Wang's Blog 」找到我。

期待关注我的 「知乎专栏」 ，查看最近的文章和动态。

上一篇 « Install owncloud with docker and local directory 下一篇 » IP Camera BAT 310 Hacking

Add an image layer to react mapbox gl

Layer configuration

Create a Source

Create a Layer

推荐阅读