2b:null 2c:["$","title",null,{"children":"可視領域分析を使ってアンダーグラウンドな夜景スポットを探す | kai shiraishi | Observable"}] 31:Td0a,TokyoMapVisualization1 = { const container = yield html`

Elevation Legend (m)

< 10

10–20

20–40

40–60

60–80

80–100

100–150

150–200

200–300

> 300

`; const myOffice = [139.3669, 35.66157]; const map = new maplibregl.Map({ attributionControl: false, // アトリビューションを非表示にする container: container.querySelector("#map"), center: myOffice, zoom: 9, style: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json", scrollZoom: true, width: container.clientWidth, height: container.clientHeight }); map.on("load", () => { const coloredGeojsonData = { ...geojsonData, features: geojsonData.features.map((f) => ({ ...f, properties: { ...f.properties, fillColor: getElevationColor( f.properties["kyokai_with_elevation_標高"] ) } })) }; map.addSource("geojson", { type: "geojson", data: coloredGeojsonData }); map.addLayer({ id: "geojson-layer", type: "fill", source: "geojson", paint: { "fill-color": ["get", "fillColor"], "fill-opacity": 0.8 } }); }); return container; }32:T1a29,viewof map4 = { const container = html`

地物情報

インターネットに載っている夜景スポット

地物にホバーすると情報が表示されます

`; const sliderContainer = html`

${viewof opacity}

`; container.appendChild(sliderContainer); const demCanvas = canvas; let map = new maplibregl.Map({ attributionControl: false, // アトリビューションを非表示にする container: container, style: { version: 8, sources: { "base-map": { type: "raster", tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"], tileSize: 256 }, "dem-raster": { type: "image", url: demCanvas.toDataURL(), coordinates: [ [bbox[0], bbox[3]], [bbox[2], bbox[3]], [bbox[2], bbox[1]], [bbox[0], bbox[1]] ] }, "haisui-data": { type: "geojson", data: await FileAttachment("output_on_internet.geojson").json() } }, layers: [ { id: "base-map", type: "raster", source: "base-map" }, { id: "dem-raster", type: "raster", source: "dem-raster", paint: { "raster-opacity": 0.8 } }, { id: "haisui-layer", type: "circle", source: "haisui-data", paint: { "circle-radius": 6, "circle-color": "#0000FF", // 青色に変更 "circle-opacity": 0.8, "circle-stroke-width": 1, "circle-stroke-color": "#fff" } } ] }, center: [139.767, 35.681], zoom: 11 }); const updateLegend = (properties) => { const legendContent = container.querySelector("#legend-content"); if (!properties) { legendContent.innerHTML = '

地物にホバーすると情報が表示されます

'; return; } const name = properties["場所の名前"] || "不明"; const address = properties.住所 || "不明"; const lat = properties.緯度 || "不明"; const lon = properties.経度 || "不明"; const url = properties.URL || properties.url || null; legendContent.innerHTML = `

名称: ${name}

住所: ${address}

緯度: ${lat}

経度: ${lon}

URL: ${ url ? `${url}` : "不明" }

`; }; let hoveredHaisuiId = null; map.on("mousemove", "haisui-layer", (e) => { map.getCanvas().style.cursor = "pointer"; if (hoveredHaisuiId) { map.setFeatureState( { source: "haisui-data", id: hoveredHaisuiId }, { hover: false } ); } hoveredHaisuiId = e.features[0].id; map.setFeatureState( { source: "haisui-data", id: hoveredHaisuiId }, { hover: true } ); updateLegend(e.features[0].properties); }); map.on("mouseleave", "haisui-layer", () => { map.getCanvas().style.cursor = ""; if (hoveredHaisuiId) { map.setFeatureState( { source: "haisui-data", id: hoveredHaisuiId }, { hover: false } ); } hoveredHaisuiId = null; // 一度表示した情報はそのまま保持するため、updateLegend(null) は呼び出さない }); map.on("load", () => { map.resize(); map.fitBounds( [ [bbox[0], bbox[1]], [bbox[2], bbox[3]] ], { padding: 20 } ); }); window.addEventListener("resize", () => { map.resize(); }); viewof opacity.addEventListener("input", (event) => { const value = event.target.value / 100; map.setPaintProperty("dem-raster", "raster-opacity", value); }); return container; }33:T622,viewof rows3 = { const rows = internet_geojsonData.features.map(feature => feature.properties); return html`

${rows.map(row => html` `)}

URL	名称	緯度	経度
${row["URL"]}	${row["場所の名前"]}	${row["緯度"]}	${row["経度"]}

`; } 34:T1ca9,viewof map6 = { const container = html`

地物情報

インターネットに載っている夜景スポット

DEMラスタ（地形情報）

可視領域

地物にホバーすると情報が表示されます

`; const sliderContainer = html`

${viewof opacity1}

`; container.appendChild(sliderContainer); const demCanvas = canvas; let map = new maplibregl.Map({ attributionControl: false, // アトリビューションを非表示にする container: container, style: { version: 8, sources: { "base-map": { type: "raster", tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"], tileSize: 256 }, "dem-raster": { type: "image", url: demCanvas.toDataURL(), coordinates: [ [bbox[0], bbox[3]], [bbox[2], bbox[3]], [bbox[2], bbox[1]], [bbox[0], bbox[1]] ] }, "haisui-data": { type: "geojson", data: await FileAttachment("output_on_internet.geojson").json() } }, layers: [ { id: "base-map", type: "raster", source: "base-map" }, { id: "dem-raster", type: "raster", source: "dem-raster", paint: { "raster-opacity": 0.8 } }, { id: "haisui-layer", type: "circle", source: "haisui-data", paint: { "circle-radius": 6, "circle-color": "#0000FF", "circle-opacity": 0.8, "circle-stroke-width": 1, "circle-stroke-color": "#fff" } } ] }, center: [139.767, 35.681], zoom: 11 }); const updateLegend = (properties) => { const legendContent = container.querySelector("#legend-content"); if (!properties) { legendContent.innerHTML = '

地物にホバーすると情報が表示されます

名称: ${name}

住所: ${address}

緯度: ${lat}

経度: ${lon}

URL: ${ url ? `${url}` : "不明" }

`; }; let hoveredHaisuiId = null; map.on("mousemove", "haisui-layer", (e) => { map.getCanvas().style.cursor = "pointer"; if (hoveredHaisuiId) { map.setFeatureState( { source: "haisui-data", id: hoveredHaisuiId }, { hover: false } ); } hoveredHaisuiId = e.features[0].id; map.setFeatureState( { source: "haisui-data", id: hoveredHaisuiId }, { hover: true } ); updateLegend(e.features[0].properties); }); map.on("mouseleave", "haisui-layer", () => { map.getCanvas().style.cursor = ""; if (hoveredHaisuiId) { map.setFeatureState( { source: "haisui-data", id: hoveredHaisuiId }, { hover: false } ); } hoveredHaisuiId = null; // 一度表示した情報はそのまま保持するため、updateLegend(null) は呼び出さない }); map.on("load", () => { map.resize(); map.fitBounds( [ [bbox[0], bbox[1]], [bbox[2], bbox[3]] ], { padding: 20 } ); // 追加: 寒色系の可視領域レイヤー map.addSource("viewshed-source", { type: "geojson", data: viewshedjsonData // 可視領域の GeoJSON データを指定 }); map.addLayer({ id: "viewshed-layer", type: "fill", source: "viewshed-source", paint: { "fill-color": "#00CED1", "fill-opacity": 0.4, "fill-outline-color": "#008B8B" } }); }); window.addEventListener("resize", () => { map.resize(); }); viewof opacity1.addEventListener("input", (event) => { const value = event.target.value / 100; map.setPaintProperty("dem-raster", "raster-opacity", value); }); return container; } 35:T49a,

インターネットに載っている夜景スポット
東京都に存在する全公園
探索領域

36:T1672,viewof map1 = { const container = html`

地物情報

可視領域分析をもとに見つけた夜景スポットの候補

地物にホバーすると情報が表示される

`; let map = new maplibregl.Map({ attributionControl: false, container: container, center: [139.3669, 35.66157], zoom: 9, style: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json", scrollZoom: true, width: container.clientWidth, height: container.clientHeight }); // legend更新関数（名称、座標、画像URLを表示） const updateLegend = (properties) => { const legendContent = container.querySelector("#legend-content"); if (properties) { // GitHub の画像URLの場合、生画像用の URL に変換する let imgUrl = properties["画像URL"] || ""; if (imgUrl.includes("github.com") && imgUrl.includes("/blob/")) { imgUrl = imgUrl.replace("github.com", "raw.githubusercontent.com").replace("/blob/", "/"); } let imageHTML = ""; if (imgUrl) { imageHTML = `

`; } else { imageHTML = '

画像: なし

'; } // 座標情報は properties の X, Y を使用（無い場合は geometry の座標を利用してもよい） const coordText = (properties.X && properties.Y) ? `${properties.X} , ${properties.Y}` : "不明"; legendContent.innerHTML = `

名称: ${properties.名称 || "不明"}

座標: ${coordText}

${imageHTML} `; } }; map.on("load", async () => { try { // filterd_park_10m_URL.geojson の読み込みとソース追加 const parkData = await FileAttachment("filterd_park_10m_URL.geojson").json(); map.addSource("park-data", { type: "geojson", data: parkData }); // ポイントレイヤーとして表示（サークルレイヤー） map.addLayer({ id: "park-layer", type: "circle", source: "park-data", paint: { "circle-radius": 6, "circle-color": "#8e44ad", "circle-stroke-color": "#fff", "circle-stroke-width": 1, "circle-opacity": [ "case", ["boolean", ["feature-state", "hover"], false], 0.5, 0.8 ] } }); let hoveredParkId = null; map.on("mousemove", "park-layer", (e) => { map.getCanvas().style.cursor = "pointer"; if (hoveredParkId !== null && hoveredParkId !== e.features[0].id) { map.setFeatureState( { source: "park-data", id: hoveredParkId }, { hover: false } ); } hoveredParkId = e.features[0].id; map.setFeatureState( { source: "park-data", id: hoveredParkId }, { hover: true } ); // ホバーした地物の情報を legend に反映 updateLegend(e.features[0].properties); }); } catch (error) { console.error("データの読み込みに失敗した", error); } }); // 凡例内のスクロールイベントがマップに伝播しないように設定 const legend = container.querySelector(".legend"); legend.addEventListener("wheel", (e) => { e.stopPropagation(); }); window.addEventListener("resize", () => { map.resize(); }); return container; } 37:T619,viewof rows1 = { const rows = intersect_10m.features.map(feature => feature.properties); return html`

${rows.map(row => html` `)}

画像URL	名称	緯度	経度
${row["画像URL"]}	${row["名称"]}	${row["Y"]}	${row["X"]}

`; } 38:T7a7,

参考サイト

39:Tbe8, 3a:Tec8,canvas = { let demRaster = await image.readRasters({ interleave: true }); let minVal = Infinity; let maxVal = -Infinity; for (let i = 0; i < demRaster.length; i++) { const val = demRaster[i]; if (val < minVal) minVal = val; if (val > maxVal) maxVal = val; } console.log("DEM 最小値:", minVal, "最大値:", maxVal); function lerp(a, b, t) { return a + (b - a) * t; } const classes = [ { min: -Infinity, max: -14.8, color: [0, 0, 4] }, { min: -14.8, max: -0.0002, color: [57, 15, 110] }, { min: -0.0002, max: 1.5298, color: [66, 15, 117] }, { min: 1.5298, max: 2.4499, color: [74, 16, 121] }, { min: 2.4499, max: 3.1498, color: [82, 19, 124] }, { min: 3.1498, max: 3.9601, color: [90, 22, 126] }, { min: 3.9601, max: 5.4001, color: [98, 25, 128] }, { min: 5.4001, max: 8.1002, color: [106, 28, 129] }, { min: 8.1002, max: 11.1999, color: [114, 31, 129] }, { min: 11.1999, max: 15.78, color: [121, 34, 130] }, { min: 15.78, max: 20.6597, color: [129, 37, 129] }, { min: 20.6597, max: 24.9798, color: [137, 40, 129] }, { min: 24.9798, max: 29.1001, color: [145, 43, 129] }, { min: 29.1001, max: 33.0597, color: [153, 45, 128] }, { min: 33.0597, max: 36.7203, color: [161, 48, 126] }, { min: 36.7203, max: 40.3299, color: [170, 51, 125] }, { min: 40.3299, max: 43.8503, color: [178, 53, 123] }, { min: 43.8503, max: 47.6101, color: [186, 56, 120] }, { min: 47.6101, max: 52.1002, color: [194, 59, 117] }, { min: 52.1002, max: 56.4898, color: [202, 62, 114] }, { min: 56.4898, max: 61.5897, color: [210, 66, 111] }, { min: 61.5897, max: 67.5999, color: [217, 70, 107] }, { min: 67.5999, max: 74.4997, color: [224, 76, 103] }, { min: 74.4997, max: 82.53, color: [231, 82, 99] }, { min: 82.53, max: 92.7101, color: [236, 88, 96] }, { min: 92.7101, max: 104.5002, color: [241, 96, 93] }, { min: 104.5002, max: 117.5101, color: [244, 105, 92] }, { min: 117.5101, max: 132.7697, color: [247, 114, 92] }, { min: 132.7697, max: 154.64, color: [249, 123, 93] }, { min: 154.64, max: 182.4398, color: [251, 133, 96] }, { min: 182.4398, max: 221.2002, color: [252, 142, 100] }, { min: 221.2002, max: 266.0899, color: [253, 152, 105] }, { min: 266.0899, max: 314.4198, color: [254, 161, 110] }, { min: 314.4198, max: 360.3996, color: [254, 170, 116] }, { min: 360.3996, max: 412.9901, color: [254, 180, 123] }, { min: 412.9901, max: 470.8896, color: [254, 189, 130] }, { min: 470.8896, max: 531.4, color: [254, 198, 138] }, { min: 531.4, max: 599.8295, color: [254, 207, 146] }, { min: 599.8295, max: 675.8799, color: [254, 216, 154] }, { min: 675.8799, max: 762.8995, color: [253, 226, 163] }, { min: 762.8995, max: 881.4496, color: [253, 235, 172] }, { min: 881.4496, max: 1038.8693, color: [252, 244, 182] }, { min: 1038.8693, max: 1637.5494, color: [252, 253, 191] }, { min: 1637.5494, max: Infinity, color: [252, 253, 191] } // 最大値 > 1637.5494 ]; function getColor(value) { for (let i = 0; i < classes.length; i++) { if (value >= classes[i].min && value < classes[i].max) { return classes[i].color; } } return [0, 0, 0]; } let canvas = document.createElement("canvas"); canvas.width = width; canvas.height = height; let ctx = canvas.getContext("2d"); let imageData = ctx.createImageData(width, height); for (let i = 0; i < demRaster.length; i++) { const val = demRaster[i]; const [r, g, b] = getColor(val); imageData.data[i * 4 + 0] = r; imageData.data[i * 4 + 1] = g; imageData.data[i * 4 + 2] = b; imageData.data[i * 4 + 3] = 255; } ctx.putImageData(imageData, 0, 0); return canvas; }3b:T5b5, 3c:[{"id":"59086b932289ac772d6276c478f455cfa7888e4c7be04604abd9804fa14da6db805af1df98fb8f76835e50bb6f11498a47fcec21bafabc55a5c19de64b429351","href":"https://static.observableusercontent.com/files/59086b932289ac772d6276c478f455cfa7888e4c7be04604abd9804fa14da6db805af1df98fb8f76835e50bb6f11498a47fcec21bafabc55a5c19de64b429351","name":"ddddd.geojson","type":"application/geo+json","lastModified":1740870258821.793,"size":21268271},{"id":"724f977cf5081cfce7f4a82dee07b155688491f0dc86079e537bbd4d0c44e9130bbe2efa9f19e205a9e3dad0d5b9f0ba58e59da997264903097bf1a36ab8baca","href":"https://static.observableusercontent.com/files/724f977cf5081cfce7f4a82dee07b155688491f0dc86079e537bbd4d0c44e9130bbe2efa9f19e205a9e3dad0d5b9f0ba58e59da997264903097bf1a36ab8baca","name":"miharashi_place@1.csv","type":"text/csv","lastModified":1740870258821.793,"size":62719},{"id":"b78c503d7484a3f7b6c5db5267b1cd3bad594e3d313be8a8d180e54246e50449d3e05ce6a7eee400d885b1b51d14e208708ebcc41ae67dd0fe97849006ccfc1e","href":"https://static.observableusercontent.com/files/b78c503d7484a3f7b6c5db5267b1cd3bad594e3d313be8a8d180e54246e50449d3e05ce6a7eee400d885b1b51d14e208708ebcc41ae67dd0fe97849006ccfc1e","name":"Nishitokyo_big_DEM.tif","type":"image/tiff","lastModified":1740870258821.793,"size":46309068},{"id":"222b1ac22dc4319062fdaa40a35e66e4560614227667d588b1c587e7f75355ad1655beb9221616dc2fd8d90c2c29695eaf584f8e695fe5d847b8297617e7b573","href":"https://static.observableusercontent.com/files/222b1ac22dc4319062fdaa40a35e66e4560614227667d588b1c587e7f75355ad1655beb9221616dc2fd8d90c2c29695eaf584f8e695fe5d847b8297617e7b573","name":"kyusui_haisui_photo.geojson","type":"application/geo+json","lastModified":1740870258821.793,"size":24291},{"id":"73fe06d8721376eadd10693ff0df2871e743abd580398b740cea45c7f784a1b69c92e3652d782b3e5514bdc1464c704e06afc47d212ce72d3368b6bbee0c0261","href":"https://static.observableusercontent.com/files/73fe06d8721376eadd10693ff0df2871e743abd580398b740cea45c7f784a1b69c92e3652d782b3e5514bdc1464c704e06afc47d212ce72d3368b6bbee0c0261","name":"標高データ-1-1024x683 (1).png","type":"image/png","lastModified":1740870258821.793,"size":95037},{"id":"f5aa1c2d8e67dbbda93befc568a495fb63bd0fc62889190e6e5e6e7540f90d2655244166dcb248ba0f1df1f46cbe3ebebbf7977108bdb441c177fa99d415dad4","href":"https://static.observableusercontent.com/files/f5aa1c2d8e67dbbda93befc568a495fb63bd0fc62889190e6e5e6e7540f90d2655244166dcb248ba0f1df1f46cbe3ebebbf7977108bdb441c177fa99d415dad4","name":"tokyo_tower_reduce.geojson","type":"application/geo+json","lastModified":1740870258821.793,"size":34826458},{"id":"d03b2c2fae4b7539505114a672710d2ed2380750dc9e5b7d1097abdefbf5a072b1fe409cb332f83174234fe87f1c28b124bb3cf4a9148be4637ce4a4c81e6892","href":"https://static.observableusercontent.com/files/d03b2c2fae4b7539505114a672710d2ed2380750dc9e5b7d1097abdefbf5a072b1fe409cb332f83174234fe87f1c28b124bb3cf4a9148be4637ce4a4c81e6892","name":"output_on_internet.geojson","type":"application/geo+json","lastModified":1740879276078.961,"size":38880},{"id":"119361058b823920c12854bb872361ad3cd17c8a318ad64360855efece60c8a8f2c02b60ff3833a97473ade370cb142f2a112f08ff094ca5b8b08e09b63ea728","href":"https://static.observableusercontent.com/files/119361058b823920c12854bb872361ad3cd17c8a318ad64360855efece60c8a8f2c02b60ff3833a97473ade370cb142f2a112f08ff094ca5b8b08e09b63ea728","name":"スクリーンショット 2025-03-04 12.58.17.png","type":"image/png","lastModified":1741060809117.034,"size":339517},{"id":"bd93186f2d0bb7b88f911d3386b0be07d2a48460128eaaf0632270255053e1fefd18c5d8858f91625faa754eebb517a98788db85ac0fb1992517840f77e96fd0","href":"https://static.observableusercontent.com/files/bd93186f2d0bb7b88f911d3386b0be07d2a48460128eaaf0632270255053e1fefd18c5d8858f91625faa754eebb517a98788db85ac0fb1992517840f77e96fd0","name":"スクリーンショット 2025-03-04 13.37.14.png","type":"image/png","lastModified":1741096480000.602,"size":2655980},{"id":"f5685e5ba8361ad6091248585c26bf1bbb20f175121c5910ce9adab56ad72dbde885111eb58a8be213dc5739374fb1d49238ef802bf7f78046294223f152964f","href":"https://static.observableusercontent.com/files/f5685e5ba8361ad6091248585c26bf1bbb20f175121c5910ce9adab56ad72dbde885111eb58a8be213dc5739374fb1d49238ef802bf7f78046294223f152964f","name":"スクリーンショット 2025-03-04 14.27.51.png","type":"image/png","lastModified":1741096715169.251,"size":2560396},{"id":"9ba8a414e7d69bef957f68adebcbce51f1be6f443ad7fe4dce05c0aee232d1a561a79709412fadcd986b83189a76184c802375ee82484f4ca5246fcbeb6adfa0","href":"https://static.observableusercontent.com/files/9ba8a414e7d69bef957f68adebcbce51f1be6f443ad7fe4dce05c0aee232d1a561a79709412fadcd986b83189a76184c802375ee82484f4ca5246fcbeb6adfa0","name":"スクリーンショット 2025-03-04 14.29.24.png","type":"image/png","lastModified":1741096828580.134,"size":1485691},{"id":"129709a0bee465a9b47611b94b7209b5235d7c31c5fe8e291f6efa01c301d607cd4642e40424f5a08719d60c32c9422ed84152ecc002dcc6a9ce7a27e4653763","href":"https://static.observableusercontent.com/files/129709a0bee465a9b47611b94b7209b5235d7c31c5fe8e291f6efa01c301d607cd4642e40424f5a08719d60c32c9422ed84152ecc002dcc6a9ce7a27e4653763","name":"intersect_10m.geojson","type":"application/geo+json","lastModified":1741097112716.139,"size":95960},{"id":"0d111a90ec6a3daea2fac798e8a949b708baa83bc1a9959f3176b0734bf8b0bc176d4b2f845e885096dc8a23999239fecfcbca9df6a5974e6ecf8fc83202fdd2","href":"https://static.observableusercontent.com/files/0d111a90ec6a3daea2fac798e8a949b708baa83bc1a9959f3176b0734bf8b0bc176d4b2f845e885096dc8a23999239fecfcbca9df6a5974e6ecf8fc83202fdd2","name":"filterd_park_10m_URL.geojson","type":"application/geo+json","lastModified":1741135468227.02,"size":17569},{"id":"20324197ace04b1bf09b3eaf78994d4d1325ebeee84297f834b861860d1e5737a80eef1e6b2f145fd02adcc9f3983647b18cf6a53187cf3671dd181b6348139e","href":"https://static.observableusercontent.com/files/20324197ace04b1bf09b3eaf78994d4d1325ebeee84297f834b861860d1e5737a80eef1e6b2f145fd02adcc9f3983647b18cf6a53187cf3671dd181b6348139e","name":"相原坂下北公園.png","type":"image/png","lastModified":1741140550245.152,"size":1933081},{"id":"0acfe17fd65275356f58c71c4ce9df5d47d978f134d09441bba6ab067bfad190ed52705c6afa8121c959487c5b71ea14815cb96d7397caeb9dd89d41363ca0f5","href":"https://static.observableusercontent.com/files/0acfe17fd65275356f58c71c4ce9df5d47d978f134d09441bba6ab067bfad190ed52705c6afa8121c959487c5b71ea14815cb96d7397caeb9dd89d41363ca0f5","name":"粟の須緑地.png","type":"image/png","lastModified":1741140656469.568,"size":1285403},{"id":"b4ce47e95834aca44fdcb5fc7f9f273dd8a228359d94ae22791d7c5a49a2e449f9ba0a2bc68dabaf0d8a7d9c1351e0c2f607771e726706ada3247785abf3c76a","href":"https://static.observableusercontent.com/files/b4ce47e95834aca44fdcb5fc7f9f273dd8a228359d94ae22791d7c5a49a2e449f9ba0a2bc68dabaf0d8a7d9c1351e0c2f607771e726706ada3247785abf3c76a","name":"小宮上方あおぞら公園.png","type":"image/png","lastModified":1741140741075.213,"size":1980655},{"id":"9d893ed51e08794442936350505fa8fbb9027c753e6948a81b12144d3fd2741cbc59fcf40ee1d4d2d4a10fd4e457f6e3cf99bd9a989cf43d3eb4418c3a9bfc12","href":"https://static.observableusercontent.com/files/9d893ed51e08794442936350505fa8fbb9027c753e6948a81b12144d3fd2741cbc59fcf40ee1d4d2d4a10fd4e457f6e3cf99bd9a989cf43d3eb4418c3a9bfc12","name":"underground_thumbnail@1.png","type":"image/png","lastModified":1741148619807.969,"size":2529007}] 2f:{"id":"010c869667b99181","slug":null,"title":"可視領域分析を使ってアンダーグラウンドな夜景スポットを探す","thumbnail":"31222edac8c781598211c24f29f3cafe2050addf27895fbda9ba2ca23ba866a8","access_level":"public","create_time":"$D2025-03-01T23:04:18.821Z","update_time":"$D2025-08-09T14:27:14.653Z","view_time":null,"first_public_time":"$D2025-03-01T23:04:18.821Z","has_unpublished_edits":null,"fork":{"id":"38422bbbb4baeb3e","slug":"tokyo_elevation_analyze","title":"地理空間情報から眺望の優れた場所を探すメソッドを確立する","owner":{"id":"fdca81b2f5eb7de5","login":"tmu-dataviz-class","name":"TMU Dataviz Class"}},"stars":1,"starred":false,"owner":{"type":"team","id":"01aa96abf2e80858","login":"kai-shiraishi","name":"kai shiraishi","avatar_url":"https://avatars-next.observableusercontent.com/fdb929f1cfa4455c82fbeeaf920d3f20450a2c00ccb2c7c3d0700744bcf08baf","tier":"starter_2024"},"version":2218,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"296c9b7ca924c8ff","login":"kai-shiraishi","name":"kai shiraishi","avatar_url":"https://avatars-next.observableusercontent.com/26c669a237457969f9d31688f6421647207470a95c76acfc096ec5a76b45c5f0","tier":null}],"members":[{"type":"team","id":"01aa96abf2e80858","login":"kai-shiraishi","name":"kai shiraishi","avatar_url":"https://avatars-next.observableusercontent.com/fdb929f1cfa4455c82fbeeaf920d3f20450a2c00ccb2c7c3d0700744bcf08baf","tier":"starter_2024","role":"editor"},{"type":"individual","id":"296c9b7ca924c8ff","login":"kai-shiraishi","name":"kai shiraishi","avatar_url":"https://avatars-next.observableusercontent.com/26c669a237457969f9d31688f6421647207470a95c76acfc096ec5a76b45c5f0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"可視領域分析を使ってアンダーグラウンドな夜景スポットを探す","cells":[{"id":2213,"value":"# 可視領域分析を使ってアンダーグラウンドな夜景スポットを探す","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2206,"value":"underground_thumbnail1 = FileAttachment(\"underground_thumbnail@1.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"

はじめに

\n東京都が公開しているPlateauや国土交通省が公開している地形データなど，地理空間情報から\"アンダーグラウンドな\"=インターネットに載っていない夜景スポットを探そうという記事\n\n

東京都の地形

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":709,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1741,"value":"\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1618,"value":"

\n 国土数値情報ダウンロードサイト　行政区画データ　東京都： \n \n https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N03-v2_3.html\n \n

\n 基盤地図情報ダウンロードサービス　数値標高モデル： \n \n https://fgd.gsi.go.jp/download/menu.php\n \n

\n標高を元に色分けを行い，可視化してみると東京は東から西にかけて傾斜がかかっていることがわかる．
e-statから取得した行政地域の代表点の情報を元に国土地理院APIからその地点の標高を取得し，作成した．\n

インターネットに載っている夜景スポットを探してみる

\nインターネットに載っている夜景スポットはどんなところがあるのかwebスクレイピングを使って集計してみましょう．\n

夜景スポットを紹介しているサイトから名称，　住所をwebスクレイピング
googlemapAPIを用いて住所，名称から緯度・経度を特定
QGISでGeoJson形式に変換
Observableでweb上で見つけた夜景スポットを青色にプロット

\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1777,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1744,"value":"\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":932,"value":"

\n 多摩丘陵(八王子，日野，稲城，多摩地域)にプロットが集中してます．DEMの地形データを見ると立川，国分寺，三鷹あたりは土地の起伏自体が少なく，夜景スポットがあまりありません．\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2169,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1823,"value":"

\nn=145\n

可視領域分析

\nここから、可視領域分析を用いて夜景スポットの探索フェーズに入ります。夜景スポットを見つける上で重要なのは、その地点からどれだけ遠くまで見渡せるかを定量的に評価することです。そのため、今回はランドマークとして東京タワーを設定し、東京タワーが見える地点を夜景スポットとして抽出していきます。\n

\n例えば、東京タワーが見える場所は、もしその地点が西東京であれば約40km先まで見通す必要があるため、距離の基準として東京タワーを採用しました。\n

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1638,"value":"x6831 = FileAttachment(\"標高データ-1-1024x683 (1).png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1640,"value":"\n

\n 画像引用元：
GISにおける標高データの扱い方とは？〜DEMやDSM、GISソフトでの操作方法などを解説します！〜
\n \n https://sinrintech.com/knowledge/gis/elevation-data/\n \n

\n フィルタリングの手順\n

国土地理院の標高データをもとにDEM(数値標高モデル)のラスターデータを作成
Plateauで公開される東京都全域の建物の高さデータをラスターデータに変換
　1と2で作成したデータを加算して擬似DSM(数値表層モデル)を作成
3で作成したDSMに対し，GDSLの可視領域分析を実施
GeoJson形式に変換
Obserableで可視化東京タワーが見える箇所を緑色でハイライト

GoogleMapの口コミで取得したポイントデータに対し半径25mのバッファを作成
可視領域とそのバッファが重なる場所のみを抽出
QGISでGeoJson形式に変換
Obserableでオレンジ色でプロット

\n ここで擬似DSMとしているのは木々の影響を考慮できていないからです．\n

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1003,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1746,"value":"\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1625,"value":"

\n 基盤地図情報ダウンロードサービス　数値標高モデル： \n \n https://fgd.gsi.go.jp/download/menu.php\n \n

\n\n

\n plateau： \n \n https://www.mlit.go.jp/plateau/open-data/\n \n

\n\n

\n G空間情報センター 3D都市モデル： \n \n https://www.geospatial.jp/ckan/dataset/plateau-13201-hachioji-shi-2022\n \n

\n\n

\n 国土数値情報ダウンロードサイト　行政区画データ　東京都： \n \n https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N03-v2_3.html\n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1877,"value":"untitled = FileAttachment(\"スクリーンショット 2025-03-04 12.58.17.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1891,"value":"

\n可視化したマップを探索すると滝山・高尾・相原付近の場所が標高の割に夜景スポットが少なかったのでその部分を中心にして分析を行なおうと思います．\n 以下のように黄緑色のポリゴンを作成し，緑色の東京都にある公園の座標をフィルタリングしました．\n

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2076,"value":"$35","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1888,"value":"untitled1 = FileAttachment(\"スクリーンショット 2025-03-04 13.37.14.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2109,"value":"

\n 探索領域内に存在する公園
\n 東京タワーの可視領域\n

\n\n 探索領域内の公園 ∩ 東京タワーの可視領域\n

\nその結果が黄色の部分です．\n Obserable上で可視化を行うと以下の通り．\n

\n 可視化の手順\n

国土数値情報ダウンロードサイトから東京都に存在する全ての公園の座標情報を取得
探索対象の地域に含まれる公園を抽出
2で抽出したポイントに対し10mのバッファを作成(幅を持たせるため)
東京タワー可視領域レイヤーと3で抽出した公園データが交差する場所を抽出
座標情報からGoogleStreetMapAPIを用いてその地点の360°パノラマ写真を取得
Obserableで可視化紫色でハイライト

\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1956,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2149,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1966,"value":"

\n 国土数値情報　都市公園データ： \n \n https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-P13.html\n \n

\nGoogleStreetMapのパノラマ写真を見ると以下の地点はかなり良さげです．
ただ公園の座標のズレやDSMに木々の影響を考慮できていない点などを踏まえるとかなりノイズの影響が強いので，可視領域分析のみを用いて夜景スポットを探すのは難しそうです．

\n今回のGoogleStreetMapの写真は点で取得しているのでもしかしたら写真上ではあんまりだけど近くを探索したらいいところがあったなんてこともあるかもしれません😀\n

\n\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2047,"value":"untitled4 = FileAttachment(\"相原坂下北公園.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2049,"value":"untitled5 = FileAttachment(\"粟の須緑地.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2050,"value":"untitled6 = FileAttachment(\"小宮上方あおぞら公園.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1689,"value":"

見つけた夜景スポット

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2128,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2193,"value":"

\n 今回見つけた夜景スポット： \n \n https://www.google.com/maps/d/u/0/edit?mid=1HUHDIb0lccz38VG-KO3YSqsvgZL3FyQ&usp=sharing\n \n

\n\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2131,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2195,"value":"

\n ネット上に存在する夜景スポット： \n \n https://www.google.com/maps/d/u/0/edit?mid=1MUj0Flz7QA2OevbcMkvs1AODo-MHklE&usp=sharing\n \n

\n\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1651,"value":"$38","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":722,"value":"

データ処理

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1791,"value":"import {table} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"import { view } from \"@neocartocnrs/geoverview\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"import { addTooltips } from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2184,"value":"maplibregl = require(\"maplibre-gl\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1674,"value":"CSS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1609,"value":"$39","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2189,"value":"// intersect_10m.geojson を読み込む\nintersect_10m = await FileAttachment(\"filterd_park_10m_URL.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":738,"value":"東京地形図","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":725,"value":"getColoredGeoJson = (geojsonData, threshold, colorFunction) => {\n return {\n ...geojsonData,\n features: geojsonData.features\n .filter((d) => d.properties[\"kyokai_with_elevation_標高\"] >= threshold)\n .map((d) => ({\n ...d,\n properties: {\n ...d.properties,\n fillColor: colorFunction(d.properties[\"kyokai_with_elevation_標高\"])\n }\n }))\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":729,"value":"getElevationColor = (elevation) => {\n if (elevation < 10) return \"#f7fcf0\"; // 青に近い白\n if (elevation < 20) return \"#ccece6\"; // 明るい青\n if (elevation < 40) return \"#99d8c9\"; // 水色\n if (elevation < 60) return \"#66c2a4\"; // 緑がかった青\n if (elevation < 80) return \"#2ca25f\"; // 緑\n if (elevation < 100) return \"#006d2c\"; // 暗い緑\n if (elevation < 150) return \"#fee08b\"; // 明るい黄色\n if (elevation < 200) return \"#fdae61\"; // 橙\n if (elevation < 300) return \"#f46d43\"; // 赤に近い橙\n return \"#d73027\"; // 赤\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"東京眺望ポイントCSV","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1781,"value":"internet_geojsonData = (await FileAttachment(\"output_on_internet.geojson\")).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":748,"value":"geojsonData = (await FileAttachment(\"ddddd.geojson\")).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":754,"value":"targetKeywords = [\"山\", \"丘\", \"台\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"searchPattern = targetKeywords.join(\"|\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"getFilteredGeoJson = (name) => {\n return {\n ...geojsonData,\n features: geojsonData.features.filter((d) =>\n new RegExp(name).test(d.properties.S_NAME)\n )\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":763,"value":"filteredGeojsonData = getFilteredGeoJson(searchPattern)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"matchedSNames = filteredGeojsonData.features.map((f) => f.properties.S_NAME)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"viewshedjsonData = (await FileAttachment(\"tokyo_tower_reduce.geojson\")).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1594,"value":"sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":917,"value":"円グラフ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":919,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":923,"value":"chouboucsv = await FileAttachment(\"miharashi_place@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":925,"value":"genreCounts = d3.rollup(\n chouboucsv,\n (v) => v.length,\n (d) => {\n if (d[\"yama\"] === \"1\") return \"yama\";\n if (d[\"oka\"] === \"1\") return \"oka\";\n if (d[\"dai\"] === \"1\") return \"dai\";\n return \"その他\";\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":930,"value":"data = Array.from(genreCounts, ([name, value]) => ({ name, value }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1344,"value":"城跡","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1196,"value":"DEMの可視化","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1198,"value":"GeoTIFF = require(\"geotiff@2.0.7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1200,"value":"Nishitokyo_DEM_50MB = await FileAttachment(\n \"Nishitokyo_big_DEM.tif\"\n).arrayBuffer()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1202,"value":"tiff = await GeoTIFF.fromArrayBuffer(Nishitokyo_DEM_50MB)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1204,"value":"image = await tiff.getImage()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1206,"value":"width = image.getWidth()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1208,"value":"height = image.getHeight()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1210,"value":"bbox = image.getBoundingBox()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1212,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":949,"value":"配水場可視化","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1263,"value":"geojsonData_haisui = await FileAttachment(\"kyusui_haisui_photo.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1597,"value":"viewof opacity1 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1600,"value":"viewof opacity = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"$3b","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W3c","stdlib":"1"}} 30:"$2f:body"