Pbf BasicRender
Pbf BasicRender is a fork from maplibre-gl-js.
Usage
npm install pbf-basic-render --save
yarn add pbf-basic-render
import { BasicRenderer } from "pbf-basic-render";
const workCanv = document.createElement('canvas');
const basicRender = new BasicRenderer({
canvas: workCanv,
transformRequest: (url: string) => {
return {
url,
headers: someHeaders
}
},
style: {
version: 8,
sources: {
origin: {
type: "vector",
tiles: ['https://api.mapbox.com/v4/mapbox.82pkq93d/{z}/{x}/{y}.vector.pbf?sku=1012RMlsjWj1O&access_token=pk.eyJ1IjoiZXhhbXBsZXMiLCJhIjoiY2p0MG01MXRqMW45cjQzb2R6b2ptc3J4MSJ9.zA2W0IkI0c6KaAhJfk9bWg'],
},
},
layers: [
{
id: "background",
type: "background",
paint: {
"background-color": "transparent",
},
},
{
id: "polygon",
source: "origin",
"source-layer": "original",
type: "fill",
paint: {
"fill-color": "#00ffff",
'fill-outline-color': 'rgba(0,0,0,0.1)',
}
}
],
},
});
Introduction
You should also check Mapbox-vector-tiles-basic-js-renderer for more detail.
Bugs
- ('text-field') render can't work
Compile
Ensure you have installed node-gyp and Python environment, and then run this commond:
npm install
npm run postinstall
Credit
https://github.com/landtechnologies/Mapbox-vector-tiles-basic-js-renderer