yejiyang
diff --git a/‎prototype/geotiff/index.html
Lines changed: 22 additions & 0 deletions b/‎prototype/geotiff/index.html
Lines changed: 22 additions & 0 deletions
diff --git a/‎prototype/geotiff/main.js
Lines changed: 24 additions & 0 deletions b/‎prototype/geotiff/main.js
Lines changed: 24 additions & 0 deletions
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>GeoTIFF with Overviews</title>
+    <link rel="stylesheet" href="node_modules/ol/ol.css">
+    <style>
+        .map {
+            width: 100%;
+            height: 400px;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="map" class="map"></div>
+
+    <script type="module" src="main.js"></script>
+</body>
+
+</html>
@@ -0,0 +1,24 @@
+import GeoTIFF from "ol/source/GeoTIFF.js";
+import Map from "ol/Map.js";
+import TileLayer from "ol/layer/WebGLTile.js";
+
+const source = new GeoTIFF({
+  sources: [
+    {
+      //   url: "https://openlayers.org/data/raster/no-overviews.tif",
+      //   url: "https://ngimapservicestorage.blob.core.windows.net/geotiff/TNW/TWN-R01_cog.tif",
+      url: "https://ngimapservicestorage.blob.core.windows.net/geotiff/TNW/TWN-R01.tif",
+      //   overviews: ["https://openlayers.org/data/raster/no-overviews.tif.ovr"],
+    },
+  ],
+});
+
+const map = new Map({
+  target: "map",
+  layers: [
+    new TileLayer({
+      source: source,
+    }),
+  ],
+  view: source.getView(),
+});