Tiling Point Clouds (las)

Cesium ion を利用せず、CesiumJS で las を取り込みたい。座標変換で位置も合わせたい。何かないでしょうか？

検索したら、引っ掛かりました。
https://stackoverflow.com/questions/67199138/how-to-convert-las-file-to-3d-tiles-so-it-can-render-by-cesium-not-use-cesium-io

試したところ、gocesiumtiler だけが Win10 でも動作しました。
https://github.com/mfbonfigli/gocesiumtiler

Go言語ですが、ビルドするだけなので特別な知識は必要なし。インストール後にプロンプトから go build を打つだけです。作者に感謝！

変換コマンドも1行で簡単。先の静岡の点群データに対しては以下の通り。

./gocesiumtiler -i ./input -o ./output -e 2450 -maxpts 100000 -z 2.5 -geoid -folder -recursive

-e は 変換元のEPSG コードの指定を意味し、続く 2450 が JGD2000 8系のコードです。JGD2011 は含まれていませんでした。追加方法を後日探りましょう。
-z は 高さの補正。そのままでは2mほど埋まったので、2.5m高くしました。地形の入れ替えも探らないと。

できたタイルを Cesium に追加。

const tileset0 = new Cesium.Cesium3DTileset({
  url: "./output/08OF6123/tileset.json",
});
viewer.scene.primitives.add(tileset0);

これで表示されました。簡単です。
タイルにしても詳細を表示させるにはやや重いのですが、許容範囲。点群 viewer としてWebGIS を利用できるようになったのは一歩前進です。

Cesium で点群表示

点群の共有（Viewer）に Cesium が使えるかも？と思い立ち、テストしてみました。

点群は静岡県のMMSを利用。G空間情報センターに掲載されているデータです。
08OF6123.las 4GB

Cesium で共有するなら 3D tile が軽くて良さそう、ということで QGIS の出番。
レイヤーから点群レイヤーを追加→ Qgis2threejs プラグインでシーンを gltf に保存。
https://plugins.qgis.org/plugins/Qgis2threejs/

ダメでした。
表示拡大率そのままで書き出されるので、拡大した際に点群が詳細になりません。
拡大してから書き出すと、途中で落ちます。QGIS なので重い作業はダメなのでしょう。

あきらめて、Cesium ion で変換。
サーバー側での変換は体感で20分くらいでしょうか（測定していませんでした）。
位置は手合わせですね。緯度・経度ならうまくいくのでしょうか？
https://community.cesium.com/t/point-cloud-georeferencing-cesium-ion/10766
ま、アップロードが必要な時点で仕事では使えそうにないですが。

変換されたタイルを Cesium for Unreal で取り込みましたが、エラー。

[TileContentFactory.cpp:112] No loader registered for tile with content type 'application/octet-stream' and magic value 'pnts'.

まだプラグインでサポートされていないようです。
https://community.cesium.com/t/are-point-clouds-supported/12845/5

では、Cesium で。
npm start してから js に変数部分のコードを張り付けて viewer に add するだけ。と思いきや、表示されません。トークンですね。
Cesium ion にアクセスしてフルコードをGET。 Sandcastle で表示されたアクセストークンを貼り付けたら、表示されました。

 

 

Cesium ion での LAS の位置合わせ、Cesium での 3D タイルの標高合わせ、点の大きさ変更。この3点は今後修正したいですね。

npm

npm, yarn ともに Node.js のパッケージマネージャー。

yarn は npmでインストール。npm は Node.js のインストール段階で入ります。yarn の方が新しいとのこと。Node.js は JavaScript の実行環境です。

初心者なので、npm から。これまでの復習です。

package.json を作成(全てyesで作成)
$ npm init -y

パッケージのローカルインストール
$ npm install aaa
（同時に package.json に aaa が記載される）
Ver指定あり
$ npm install aaa@1.2.3
グローバルインストール(npm-check-updates をどこからでも使いたい場合)
$ npm install -g npm-check-updates

package.json に記載されたパッケージをインストール（別の場所に復元する場合などに利用）
$ npm install
package.json に記載されたVer.にアップデート
$ npm update

パッケージのアップデート(npm-check-updates の利用)
$ ncu　-u

package.json 内の scripts.startを実行
$ npm start
（"start": "node server.js" と記載されていたら、サーバーが立ち上がる）

****************************
20220331追記
Cesium で localhost を IP に変更すると、つながりませんでした。
$ node server.cjs --public=true
でつながりました。
https://community.cesium.com/t/setting-up-a-cesium-server-using-other-than-localhost/3729

TerriaJS

PLATEAU では、Cesium＋TerriaJS が利用されています。

次は TerriaJS を試してみましょう、と公式に沿って Ubuntu 20.04 に入れようとしたのですが、yarn が入リませんでした。なぜか node v10が入っており、古すぎたようです。
上げましょう。
 
