チュートリアル10

チュートリアル10 WebApp Layer WebApp Layer メッシュデータのビットイメージ化

メッシュデータ（グリッドデータ）はラスターデータとも呼ばれるように、Webコンテンツとして一般的に使われるビットイメージデータ形式(PNGやJPEGなど)とほぼ同等の形式です。そこでメッシュデータを動的にビットイメージコンテンツ(PNG形式)化し、地図画面上に表示するWebAppを構築してみます。性能面でのメリットがあります。

特徴的なコードはレイヤーに紐付いたwebAppにあります。

• 実際の動作は、こちらをクリック。
• ソースコードのディレクトリ

使用するデータ

地理院が公開するジオイド高データ(TEXTデータ)を使用します。

このデータの詳細な仕様は上記サイトで配布されているパッケージ同梱文書(asc取扱説明書.pdf)に記載されていますが、基本的にはテキストのRaster形式です。

データ形式としては、カンマ区切りでなく空白文字区切り、固定長のデータとなっている点が注意点

データの内容としては、グリッドデータの原点の定義と、それをビットイメージ画像として可視化したときの原点との違いに注意が必要です。（下記２点）

• Y(緯度)軸の向きが逆のため、元のラスターデータの原点は南端、ビットイメージの原点は上端、
• ラスターデータの原点は、それをビットイメージとして可視化したときのピクセルの中心位置なのに対し、ビットイメージを配置するときの原点はピクセルの左上隅
• 説明図svg

meshTileViewerB.html

• onload=async function()
  • svgMap.setShowPoiProperty( customShowPoiProperty, layerID);
    • 紐付いたレイヤーのオブジェクトをヒットしたときに出現する処理に独自のコールバック関数(customShowPoiProperty)に指定する
    • customShowPoiProperty
      • ヒットしたオブジェクトのcontent属性にある市区町村コードをKeyにしてlgDictionaryを辞書引き、自治体名を求める
        • 一つのメッシュに複数の自治体が属しているケースがある点に注意
      • svgMap.showModal(html,400,180); 用意したhtmlをSVGMapフレームワークのモーダルダイアログに渡す
• async function loadLGdictionary(){ // 自治体名辞書を作る
  • lgDictionary={};//市区町村コードをKeyとした自治体名辞書
• function buildMeshTileSvg(meshs, sourceID){
  • rect.setAttribute("content",meshNumb+","+meshs[meshNumb].join(" "));
    • meshs[meshNumb] 市区町村コード