チュートリアル9b

提供: svg2wiki
(版間での差分)
移動: 案内, 検索
(→‎meshTileViewerB.html)
(→‎meshTileViewerB.html)
24行: 24行:
 
**rect.setAttribute("content",meshNumb+","+meshs[meshNumb].join(" "));
 
**rect.setAttribute("content",meshNumb+","+meshs[meshNumb].join(" "));
 
***meshs[meshNumb] 市区町村コード
 
***meshs[meshNumb] 市区町村コード
 +
 +
<pre>
 +
<!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>
 +
</pre>

2022年2月15日 (火) 10:00時点における版

チュートリアル9b WebApp Layer メッシュタイル(カスタムダイアログ)

チュートリアル9に加えて、メッシュをクリックしたときに出現するダイアログをカスタマイズしてみます。



異なるのはレイヤーに紐付いたwebAppです。

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] 市区町村コード 
<!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>
「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=1059」から取得
個人用ツール
名前空間

変種
操作
案内
ツール
Translate