Node Ver. UP
$ curl -sL https://deb.nodesource.com/setup_lts.x | sudo bash -
$ sudo apt-get install -y nodejs

n（Node のVer.管理）のインストール
$ npm install -g n
Node.jsのバージョンの確認
$ n --stable
$ n --latest
Stableのインストール
$ n stable
version 確認
$ node -v

あらためて TerriaJS のインストール
$ git clone https://github.com/TerriaJS/TerriaMap.git
$ cd TerriaMap
$ export NODE_OPTIONS=--max_old_space_size=4096
$ npm install -g yarn
$ yarn install && yarn gulp && yarn start

http://localhost:3001 でオーストラリアのサンプルが表示されました。

npm に比べた yarn の利点をまだ理解していません。手を動かしながら、追いつきましょう。

解析雨量のタイル画像

気象庁HPによれば、解析雨量の png タイルを配信しているとのこと。
https://www.data.jma.go.jp/add/suishin/cgi-bin/catalogue/make_product_page.cgi?id=KaisekiU
解析雨量タイル画像
< 要素 >解析雨量のタイル画像
< キーワード >解析雨量
< 領域 >日本域
< 解像度 >1km
< 配信頻度 >30分毎
< 提供方法 >気象庁HP
< 形式 >PNG

上部のリンクから気象庁ホームページへ。
https://www.jma.go.jp/bosai/kaikotan/

png のリンクは張られていませんが、画像は掲載されています。developper tool では png の保存先が示されています。WebGIS に取り込むには、JavaScript でこのアドレスを渡せばOK。
JavaScripｔ 自体は WebGIS の取り扱いを契機にを使い始めたのですが、古いスクリプト言語なので情報は溢れています。雑誌にも頻繁に掲載されていましたし、Pythonと同様で使いやすくなっています。ブラウザがあればすぐに試すことができるので、ハードルは低いでしょう。

解析雨量の png は30分毎に配信されるとのこと。最新の時刻が保存先のアドレスに使われるため、現在時刻を取得してから30分切り捨てで整形し、URL内に含めることで最新版を取得することができました。

少し動かしていて気付いたのが、タイムラグ。30分毎に配信されるとのことでしたが、毎時00分、30分ちょうどに配信されるのではなく、15分程度遅れているようです。どこにも記載がありません。面倒なので、常に30分前時点での最新版を指定するようにしました。これで待機時間がなくなりました。ナウキャストも表示できるようにしておいたので、問題ないでしょう。ちなみに、ナウキャストは現在時刻基準で10分切り捨てでも表示されます。違いは何でしょう？

残念ながら、zoom level は 9+が限界。もう少し拡大できたら嬉しい。

気象庁のHPで公開されている情報は、クリエイティブ・コモン：CC-BYで商用利用可とのこと（予報はしません）。ありがたいですね。
https://www.jma.go.jp/jma/kishou/info/coment.html

Cesium

MapLibre GL JS での 3次元地形の表示は難しいようでしたので、Cesiumに切り替え。

PLATEAU や、シームレス地質図2D/3D統合版で利用されています。
https://plateauview.mlit.go.jp/
https://gbank.gsj.jp/seamless/cesium/

npm からインストール。

npm init -y
npm install cesium　--save

適当なhtml,js,cssを作成して npm start。で、エラー。
html をそのまま開くことにしてみましたが、別のエラーが出ます。

SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The image element contains cross-origin data, and may not be loaded.

クロスオリジンによる制約回避は一時的に留めたい。ということで Chrome のショートカットのリンク先を以下に変更。

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:\<htmlのあるフォルダ>"

これで Cesium World Terrain を重ねて倒すと、3次元で表示されました。

次は GeoJSON を読んでポイント表示。

viewer.dataSources.add(Cesium.GeoJsonDataSource.load('./vector/aaa.geojson', {
    clampToGround: true,
    markerSize: 20,
    //markerSymbol: 'cross'
}));

Z値（高さ）を持っていないポイントでも、clampToGround: true とすると地形の上に乗せてくれます。鳥観図にしてもポイントが山の中に隠れません。地味にうれしい機能です。
やはり地形は3次元が good。昔、カシミールなどで3次元表示を見始めた頃を思い出しました。地形データのライセンスはわかりませんでしたが、おそらく商用利用はダメでしょうね。地理院データを使いたいところです。

地理院タイル

国土地理院では各種タイルが用意されています。

WebGIS では、これらのタイルを利用するのが基本のようですね。MapLibre GL では、addSource, addLayer で次々に追加できます。
当然ながら、GeoJSON も取り込むことができます。ポイントだと比較的早く表示されましたが、全国分のポリゴンは重すぎるようでブラウザ側が落ちてしまいました。

いろいろな位置情報を表示し公開できる。しかもオープンソース。
位置情報の発信が進んできた背景を体感できました。