mirrors/PMTiles
1
0
Fork 0
mirror of https://github.com/protomaps/PMTiles.git synced 2026-02-04 10:51:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

add addProtocol for maplibre [#6]

Browse Source
This commit is contained in:
Brandon Liu
2021-06-08 18:15:50 +08:00
parent 150a2561c2
commit 1bceca9535
2 changed files with 97 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
examples/maplibre.html
View File

@@ -4,9 +4,9 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.protomaps.com/maplibre-gl-js/1.13.0pm1/mapbox-gl.css" crossorigin="anonymous"> <link rel="stylesheet" href="http://localhost:9600/dist/maplibre-gl.css" crossorigin="anonymous">
<script src="https://cdn.protomaps.com/maplibre-gl-js/1.13.0pm1/mapbox-gl.js" crossorigin="anonymous"></script> <script src="http://localhost:9600/dist/maplibre-gl-dev.js" crossorigin="anonymous"></script>
<script src="../js/pmtiles.js"></script> <script src="../js/index.js"></script>
<style> <style>
body, #map { body, #map {
height:100vh; height:100vh;
@@ -15,8 +15,54 @@
</style> </style>
</head> </head>
<body> <body>
<div id="map"></div> <div id="map"></div>
<script> <script>
</script> pmtiles.addProtocol(maplibregl)
var style = {
"version": 8,
"sources": {
"tpe_sample": {
"type": "vector",
"tiles": ["pmtiles://tpe_sample.pmtiles/{z}/{x}/{y}"],
"maxzoom":14
}
},
"layers": [
{
"id": "buildings",
"type": "fill",
"source":"tpe_sample",
"source-layer":"buildings",
"paint": {
"fill-color":"black"
}
},
{
"id": "roads",
"type": "line",
"source":"tpe_sample",
"source-layer":"roads",
"paint": {
"line-color":"red"
}
},
{
"id": "mask",
"type": "fill",
"source":"tpe_sample",
"source-layer":"mask",
"paint": {
"fill-color":"white"
}
}
]
}
var map = new maplibregl.Map({
container: 'map',
center: [121.5177,25.0412],
zoom: 14,
style: style
});
</script>
</body> </body>
</html> </html>

59
js/index.src.mjs
View File

@@ -128,20 +128,7 @@ export class PMTiles {
}) })
} }
transformRequest = (u,t,tile,done) => { // leaflet adapter
if (u.endsWith('.pmtiles') && done) {
var tid = tile.tileID.canonical
var strid = tid.z + '_' + tid.x + '_' + tid.y
this.getZxy(tid.z,tid.x,tid.y).then(val => {
if (val) {
done({url: this.url, headers:{'Range':'bytes=' + val[0] + '-' + (val[0]+val[1]-1)}})
}
})
}
return {url: u}
}
// take URL here
leafletLayer = options => { leafletLayer = options => {
const self = this const self = this
var cls = L.GridLayer.extend({ var cls = L.GridLayer.extend({
@@ -189,4 +176,48 @@ export class PMTiles {
}) })
return new cls(options) return new cls(options)
} }
// for mapboxgl fork at 1.13
// will be deprecated soon
transformRequest = (u,t,tile,done) => {
if (u.endsWith('.pmtiles') && done) {
var tid = tile.tileID.canonical
var strid = tid.z + '_' + tid.x + '_' + tid.y
this.getZxy(tid.z,tid.x,tid.y).then(val => {
if (val) {
done({url: this.url, headers:{'Range':'bytes=' + val[0] + '-' + (val[0]+val[1]-1)}})
}
})
}
return {url: u}
}
}
export const addProtocol = maplibre_instance => {
let re = new RegExp(/pmtiles:\/\/(.+)\/(\d+)\/(\d+)\/(\d+)/)
let pmtiles_instances = new Map()
maplibregl.addProtocol('pmtiles', (params, callback) => {
let result = params.url.match(re)
let pmtiles_url = result[1]
if (!pmtiles_instances.has(pmtiles_url)) {
pmtiles_instances.set(pmtiles_url,new pmtiles.PMTiles(pmtiles_url))
}
let instance = pmtiles_instances.get(pmtiles_url)
let z = result[2]
let x = result[3]
let y = result[4]
instance.getZxy(+z,+x,+y).then(val => {
if (val) {
let headers = {'Range':'bytes=' + val[0] + '-' + (val[0]+val[1]-1)}
fetch(pmtiles_url,{headers:headers}).then(resp => {
return resp.arrayBuffer()
}).then(arr => {
callback(null,arr,null,null)
})
} else {
callback(null,new Uint8Array(),null,null)
}
})
return { cancel: () => { console.log("Cancel not implemented") } }
})
} }