2f: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; }30: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; }31:T622,viewof rows3 = { const rows = internet_geojsonData.features.map(feature => feature.properties); return html`

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

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

`; } 32: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; } 33:T49a,

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

34: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; } 35: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"]}

`; } 36:T7a7,

参考サイト

37:Tbe8, 38: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; }39:T5b5, 3a:[{"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}] 2d:{"title":"可視領域分析を使ってアンダーグラウンドな夜景スポットを探す","cells":[{"id":2213,"value":"# 可視領域分析を使ってアンダーグラウンドな夜景スポットを探す","pinned":false,"hidden":false,"mode":"md"},{"id":2206,"value":"underground_thumbnail1 = FileAttachment(\"underground_thumbnail@1.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":637,"value":"

はじめに

","pinned":false,"hidden":false,"mode":"html"},{"id":692,"value":"

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

","pinned":false,"hidden":false,"mode":"html"},{"id":704,"value":"

東京都の地形

","pinned":false,"hidden":false,"mode":"html"},{"id":709,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1741,"value":"\n\n","pinned":false,"hidden":false,"mode":"html"},{"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

","pinned":false,"hidden":false,"mode":"html"},{"id":790,"value":"

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

","pinned":false,"hidden":false,"mode":"html"},{"id":825,"value":"\n

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

","pinned":false,"hidden":false,"mode":"html"},{"id":827,"value":"

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

","pinned":false,"hidden":false,"mode":"html"},{"id":879,"value":"

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

\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":1777,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1744,"value":"\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":932,"value":"

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

","pinned":false,"hidden":false,"mode":"html"},{"id":2169,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1823,"value":"

\nn=145\n

","pinned":false,"hidden":false,"mode":"html"},{"id":1127,"value":"

可視領域分析

","pinned":false,"hidden":false,"mode":"html"},{"id":1132,"value":"

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

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

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

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

\n","pinned":false,"hidden":false,"mode":"html"},{"id":1169,"value":"

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

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

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

\n","pinned":false,"hidden":false,"mode":"html"},{"id":1838,"value":"

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

\n","pinned":false,"hidden":false,"mode":"html"},{"id":1003,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1746,"value":"\n\n","pinned":false,"hidden":false,"mode":"html"},{"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"},{"id":1877,"value":"untitled = FileAttachment(\"スクリーンショット 2025-03-04 12.58.17.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1891,"value":"

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

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

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

\n\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":1894,"value":"untitled2 = FileAttachment(\"スクリーンショット 2025-03-04 14.27.51.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2121,"value":"

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

\n\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":1901,"value":"untitled3 = FileAttachment(\"スクリーンショット 2025-03-04 14.29.24.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1188,"value":"

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

\n","pinned":false,"hidden":false,"mode":"html"},{"id":1960,"value":"

\n 可視化の手順\n

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

\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":1956,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2149,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1966,"value":"

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

\n\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":1299,"value":"

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

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

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

見つけた夜景スポット

","pinned":false,"hidden":false,"mode":"html"},{"id":2128,"value":"","pinned":false,"hidden":false,"mode":"html"},{"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"},{"id":2131,"value":"","pinned":false,"hidden":false,"mode":"html"},{"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"},{"id":1651,"value":"$36","pinned":false,"hidden":false,"mode":"html"},{"id":722,"value":"

データ処理

","pinned":false,"hidden":false,"mode":"html"},{"id":1791,"value":"import {table} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"import { view } from \"@neocartocnrs/geoverview\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"import { addTooltips } from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2184,"value":"maplibregl = require(\"maplibre-gl\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1674,"value":"CSS","pinned":false,"hidden":false,"mode":"md"},{"id":1609,"value":"$37","pinned":false,"hidden":false,"mode":"html"},{"id":2189,"value":"// intersect_10m.geojson を読み込む\nintersect_10m = await FileAttachment(\"filterd_park_10m_URL.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":738,"value":"東京地形図","pinned":false,"hidden":false,"mode":"html"},{"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"},{"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"},{"id":743,"value":"東京眺望ポイントCSV","pinned":false,"hidden":false,"mode":"html"},{"id":1781,"value":"internet_geojsonData = (await FileAttachment(\"output_on_internet.geojson\")).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":748,"value":"geojsonData = (await FileAttachment(\"ddddd.geojson\")).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":754,"value":"targetKeywords = [\"山\", \"丘\", \"台\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":757,"value":"searchPattern = targetKeywords.join(\"|\")","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":763,"value":"filteredGeojsonData = getFilteredGeoJson(searchPattern)","pinned":false,"hidden":false,"mode":"ojs"},{"id":767,"value":"matchedSNames = filteredGeojsonData.features.map((f) => f.properties.S_NAME)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1061,"value":"viewshedjsonData = (await FileAttachment(\"tokyo_tower_reduce.geojson\")).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1594,"value":"sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))","pinned":false,"hidden":false,"mode":"ojs"},{"id":917,"value":"円グラフ","pinned":false,"hidden":false,"mode":"html"},{"id":919,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":923,"value":"chouboucsv = await FileAttachment(\"miharashi_place@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":930,"value":"data = Array.from(genreCounts, ([name, value]) => ({ name, value }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1344,"value":"城跡","pinned":false,"hidden":false,"mode":"md"},{"id":1196,"value":"DEMの可視化","pinned":false,"hidden":false,"mode":"md"},{"id":1198,"value":"GeoTIFF = require(\"geotiff@2.0.7\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1200,"value":"Nishitokyo_DEM_50MB = await FileAttachment(\n \"Nishitokyo_big_DEM.tif\"\n).arrayBuffer()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1202,"value":"tiff = await GeoTIFF.fromArrayBuffer(Nishitokyo_DEM_50MB)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1204,"value":"image = await tiff.getImage()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1206,"value":"width = image.getWidth()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1208,"value":"height = image.getHeight()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1210,"value":"bbox = image.getBoundingBox()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1212,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":949,"value":"配水場可視化","pinned":false,"hidden":false,"mode":"html"},{"id":1263,"value":"geojsonData_haisui = await FileAttachment(\"kyusui_haisui_photo.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1597,"value":"viewof opacity1 = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1600,"value":"viewof opacity = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":687,"value":"$39","pinned":false,"hidden":false,"mode":"html"}],"files":"$W3a","stdlib":"1","titling":"auto"}