チュートリアル10

提供: svg2wiki
2022年2月15日 (火) 05:35時点におけるAdmin (トーク | 投稿記録)による版

移動: 案内, 検索

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

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

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




使用するデータ

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

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

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

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

  • Y(緯度)軸の向きが逆のため、元のラスターデータの原点は南端、ビットイメージの原点は上端、
  • ラスターデータの原点は、それをビットイメージとして可視化したときのピクセルの中心位置なのに対し、ビットイメージを配置するときの原点はピクセルの左上隅
  • Raster.png 説明図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] 市区町村コード
個人用ツール
名前空間

変種
操作
案内
ツール
Translate