ローカルにダウンロードした、ラスタータイルを画面に表示したい

ShogoHirasawa commented 2 years ago

やりたいこと

ローカルにあるベクタータイルを表示させたい。

現在、古橋先生が空撮した二子玉川画像のラスタータイルがローカルにある状況。sourcesにこのローカルにあるラスタータイルを指定させ、以下の画像のように表示させたい

つまずいている箇所

先生が作ってくれた二子玉川空撮写真のラスタータイルが読み込めない

行ったこと

二子玉川の空撮を以下の方法で表示させようとした

OpenAerialMap の TMSをコピペして表示。 --> 表示成功

dronebird: {
type: "raster",
tiles: [
"https://tiles.openaerialmap.org/5dade1ce73c69f000530ee5d/0/5dade1ce73c69f000530ee5e/{z}/{x}/{y}",
],
tileSize: 256,
attribution:
'Map tiles by <a target="_top" rel="noopener" href="http://furuhashilab.com/">Furuhashi Lab.</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>',
},

先生が作ってくれた二子玉川ラスタータイルをGithubにアップロードさせ、以下のコードで表示を試みた --> 表示成功

dronebird: {
type: "raster",
tiles: [
"https://furuhashilab.github.io/2021gsc_ShogoHirasawa/futakotamagawac_ RT/{z}/{x}/{y}.png",
],
tileSize: 256,
attribution:
'Map tiles by <a target="_top" rel="noopener" href="http://furuhashilab.com/">Furuhashi Lab.</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>',
},

ラスタータイルをローカルにダウンロードさせて、絶対パス/相対パスを指定して表示を試みる --> 表示失敗

dronebird: {
type: "raster",
tiles: [
"/Users/shogohirasawa/Desktop/2021gsc_ShogoHirasawa/futakotamagawac_ RT/{z}/{x}/{y}.png", //ローカルのパス
],
tileSize: 256,
attribution:
'Map tiles by <a target="_top" rel="noopener" href="http://furuhashilab.com/">Furuhashi Lab.</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>',
},

  dronebird: {
              type: "raster",
              tiles: [
                "futakotamagawac_ RT.png/{z}/{x}/{y}.png", //ローカルのパス
              ],
              tileSize: 256,
              attribution:
                'Map tiles by <a target="_top" rel="noopener" href="http://furuhashilab.com/">Furuhashi Lab.</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>',
            },

Style Specificationにはローカルのパスで指定するのではなく、https://〜で指定していたため、参考にはあまりならなかった...。

自分の予想

GithubやOpenAerialMapから参照してきた時は表示が成功したので、データ自体には問題がなさそう。
ローカル環境でパスを持ってくる時に特別な記法があるのかもしれない

ShogoHirasawa commented 2 years ago

あくまで、仮設段階だがローカルにサーバーを立てて、そこにタイルデータを置き、サーバに置いたタイルデータを参照するようにすれば、うまくいくのかも。

hfu commented 2 years ago

おつかれさまです。最近のウェブブラウザは、ドメインを横断してリソースを共有することに対して制約を設けていく方向にあります。データの詐取など情報セキュリティリスクに対する対策だと理解しています。

ローカルのファイルシステムからのリソースの読み込みについても、年々制約が厳しくなってきています。

おっしゃる通り、ローカルにサーバを立てて読ませるのが正解になります。サーバを立てるという意識的な行動をユーザが取ることにより、ウェブブラウザも警戒を解く、といった理解で良いと思っています。

ShogoHirasawa commented 2 years ago

お忙しい中、返信いただきありがとうございます。なるほど、セキュリティ面などの理由から制約があるのですね！本当に勉強になります！サーバーを立てて再チャレンジしてみます！

furuhashilab / 2021gsc_ShogoHirasawa