mirror of
https://github.com/protomaps/PMTiles.git
synced 2026-02-04 10:51:07 +00:00
70 lines
2.4 KiB
HTML
70 lines
2.4 KiB
HTML
<html>
|
|
<head>
|
|
</head>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@1.14.1-rc.2/dist/maplibre-gl.css" crossorigin="anonymous">
|
|
<script src="https://unpkg.com/maplibre-gl@1.14.1-rc.2/dist/maplibre-gl.js" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/pmtiles@1.0.0/dist/index.js"></script>
|
|
<!-- <script src="../js/dist/index.js"></script> -->
|
|
<style>
|
|
body, #map {
|
|
height:100vh;
|
|
margin:0px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
<script>
|
|
let cache = new pmtiles.ProtocolCache();
|
|
maplibregl.addProtocol("pmtiles",cache.protocol);
|
|
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>
|
|
</html> |