Jevy Wang's Blog

Add an image layer to react mapbox gl

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

Layer configuration

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

1
2
3
4
5
6
7
8
9
10
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:

1
2
3
4
5
6
7
8
9
10
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" />

专题:

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

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

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


上一篇 « IP Camera BAT 310 Hacking 下一篇 » Parse URL params using API Gateway and lambda

赞赏支持

请我吃胡萝卜 =^_^=

i ali

支付宝

i wechat

微信

推荐阅读

Big Image