チュートリアル9b
提供: svg2wiki
チュートリアル9b WebApp Layer メッシュタイル(カスタムダイアログ)
チュートリアル9に加えて、メッシュ(の図形：rect要素)をクリックしたときに出現するダイアログをカスタマイズしてみます。
カスタマイズされたダイアログでは、メッシュのmetadaに記載されたメッシュコードをもとに自治体名称を検索して表示しています。 小縮尺では県名、大縮尺では市区町村名を表示します。
- 実際の動作は、こちらをクリック。
- 使用ファイルのZIPアーカイブファイル
異なるのはレイヤーに紐付いたwebAppです。
meshTileViewerB.html
チュートリアル9のWebApp、meshTileViewer.htmに対して追加されている部分を解説します。
市区町村コードをキーにした市区町村名の連想配列を作るためのデータを読み込んでいる点と、それを用いたカスタムダイアログを出現させるためのコールバック関数を設定している点が追加部分になります。
- onload=async function()
- svgMap.setShowPoiProperty( customShowPoiProperty, layerID);
- 紐付いたレイヤーのオブジェクトをヒットしたときに出現する処理に独自のコールバック関数(customShowPoiProperty)に指定する
- customShowPoiProperty
- ヒットしたオブジェクトのcontent属性にある市区町村コードをKeyにしてlgDictionaryを辞書引き、自治体名を求める
- 一つのメッシュに複数の自治体が属しているケースがある点に注意
- svgMap.showModal(html,400,180); 用意したhtmlをSVGMapフレームワークのモーダルダイアログに渡す
- ヒットしたオブジェクトのcontent属性にある市区町村コードをKeyにしてlgDictionaryを辞書引き、自治体名を求める
- svgMap.setShowPoiProperty( customShowPoiProperty, layerID);
- async function loadLGdictionary(){ // 自治体名辞書を作る
- lgDictionary={};//市区町村コードをKeyとした自治体名辞書
- function buildMeshTileSvg(meshs, sourceID){
- rect.setAttribute("content",meshNumb+","+meshs[meshNumb].join(" "));
- meshs[meshNumb] 市区町村コード
- rect.setAttribute("content",meshNumb+","+meshs[meshNumb].join(" "));
<!doctype html>
...
...
<script>
...
...
var lgDictCsv = meshCsvHd + "code_name.csv";
onload=async function(){
document.addEventListener("zoomPanMap", updateLayer,false);
svgMap.setShowPoiProperty( customShowPoiProperty, layerID);
await loadLGdictionary();
//console.log("lgDictionary:",lgDictionary);
updateLayer();
}
...
...
function buildMeshTileSvg(meshs, sourceID){
var tileGroup = svgImage.createElement("g");
tileGroup.setAttribute("data-src",sourceID);
for ( var meshNumb in meshs ){
...
rect.setAttribute("content",meshNumb+","+meshs[meshNumb].join(" "));
...
}
...
}
async function loadLGdictionary(){ // 自治体名辞書を作る
var lgCsv = await loadText(lgDictCsv);
lgCsv = lgCsv.split(/[\r\n]+/);
for ( var line of lgCsv){
if ( line.length >1){
line = line.split(",");
lgDictionary[line[0]]=line[2]+" "+line[3];
lgDictionary[line[0].substring(0,2)]=line[2]; //県コード辞書もついでに作っておく
}
}
}
function customShowPoiProperty(target){
var metaSchema = null;
// metaSchema = target.ownerDocument.firstChild.getAttribute("property").split(","); // debug 2013.8.27
console.log("POI target:",target);
var content = (target.getAttribute("content")).split(",");
var meshCode=content[0];
var lgCodes=content[1].split(" ");
var lgNames=[];
for ( var lgCode of lgCodes){
lgNames.push(lgDictionary[lgCode]);
}
var html = "<ul><li>自治体名: <ul><li>"+lgNames.join("<li>")+"</ul><li>メッシュコード:"+meshCode+"</ul>";
svgMap.showModal(html,400,180);
}
...
...
</script>
<body>
<h3>地域基準メッシュデータを表示します</h3>
</body>
</html>
