35 lines
950 B
HTML
35 lines
950 B
HTML
|
<script src="https://labs.geomatico.es/maplibre-cog-protocol/dist/index.js"></script>
|
||
|
|
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
|
||
|
|
<link
|
||
|
|
rel="stylesheet"
|
||
|
|
href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css"
|
||
|
|
/>
|
||
|
|
<section class="map-container">
|
||
|
|
<div id="map" style="height: 400px"></div>
|
||
|
|
<script>
|
||
|
|
let map = new maplibregl.Map({
|
||
|
|
container: "map",
|
||
|
|
style: "https://tiles.semitamaps.com/styles/maptiler-basic/style.json",
|
||
|
|
center: [117.9588, 5.81513],
|
||
|
|
zoom: 11,
|
||
|
|
});
|
||
|
|
|
||
|
|
maplibregl.addProtocol("cog", MaplibreCOGProtocol.cogProtocol);
|
||
|
|
|
||
|
|
map.on("load", () => {
|
||
|
|
map.addSource("imageSource", {
|
||
|
|
type: "raster",
|
||
|
|
url: "cog://http://localhost:5000/download/10072.tif",
|
||
|
|
tileSize: 256,
|
||
|
|
minzoom: 0,
|
||
|
|
});
|
||
|
|
|
||
|
|
map.addLayer({
|
||
|
|
id: "imageLayer",
|
||
|
|
source: "imageSource",
|
||
|
|
type: "raster",
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</section>
|