anorithのブログ

主にGIS系の記事を書く。

Terria (4) KML（ポリライン）を読み込んでみる

Terria

概要

  • TerriaMapにKML(ポリライン)を読み込む。

参考

ポイントオブジェクトの表示

例を列挙しておきます。

最もシンプルな例

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
  <name>LineString.kml</name>
  <Placemark>
    <name>LineExample</name>
    <LineString>
      <altitudeMode>relativeToGround</altitudeMode>
      <coordinates>
        139.76291,35.65245,50 139.76391,35.65245,50
      </coordinates>
    </LineString>
  </Placemark>
</Document>
</kml>

f:id:anorith:20220409155946p:plain

Terriaでは何も指定しないとポリラインは白色で表示される。

excludeを有効にした例

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
  <name>LineString.kml</name>
  <Placemark>
    <name>LineExample</name>
    <LineString>
      <extrude>1</extrude>
      <altitudeMode>relativeToGround</altitudeMode>
      <coordinates>
        139.76291,35.65245,50 139.76391,35.65245,50
      </coordinates>
    </LineString>
  </Placemark>
</Document>
</kml>

f:id:anorith:20220409160100p:plain

excludeでは地形データを無視して球面上から表示されるっぽい？

線のスタイルを設定する例

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
  <name>LineString.kml</name>
  <Style id="linestyleExample">
    <LineStyle>
      <color>7f0000ff</color>
      <width>4</width>
    </LineStyle>
  </Style>
  <Placemark>
    <name>LineExample</name>
    <styleUrl>#linestyleExample</styleUrl>
    <LineString>
      <altitudeMode>relativeToGround</altitudeMode>
      <coordinates>
        139.76291,35.65245,50 139.76391,35.65245,50
      </coordinates>
    </LineString>
  </Placemark>
</Document>
</kml>

f:id:anorith:20220409160400p:plain

線色を赤色に、太さを4に変更。

線とexclude部分のスタイルを変更する例

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
  <name>LineString.kml</name>
  <Style id="linestyleExample">
    <LineStyle>
      <color>7f0000ff</color>
      <width>4</width>
    </LineStyle>
    <PolyStyle>
      <color>7f0000ff</color>
    </PolyStyle>
  </Style>
  <Placemark>
    <name>LineExample</name>
    <styleUrl>#linestyleExample</styleUrl>
    <LineString>
      <extrude>1</extrude>
      <altitudeMode>relativeToGround</altitudeMode>
      <coordinates>
        139.76291,35.65245,50 139.76391,35.65245,50
      </coordinates>
    </LineString>
  </Placemark>
</Document>
</kml>

f:id:anorith:20220409160455p:plain

exclude部分の色はPolyStyleで指定する。

Terria (3) PLATEAU-VIEWを動かしてみる

Terria

前書き

前回のブログを書いたあとにPLATEAUの公式からPLATEAU VIEWをDockerで動かすための例が公開されました。

なんというタイミング・・・。ところで上の例はそのままだとLinux（WSL含む）で動かないっぽいですね。コードもイメージにコピーしちゃうのでローカルでの作業を反映させて確認しながら作業するためには普通に公式リポジトリにあるようにして起動するのがよさそうです。

基本的にはTerriaMapと変わらないですが、以下にPLATEU VIEWの場合のDockerを使用した作業手順をまとめておきます。

適当な箇所にPLATEAU VIEWのリポジトリをクローンしてきて、そのパスを使用して以下のようにコンテナを起動します。

docker run --rm -it \
-v /path/to/PLATEAU-VIEW:/TerriaMap \
-p 3001:3001 \
node:14 /bin/bash

以下はコンテナ内での作業です。

# 作業ディレクトリに移動
cd TerriaMap 

# terriajsを入手（ここだけTerriaMapと違う）
mkdir packages && cd packages
git clone https://github.com/Project-PLATEAU/terriajs.git

# ビルドの前準備
cd ../
export NODE_OPTIONS=--max_old_space_size=4096
git config --global url."https://".insteadOf git:// 

# モジュールのインストール
yarn # yarn installでも可？

# ビルド
yarn gulp

# サーバー起動
yarn start

これでlocalhost:3001からPLATEAU VIEWにアクセスできます。 終わるときはexitでコンテナから抜ければよいです。

一度ビルドしたら次からはコンテナを起動した後に

cd TerriaMap
yarn start

でサーバーを起動するだけで（ローカルの）PLATEAU VIEWを使用できます。

f:id:anorith:20220409145404p:plain

Terria (2) KML（ポイント）を読み込んでみる

Terria

概要

  • TerriaMapにKML(ポイント)を読み込む。

使用するデータについて

描画の例として以下のGISオープン教材内のデータを一部修正して使用します。ライセンスなどはGISオープン教材のページをご覧ください（ちなみにGISオープン教材は素晴らしい教材だと思います。さすがに全部読んだわけではないですが・・・）。表示するのはKMLデータです。

ポイントオブジェクトの表示

以下のような2点のポイントオブジェクトからなるKMLファイルを用意します。

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
    <name>東京スカイツリーと東京タワー</name>
    <Placemark>
        <name>東京スカイツリー</name>
        <description>これは、東京スカイツリーです。</description>
        <Point>
            <altitudeMode>relativeToGround</altitudeMode>
            <coordinates>139.8107252956902,35.71002945292051,634</coordinates>
        </Point>
    </Placemark>
    <Placemark>
        <name>東京タワー</name>
        <description>これは、東京タワーです。</description>
        <Point>
            <altitudeMode>relativeToGround</altitudeMode>
            <coordinates>139.745476,35.658537,333</coordinates>
        </Point>
    </Placemark>
