チュートリアル9b
提供: svg2wiki
(版間での差分)
(→meshTileViewerB.html) |
(→meshTileViewerB.html) |
||
| 12行: | 12行: | ||
==[https://svgmap.org/devinfo/devkddi/tutorials/mesh2b/meshTileViewerB.html meshTileViewerB.html]== | ==[https://svgmap.org/devinfo/devkddi/tutorials/mesh2b/meshTileViewerB.html meshTileViewerB.html]== | ||
| + | [[チュートリアル9]]のWebApp、[https://svgmap.org/devinfo/devkddi/tutorials/mesh2/meshTileViewer.html meshTileViewer.htm]に対して追加されている部分を解説します。 | ||
| + | |||
*onload=async function() | *onload=async function() | ||
**[[解説書#setShowPoiProperty|svgMap.setShowPoiProperty]]( customShowPoiProperty, layerID); | **[[解説書#setShowPoiProperty|svgMap.setShowPoiProperty]]( customShowPoiProperty, layerID); | ||
2022年2月15日 (火) 10:02時点における版
チュートリアル9b WebApp Layer メッシュタイル(カスタムダイアログ)
チュートリアル9に加えて、メッシュをクリックしたときに出現するダイアログをカスタマイズしてみます。
- 実際の動作は、こちらをクリック。
- ソースコードのディレクトリ
異なるのはレイヤーに紐付いた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>
...
...
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>
