チュートリアル9b
提供: svg2wiki
(版間での差分)
(→チュートリアル9b WebApp Layer メッシュタイル(カスタムダイアログ)) |
(→チュートリアル9b WebApp Layer メッシュタイル(カスタムダイアログ)) |
||
| 2行: | 2行: | ||
[[チュートリアル9]]に加えて、メッシュをクリックしたときに出現するダイアログをカスタマイズしてみます。 | [[チュートリアル9]]に加えて、メッシュをクリックしたときに出現するダイアログをカスタマイズしてみます。 | ||
| − | + | カスタマイズされたダイアログでは、メッシュの図形(rect要素)のmetadaに記載されたメッシュコードをもとに自治体名称を検索して表示しています。 | |
2022年2月15日 (火) 10:08時点における版
チュートリアル9b WebApp Layer メッシュタイル(カスタムダイアログ)
チュートリアル9に加えて、メッシュをクリックしたときに出現するダイアログをカスタマイズしてみます。
カスタマイズされたダイアログでは、メッシュの図形(rect要素)のmetadaに記載されたメッシュコードをもとに自治体名称を検索して表示しています。
- 実際の動作は、こちらをクリック。
- ソースコードのディレクトリ
異なるのはレイヤーに紐付いた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>
