29:null 2a:["$","title",null,{"children":"GeoTiffをフロントエンドでレンダリングする | shimizu | Observable"}] 2f:T516,function generateColor(colorStart,colorEnd,colorCount){ const hex = (c)=> { var s = "0123456789abcdef"; var i = parseInt (c); if (i == 0 || isNaN (c)) return "00"; i = Math.round (Math.min (Math.max (0, i), 255)); return s.charAt ((i - i % 16) / 16) + s.charAt (i % 16); } /* カラーヘックス値の'#'を削除する */ const trim = (s) => { return (s.charAt(0) == '#') ? s.substring(1, 7) : s } /* 16進文字列をRGB値に変換する */ const convertToRGB = (hex) => { var color = []; color[0] = parseInt ((trim(hex)).substring (0, 2), 16); color[1] = parseInt ((trim(hex)).substring (2, 4), 16); color[2] = parseInt ((trim(hex)).substring (4, 6), 16); return color; } // グラデーションの開始色 var start = convertToRGB (colorStart); // グラデーションの終了色 var end = convertToRGB (colorEnd); // 計算する色数 var len = colorCount; //アルファ値 var alpha = 0.0; var saida = []; for (let i = 0; i < len; i++) { var c = []; alpha += (1.0/len); c[0] = start[0] * alpha + (1 - alpha) * end[0]; c[1] = start[1] * alpha + (1 - alpha) * end[1]; c[2] = start[2] * alpha + (1 - alpha) * end[2]; saida.push(c); } return saida.reverse(); }30:[{"id":"4c9d0657822332fb2675c8994f77f5bf1c100fe78ae62964eff24997b0505cf0fe7f384f13db61afbc7c0722d4bbbd38f46ecde0de345855f3266c9219d8ca2f","href":"https://static.observableusercontent.com/files/4c9d0657822332fb2675c8994f77f5bf1c100fe78ae62964eff24997b0505cf0fe7f384f13db61afbc7c0722d4bbbd38f46ecde0de345855f3266c9219d8ca2f","name":"band.png","type":"image/png","lastModified":1676979397113.573,"size":5629},{"id":"8df0da61331ade8dfb7add73b67f71e8725a6f725a8003b5b23abe8e2adbe7e8a320ba9e35e10336cf9264fa911c2e4337a0d4de981ece6a9e63524e07cb86f7","href":"https://static.observableusercontent.com/files/8df0da61331ade8dfb7add73b67f71e8725a6f725a8003b5b23abe8e2adbe7e8a320ba9e35e10336cf9264fa911c2e4337a0d4de981ece6a9e63524e07cb86f7","name":"dem2.tif","type":"image/tiff","lastModified":1676977906640.456,"size":3379884}] 2d:{"id":"1372b97d0a54d206","slug":null,"title":"GeoTiffをフロントエンドでレンダリングする","thumbnail":"92905af59cc6ecf3232f146c297a666a491116ed7481df152b5178c2dcfbc027","access_level":"public","create_time":"$D2023-02-21T11:11:03.245Z","update_time":"$D2023-02-22T01:10:14.425Z","view_time":null,"first_public_time":"$D2023-02-21T13:44:51.425Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"d24c0ca9d1300164","login":"shimizu","name":"shimizu","avatar_url":"https://avatars-next.observableusercontent.com/4911d1cb615a6d69d84f6803f9c18eb02a7074312fbb7a8868ab03134a7e9ddc","tier":"starter_2024"},"version":354,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"871e5a5f08c8ef40","login":"shimizu","name":"shimizu","avatar_url":"https://avatars-next.observableusercontent.com/4911d1cb615a6d69d84f6803f9c18eb02a7074312fbb7a8868ab03134a7e9ddc","tier":null}],"members":[{"type":"individual","id":"871e5a5f08c8ef40","login":"shimizu","name":"shimizu","avatar_url":"https://avatars-next.observableusercontent.com/4911d1cb615a6d69d84f6803f9c18eb02a7074312fbb7a8868ab03134a7e9ddc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"GeoTiffをフロントエンドでレンダリングする","cells":[{"id":0,"value":"# GeoTiffをフロントエンドでレンダリングする","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":173,"value":"GeoTiffファイルは、一般的な画像データと違い各ピクセルに標高値や衛星のセンサーから取得された値などが挿入されています。
\nそのため、そのままではweb上で正しく表示することができません。
\nここでは、HTMLのグラフィックキャンバス要素(Context 2D)を使用して、GeoTiffデータをフロントエンドで配色し表示する方法について説明します。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"## 使用するファイル - dem2.tiff","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"国土地理院の標高データ(DEM)をQGISを使って、GeoTiffに変換したものを使います。[(参考)](https://qiita.com/nokonoko_1203/items/b99aa733cb215305f8aa)
\n必要であれば右メニューのクリップアイコンからダウンロードできます。\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"dem2 = FileAttachment(\"dem2.tif\").blob()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"## 1.geotiff.jsを用意する","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":228,"value":"[geotiff.js](https://geotiffjs.github.io/)は、視覚化または分析のためにTIFFファイルを解析するためのライブラリで、フロントエンドでGeoTiffファイルを扱うには必須となるライブラリです。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"geotiff = require(\"geotiff.js@1.0.1/dist/geotiff.bundle.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"## 2.geotiff.jsを使ってメタ情報を読み込む\n今回はdem2.tiffをblobデータとして読み込んでいるのでfromBlobメソッドを使っていますが、通常サーバーに置いたファイルを読み込む時はfromURLメソッドでURLを指定してファイルを読みこむことができます。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"demTiff = geotiff.fromBlob(dem2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"## 3. 画像データを取得する","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":314,"value":"画像データを取得します。
\n勘違いしやすいですがここではまだ実際のラスターデータはロードしていません。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"image = demTiff.getImage()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"あとで地図に載せるときに使うのでバウンディボックスの値を取得しておきます。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":197,"value":"bbox = image.getBoundingBox()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"## 4.画像データをcanvasに転写してレンダリングする","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":65,"value":"dem2ファイルのバンド値は55.25～204.70004で、1バンドのみです。
\nこの値をひとまずcanvasのRGBA値に適用して表示してみます。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":68,"value":"band = FileAttachment(\"band.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"### 出力結果","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"renderMono()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"レンダリング関数","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":80,"value":"async function renderMono(){\n //ラスターデータを非同期に取得するためのプールを用意する\n const pool = new geotiff.Pool();\n //ラスターデータを取得(非同期)\n const rasters = await image.readRasters({pool:pool}); \n \n const [band1] = rasters; //バンド値を読み出す。\n\n //画像の解像度を取得\n const { width, height } = rasters;\n \n //転写用のバッファを用意する\n const data = new Uint8ClampedArray(width * height * 4);\n\n //とりあえずバンド値をそのままrgbに入れてみる\n for (let i = 0; i < band1.length; i++) {\n data[i * 4] = band1[i];\n data[i * 4 + 1] = band1[i];\n data[i * 4 + 2] = band1[i];\n data[i * 4 + 3] = band1[i] == 0 ? 0 : 255;\n }\n\n //新しいイメージデータをラスターデータと同じ解像度で生成する\n const newImage = new ImageData(data, width, height)\n\n //camvasのコンテキストを生成する\n let ctx = DOM.context2d(newImage.width, newImage.height, 1);\n //コンテキストに転写したデータを描画する\n ctx.putImageData(newImage, 0, 0);\n\n //データを転写したキャンバスエレメントを返す\n return ctx.canvas;\n \n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"dem2のバンド値が8bit(0～255)だったので、そのままカラー値としてピクセルに転写できましたが、バンド値が8bit以上の場合値によっては画像が真っ暗になったり、真っ白になったりします。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":114,"value":"### 配色してみる\nここからは、バンド値をもとにピクセルに色を付けてみたいと思います。\nただし、ピクセルにバンド値を転写するループは **解像度✕RGBA(`width * height * 4`)** 回実行されるので、ループ内で重い処理を行うとブラウザクラッシュが発生してしまいます。\nそこで、今回は204-55=149個のグラデーションカラーを配列として生成しておいて適時適用する方法を考えてみました。
\nこの辺は工夫しだいでもっとうまいやり方があるかもしれません。\nまた、扱うデータの内容よって配色の仕組みを調整する必要があります。
\n([plotty.js](https://github.com/santilland/plotty)を使うと高速にカラースケーリングを行うことができます)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":129,"value":"グラデーション生成関数","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":101,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"砂色から赤のグラデーションカラーを149個生成しました。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":105,"value":"colors = generateColor(\"#dcd3b2\", \"#FF0000\", 149)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"赤いところが最大値に近い場所(標高が高い)近い場所になります。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":169,"value":"### 出力結果","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":143,"value":"colorTiff = renderColor()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"### レンダリング関数","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":138,"value":"async function renderColor(){\n //ラスターデータを非同期に取得するためのプールを用意する\n const pool = new geotiff.Pool();\n //ラスターデータを取得(非同期)\n const rasters = await image.readRasters({pool:pool}); \n \n const [band1] = rasters; //バンド値を読み出す。\n\n //画像の解像度を取得\n const { width, height } = rasters;\n \n //転写用のバッファを用意する\n const data = new Uint8ClampedArray(width * height * 4);\n\n //ルールに基いてバンド値をカラー値に変換してピクセルに転写する\n for (let i = 0; i < band1.length; i++) {\n const value = ~~(band1[i] - 55) //最小値を引いた上で小数点を切り捨てた値を取得する\n const [_r, _g, _b] = colors[value] || [0, 0, 0] //カラー配列のインデックに適用する\n data[i * 4] = _r;\n data[i * 4 + 1] = _g;\n data[i * 4 + 2] = _b;\n data[i * 4 + 3] = band1[i] > threshold ? 255 : 0; //閾値を設定している。後述する地図で使う\n }\n\n //canvasコンテキストに写す\n const newImage = new ImageData(data, width, height)\n let ctx = DOM.context2d(newImage.width, newImage.height, 1);\n ctx.putImageData(newImage, 0, 0);\n return ctx.canvas;\n \n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"# deck.glに載せてみる","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":226,"value":"最後に上記で生成したcanvas要素をdeck.glのbitmapLayerを使って地図上に表示してみます。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":288,"value":"GeoTiffをフロントエンドでレンダリングする最大の利点は、バンド値に条件を設定して動的に描画を変更できるところです。
\nそこで、ここでは閾値を用いて描画する領域を変更できるようにしてみました。\n下記スライドを使って描画する標高の閾値を変更してみてください。
\n** ※注意:閾値を変更するたび再レンダリングが実行されます。スライダーはスライド(ドラッグ)せずクリックして閾値を変更してください。
連続的に閾値が変更されるとブラウザ負荷が非常に高くなりクラッシュするおそれがあります。**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":279,"value":"viewof threshold = Inputs.range([55, 205], {step: 1, value:55, label: \"標高閾値\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"container = html `

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"以下、deck.glのコード","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":188,"value":"setLayers = { \n\n //レンダリングしたtiff画像をビットマップレイヤーで表示する\n const tiffLayer = new deck.BitmapLayer({\n id: 'bitmap-layer',\n opacity:0.7,\n bounds: bbox,\n image: colorTiff\n });\n\n \n //地理院地図タイルを表示\n //ref:https://maps.gsi.go.jp/development/ichiran.html\n const tileLayer = new deck.TileLayer({\n data: 'https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg',\n\n minZoom: 0,\n maxZoom: 19,\n tileSize: 256,\n\n renderSubLayers: props => {\n const {\n bbox: {west, south, east, north}\n } = props.tile;\n\n return new deck.BitmapLayer(props, {\n data: null,\n image: props.data,\n bounds: [west, south, east, north]\n });\n }\n });\n \n deckgl.setProps({layers: [tileLayer, tiffLayer]})\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"deckgl = {\n //observable対応：再実行された際にコンテナ内の要素を一旦クリアする\n container.innerHTML = '';\n\n //deck.gl初期設定\n return new deck.DeckGL({\n container,\n initialViewState: {\n longitude: 139.0639,\n latitude: 36.2936,\n zoom: 11,\n minZoom: 4,\n maxZoom: 15, \n },\n controller: true,\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"# libs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"deck = require.alias({\n // optional dependencjei\n h3: {}\n})('deck.gl@^8.0.0/dist.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"