チュートリアル9b

提供: svg2wiki
(版間での差分)
移動: 案内, 検索
(→‎チュートリアル9b WebApp Layer メッシュタイル(カスタムダイアログ))
(→‎チュートリアル9b WebApp Layer メッシュタイル(カスタムダイアログ))
 
(1人の利用者による、間の11版が非表示)
1行: 1行:
 
= チュートリアル9b WebApp Layer メッシュタイル(カスタムダイアログ)=
 
= チュートリアル9b WebApp Layer メッシュタイル(カスタムダイアログ)=
−
[[チュートリアル9]]に加えて、メッシュをクリックしたときに出現するダイアログをカスタマイズしてみます。
+
[[チュートリアル9]]に加えて、メッシュ(の図形：rect要素)をクリックしたときに出現するダイアログをカスタマイズしてみます。
  
 +
カスタマイズされたダイアログでは、メッシュのmetadaに記載されたメッシュコードをもとに自治体名称を検索して表示しています。
 +
小縮尺では県名、大縮尺では市区町村名を表示します。
  
  
 
* 実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/mesh2b/mesh2b.html こちら]をクリック。
 
* 実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/mesh2b/mesh2b.html こちら]をクリック。
−
* [https://svgmap.org/devinfo/devkddi/tutorials/mesh2b/ ソースコードのディレクトリ]
+
* 使用ファイルの[https://www.svgmap.org/devinfo/devkddi/tutorials/mesh2b.zip ZIPアーカイブファイル]
  
  
11行: 13行:
 
異なるのはレイヤーに紐付いたwebAppです。
 
異なるのはレイヤーに紐付いたwebAppです。
  
−
==meshTileViewerB.html==
+
==[https://svgmap.org/devinfo/devkddi/tutorials/mesh2b/meshTileViewerB.html meshTileViewerB.html]==
 +
[[チュートリアル9#meshTileViewer.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);
24行: 31行:
 
**rect.setAttribute("content",meshNumb+","+meshs[meshNumb].join(" "));
 
**rect.setAttribute("content",meshNumb+","+meshs[meshNumb].join(" "));
 
***meshs[meshNumb] 市区町村コード
 
***meshs[meshNumb] 市区町村コード
 +
 +
<pre>
 +
<!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>
 +
</pre>

2023年6月23日 (金) 14:28時点における最新版

[編集] チュートリアル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フレームワークのモーダルダイアログに渡す
  • async function loadLGdictionary(){ // 自治体名辞書を作る
    • lgDictionary={};//市区町村コードをKeyとした自治体名辞書
  • function buildMeshTileSvg(meshs, sourceID){
    • rect.setAttribute("content",meshNumb+","+meshs[meshNumb].join(" "));
      • meshs[meshNumb] 市区町村コード 
<!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>
「https://www.svgmap.org/wiki/index.php?title=%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB9b&oldid=1754」から取得
個人用ツール
名前空間

変種
操作
案内
ツール
Translate