</Document>
</kml>

このKMLファイルをTerriaMapにドラッグ＆ドロップすると以下のように読み込まれます（ちなみにデフォルトのズームだとなぜか東京タワーが隠れるようなアングルでズームされてしまいます。なぜ・・・？）。

f:id:anorith:20220327194059p:plain

上記KMLでは表示のスタイルを何も設定していないので、Terriaが適当なスタイルで読み込んでくれます。

↓ポイントをクリックすると説明が表示されます。KMLで<description>に設定した内容です。

f:id:anorith:20220327194247p:plain

↓ポイントオブジェクトは高さが設定されているのでちゃんと高い位置に表示されています。

f:id:anorith:20220327194457p:plain

スタイルの指定（アイコン）

次にISオープン教材に倣ってスタイルを指定してみます。

以下のようなKMLファイルを作成します。

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
    <name>東京スカイツリーと東京タワー</name>
    <Style id="style1">
        <IconStyle>
            <scale>2</scale>
            <Icon>
                <href>http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png</href>
            </Icon>
            <hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
        </IconStyle>
    </Style>
    <Placemark>
        <name>東京スカイツリー</name>
        <description>これは、東京スカイツリーです。</description>
        <styleUrl>#style1</styleUrl>
        <Point>
            <altitudeMode>relativeToGround</altitudeMode>
            <coordinates>139.8107252956902,35.71002945292051,634</coordinates>
        </Point>
    </Placemark>
    <Placemark>
        <name>東京タワー</name>
        <description>これは、東京タワーです。</description>
        <Point>
            <altitudeMode>relativeToGround</altitudeMode>
            <coordinates>139.745476,35.658537,333</coordinates>
        </Point>
    </Placemark>
</Document>
</kml>
  • style1という名前で<Style>属性が追加されており、スカイツリーのポイントの方に<styleUrl>#style1</styleUrl>でそのスタイルを読み込んでいます。
  • style1はグーグルマップ（？）からアイコンをとってきており、そのアイコンをスケールの値を2で読み込む、といった内容になっています（hotSpotはアイコンの表示位置を指定するもののようですが、よくわからないのでそのままにしておきます）。

このKMLファイルを読み込むと以下のようになります。ちゃんとスカイツリーの方だけにスタイルが適用されました。

f:id:anorith:20220327195727p:plain

今回は以上です。

Terria (1) TerriaMapを動かしてみる

Terria

前書き

最近TerriaというJavascriptのフレームワークを知りました。これは地理情報データ（特に3D TilesというCesiumの形式）を3D表示できるフレームワークだそうです。 国交省のPLATEAUにも使用されているのですが、Terria自体の日本語の情報があまりなかったので勉強がてらまとめていこうと思います。 Terriaといいつつ、TerriaMapの使用方法についてがほとんどになる気もします。

Terria(Terriajs)とは

Terriaというのはプロジェクト名でフレームワーク名はTerriajsだと思われます。ほかにも実際に 具体的な例はTerriaの公式サイトを見てもらえればどのようなものかイメージはつくと思います。 もともとはオーストラリアのCSIRO（国立の研究機関）内のData61というチーム（データ分析などの専門チーム？）によって開発されたようです。 そのためサンプルなどでもオーストラリアのデータが多いです。

お試し的にTerria (TerriaMap)を実際に動かす

Terriaはフレームワーク名ですが、TerriaMapというブラウザですぐ表示できるレベルの実装が完了しているリポジトリも用意されています。

以下ではWSL内でのDockerを使ってTerriaをローカルで動かすまでを行おうと思います。

上記ドキュメントのGetting Startedに従って動かすだけです。 適当な箇所にTerriaMapをクローンしてきて以下のようにDockerコンテナを起動します（nodeのバージョンが14なのは深い理由はありません）。

docker run --rm -it \
-v /path/to/TerriaMap:/TerriaMap \
-p 3001:3001 \
node:14 /bin/bash

あとはドキュメント通り以下コマンドを実行します（yarnはすでに入っているのでyarn自体のインストールは省略します）。インストール＆ビルドは多少時間がかかります。

cd TerriaMap
export NODE_OPTIONS=--max_old_space_size=4096
git config --global url."https://".insteadOf git://
yarn install && yarn gulp && yarn start

（2022/04/09: gitプロトコル⇒httpsプロトコルへの変更を追記）

しばらくすると以下のような画面が表示され、TerriaMapが起動します。これでlocalhost:3001にアクセスするとTerriaMapが表示されます。

f:id:anorith:20220320113943p:plain

ただし初期状態だと真っ暗な画面で何も見えないと思います。これは設定の問題で、画面上の方の「MapSettings」から「Map View」を「SD Smooth」に「Base Map」を「Positron (Light)」にすると以下のように地球が見えるようになります（初期状態は設定ファイルでいじれるはずですが、まだあまり見てません）。ドラッグで地球を回転、Ctrl＋ドラッグで視点を回転、ホイール（もしくは右クリック＋ドラッグ）で拡大縮小できます。

f:id:anorith:20220320114750p:plain

「Map View」を「2D」にすると2D表示されますが、2D表示だけならQGISとかLeafletとか他にも使えるソフトやライブラリがあるので、基本は3Dで見ることに価値があると思います。また「3D Terrain」は地形込みで表示できるモードで本来これをメインに使用するべきなのかもですが、まだ調べてないので調べたら記事にします。

今回は以上です。