チュートリアル8

提供: svg2wiki
(版間での差分)
移動: 案内, 検索
(→‎ArrayMesh.svg)
(→‎ArrayMesh.html, ArrayMesh.js)
 
(1人の利用者による、間の37版が非表示)
1行: 1行:
 +
=チュートリアル8 WebApp Layer メッシュデータ=
 +
* 実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/mesh1/mesh1.html こちら]をクリック。
 +
* 使用ファイルの[https://www.svgmap.org/devinfo/devkddi/tutorials/mesh1.zip ZIPアーカイブファイル]
 +
 +
 
==メッシュデータとは==
 
==メッシュデータとは==
 
メッシュデータは、等間隔のグリッド上にデータが並んだデータの構造を持っており、グリッドデータとも呼ばれます。
 
メッシュデータは、等間隔のグリッド上にデータが並んだデータの構造を持っており、グリッドデータとも呼ばれます。
6行: 11行:
  
 
{| class="wikitable"
 
{| class="wikitable"
−
|+10x8 meshData
+
|+10x8 meshData (X0=xx,Y0=yy,interval=ii)
 
|-
 
|-
−
|0,0
+
|Val0,0
−
|1,0
+
|Val1,0
−
|2,0
+
|Val2,0
−
|3,0
+
|Val3,0
−
|4,0
+
|Val4,0
−
|5,0
+
|Val5,0
−
|6,0
+
|Val6,0
−
|7,0
+
|Val7,0
−
|8,0
+
|Val8,0
−
|9,0
+
|Val9,0
 
|-
 
|-
−
|0,1
+
|Val0,1
−
|1,1
+
|Val1,1
−
|2,1
+
|Val2,1
−
|3,1
+
|Val3,1
−
|4,1
+
|Val4,1
−
|5,1
+
|Val5,1
−
|6,1
+
|Val6,1
−
|7,1
+
|Val7,1
−
|8,1
+
|Val8,1
−
|9,1
+
|Val9,1
 
|-
 
|-
−
|0,2
+
|Val0,2
−
|1,2
+
|Val1,2
−
|2,2
+
|Val2,2
−
|3,2
+
|Val3,2
−
|4,2
+
|Val4,2
−
|5,2
+
|Val5,2
−
|6,2
+
|Val6,2
−
|7,2
+
|Val7,2
−
|8,2
+
|Val8,2
−
|9,2
+
|Val9,2
 
|-
 
|-
−
|0,3
+
|Val0,3
−
|1,3
+
|Val1,3
−
|2,3
+
|Val2,3
−
|3,3
+
|Val3,3
−
|4,3
+
|Val4,3
−
|5,3
+
|Val5,3
−
|6,3
+
|Val6,3
−
|7,3
+
|Val7,3
−
|8,3
+
|Val8,3
−
|9,3
+
|Val9,3
 
|-
 
|-
−
|0,4
+
|Val0,4
−
|1,4
+
|Val1,4
−
|2,4
+
|Val2,4
−
|3,4
+
|Val3,4
−
|4,4
+
|Val4,4
−
|5,4
+
|Val5,4
−
|6,4
+
|Val6,4
−
|7,4
+
|Val7,4
−
|8,4
+
|Val8,4
−
|9,4
+
|Val9,4
 
|-
 
|-
−
|0,5
+
|Val0,5
−
|1,5
+
|Val1,5
−
|2,5
+
|Val2,5
−
|3,5
+
|Val3,5
−
|4,5
+
|Val4,5
−
|5,5
+
|Val5,5
−
|6,5
+
|Val6,5
−
|7,5
+
|Val7,5
−
|8,5
+
|Val8,5
−
|9,5
+
|Val9,5
 
|-
 
|-
−
|0,6
+
|Val0,6
−
|1,6
+
|Val1,6
−
|2,6
+
|Val2,6
−
|3,6
+
|Val3,6
−
|4,6
+
|Val4,6
−
|5,6
+
|Val5,6
−
|6,6
+
|Val6,6
−
|7,6
+
|Val7,6
−
|8,6
+
|Val8,6
−
|9,6
+
|Val9,6
 
|-
 
|-
−
|0,7
+
|Val0,7
−
|1,7
+
|Val1,7
−
|2,7
+
|Val2,7
−
|3,7
+
|Val3,7
−
|4,7
+
|Val4,7
−
|5,7
+
|Val5,7
−
|6,7
+
|Val6,7
−
|7,7
+
|Val7,7
−
|8,7
+
|Val8,7
−
|9,7
+
|Val9,7
 
|}
 
|}
  
−
上の図で、個々の升目が一個のメッシュ、升目の中の数字はメッシュの番号(二次元配列の番号）、それぞれの升目の中に値が入ります。
+
上の図で、個々の升目が一個のメッシュ、升目の中の数字はメッシュの番号(二次元配列の番号）、それぞれの升目の中に値が入ります。また括弧の中のメタデータX0,Y0,intervalが原点の座標値、メッシュ間隔です。（メタデータとしてはさらにデータの単位や座標系・説明などが記述されることがある）
−
 
+
  
 +
===メッシュデータ形式の種類===
 
データ形式の構造としては、主に以下の二種類が知られています。
 
データ形式の構造としては、主に以下の二種類が知られています。
−
* Raster
+
==== Raster ====
−
** メッシュデータの構造をそのままデータ化したものです。
+
* 上図メッシュデータの構造をそのままデータ化したものです。
−
** よく使用されるASCI(テキスト)I符号化形式: [https://gdal.org/drivers/raster/xyz.html AAIGrid]
+
* よく使用されるASCII(テキスト)符号化形式: [https://gdal.org/drivers/raster/xyz.html AAIGrid]
−
** 圧縮が効きやすいデータのため、差分符号化、バイナリ符号化も よく行われます。ビットイメージデータ形式（ただしロスレス形式）をそのまま利用することもあります。
+
* 圧縮が効きやすいデータのため、差分符号化、バイナリ符号化も よく行われます。ビットイメージデータ形式（ただしロスレス形式）をそのまま利用することもあります。
−
*** [https://ja.wikipedia.org/wiki/GeoTIFF GeoTIFF]
+
** [https://ja.wikipedia.org/wiki/GeoTIFF GeoTIFF]
−
*** [https://maps.gsi.go.jp/development/demtile.html 地理院の標高タイル]の例(PNGで符号化)
+
** [https://maps.gsi.go.jp/development/demtile.html 地理院の標高タイル]の例(PNGで符号化)
−
* [https://gdal.org/drivers/raster/xyz.html Gridded XYZ]
+
** [https://gdal.org/drivers/raster/index.html GDALのラスタードライバ一覧]
−
** Pointフィーチャの形式を用いてデータを符号化します。ただしPointの座標が必ずグリッド上にしか存在しないように制約をかけます。
+
 
 +
==== [https://gdal.org/drivers/raster/xyz.html Gridded XYZ] ====
 +
* Pointフィーチャの形式を用いてデータを符号化します。ただしPointの座標が必ずグリッド上にしか存在しないように制約をかけます。
 +
* Rasterとの違いは、各レコードに座標値(X,Y)が入る点です。
 +
<code><pre>
 +
X0,Y0,interval
 +
Value00,Value10,Value20
 +
Value01,Value11,Value21
 +
Value02,Value12,Value22
 +
</pre></code>
 +
このようなRasterデータは、 Gridded XYZで記述すると以下のようになります。
 +
<code><pre>
 +
X0,Y0,Value00
 +
X1,Y0,Value10
 +
X2,Y0,Value20
 +
X0,Y1,Value01
 +
....
 +
X2,Y2,Value22
 +
</code></pre>
 +
 
 +
ここで、Gridded XYZではレコードの並びの順番は問いません。また、格子点にデータが無い場合はそのレコードは省略をできます。データによってはX,Y値が重複するデータ（正規化されていないデータ）が交換されることもあります。このように正規化されていなくても記述できることが特徴的と言えます。
 +
 
 +
 
 +
 
 +
* [https://gdal.org/drivers/raster/xyz.html こちらも参考にしてください。]
  
 
データ形式構造間の変換ツールの例： https://gdal.org/programs/gdal_grid.html
 
データ形式構造間の変換ツールの例： https://gdal.org/programs/gdal_grid.html
252行: 281行:
  
 
<!-- OpenStretMap背景地図を表示状態として読み込む -->
 
<!-- OpenStretMap背景地図を表示状態として読み込む -->
−
<animation xlink:href="../tutorial5/dynamicOSM_r11.svg" x="-3000" y="-3000" width="6000" height="6000" title="Japan Coastline" class="basemap" visibility="visible"/>
+
<animation xlink:href="./dynamicOSM_r11.svg" x="-3000" y="-3000" width="6000" height="6000" title="Japan Coastline" class="basemap" visibility="visible"/>
  
 
<!-- CSVのメッシュデータレイヤーを表示状態として読み込む -->
 
<!-- CSVのメッシュデータレイヤーを表示状態として読み込む -->
260行: 289行:
  
 
==ArrayMesh.svg==
 
==ArrayMesh.svg==
−
* webAppが紐付けられたレイヤー
+
* ドキュメントルート要素(svg要素)の、data-controller属性で、この[[解説書#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|レイヤーを操作するwebApp]]を指定しています。
 +
**<code>data-controller="ArrayMesh.html#exec=appearOnLayerLoad</code>
 +
**<code>exec=appearOnLayerLoad</code>は、レイヤが表示状態になるとwebAppのウィンドが出現する設定です。（[[解説書#.E8.A9.B3.E7.B4.B0|詳しくはこちら]]）
 +
 
 
<pre>
 
<pre>
 
<?xml version="1.0" encoding="UTF-8"?>
 
<?xml version="1.0" encoding="UTF-8"?>
274行: 306行:
 
</pre>
 
</pre>
  
−
==ArrayMesh.html==
+
==ArrayMesh.html, ArrayMesh.js==
−
* メッシュデータを読み込み、一個一個のメッシュをsvgのrect要素として可視化。
+
メッシュデータを読み込み、一個一個のメッシュをsvgのrect要素として可視化します。
 +
*<code>addEventListener("load",async function(){..</code> : webAppロード後 fetchAPIでメッシュデータを読み込み
 +
**メッシュデータは１行ごとに切り分けられた文字列として、csvLines[]に格納
 +
*<code>getCsvProps(headerLine)</code> : ヘッダ行を読み込み
 +
*<code>getRange()</code> : （ヒートマップの色分けのための）可視化値の最大最小値を算出
 +
*<code>drawMesh()</code> : メッシュデータを１行ずつ読み込み、さらにカラムで分割し、メッシュデータを一個づつ可視化している
 +
**<code>setMesh(...)</code> : 一個一個のメッシュを可視化している関数
 +
***<code>xd, yd</code> : メッシュの地理座標値(xd:経度, yd:緯度)を算出している
 +
****Note：y座標に注意：SVGコンテンツの座標と地理的な座標(緯度の座標軸)の向きが逆。そのため北（緯度の値が大きい側）がSVG座標での原点（SVGのY座標の値が小さい側）になる。
 +
***<code>cl = document.createElement("rect");</code>: rect要素としてメッシュを可視化
 +
****<code>cl.setAttribute - x,y,width,height</code>: 地理座標値をSVGコンテンツの座標値に変換し、SVGのrect要素に設定
 +
****ArrayMesh.svgの、　<code>globalCoordinateSystem</code>要素で、指定した変換係数(100,0,0,-100,0,0)を前提に決め打ちしている
 +
***<code>getColor(val, minVal, maxVal)</code>: 可視化する値を色コードに変換
 +
****<code>HSVtoRGB(h, s, v)</code>: HSV値をRGB値(SVGなどで設定できる色情報)に変換する関数。
 +
****このチュートリアルでは、[https://ja.wikipedia.org/wiki/HSV%E8%89%B2%E7%A9%BA%E9%96%93 HSV(Hue(色相), Satulation(彩度), Value(明度))色空間]の色相(H値)に、値を関連付けて、[https://ja.wikipedia.org/wiki/%E3%83%92%E3%83%BC%E3%83%88%E3%83%9E%E3%83%83%E3%83%97 ヒートマップ]的な可視化を行っています。(S,Vは最大値に設定（一番くっきりした色）)
 +
**<code>svgMap.refreshScreen()</code> 伸縮スクロール以外のタイミングでDOMの再描画が必要な場合、[[解説書#refreshScreen|再描画]]を明示する必要があります。
 +
***[[解説書#.E5.86.8D.E6.8F.8F.E7.94.BB.E3.81.AE.E5.88.B6.E9.99.90|参考情報]]
 +
 
 +
<pre>
 +
<!DOCTYPE html>
 +
<html>
 +
<head>
 +
<title>CSV Mesh Data Visualizer Controller</title>
 +
<meta charset="UTF-8">
 +
</head>
 +
<script src="https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/svgMapLayerLib.js"></script>
 +
<script src="ArrayMesh.js"></script>
 +
 
 +
<body>
 +
<h3>Mesh Data Controller</h3>
 +
 
 +
<div id="gui">
 +
  <form>
 +
      <span >min</span>
 +
  <input id="vminI" type="text" name="min" style="width :80px;font-size:80%">
 +
      <span >max</span>
 +
  <input id="vmaxI" type="text" name="max" style="width :80px;font-size:80%">
 +
  <input id="vset" type="button" onclick="setRange( )" value="setRange"/>
 +
  </form>
 +
  <table border="0">
 +
  <tr><td colspan="3">
 +
  <img src="hsvBar.png" width="200" height="10"/>
 +
  </td></tr>
 +
  <tr style="font-size:60%"><td>
 +
  <span id="scalemin">min</span>
 +
  </td><td align="center">
 +
  <span id="scalemid">mid</span>
 +
  </td><td align="right">
 +
  <span id="scalemax">max</span>
 +
  </td><tr>
 +
  </table>
 +
</body>
 +
</html>
 +
 
 +
</pre>
 +
 
 +
<pre>
 +
 
 +
var csvPath = "mesh.csv";
 +
 
 +
var csvLines, csvProps;
 +
 
 +
addEventListener("load",async function(){
 +
csvLines = await getText(csvPath);
 +
csvLines = csvLines.split("\n");
 +
csvProps=getCsvProps(csvLines[0]);
 +
vminI.value=csvProps.minVal;
 +
vmaxI.value=csvProps.maxVal;
 +
getRange();
 +
drawMesh(csvLines, csvProps);
 +
});
 +
 
 +
function drawMesh(csvLines, csvProps, minVal, maxVal){
 +
if (!minVal){
 +
minVal = csvProps.minVal;
 +
}
 +
if (!maxVal){
 +
maxVal = csvProps.maxVal;
 +
}
 +
for ( var i = 1 ; i < csvProps.partY + 1 ; i++ ){
 +
var strTxt = csvLines[i].split(",");
 +
for ( var j = 0 ; j < csvProps.partX ; j++ ){
 +
if ( strTxt[j].replace(/\s+/g, "") !=""){
 +
var val = Number(strTxt[j]);
 +
setMesh( j , i-1 , val, csvProps, minVal, maxVal );
 +
}
 +
}
 +
}
 +
svgMap.refreshScreen();
 +
}
 +
 
 +
function setMesh( xp , yp , value, csvProps, minVal, maxVal ){
 +
// console.log("call getMesh:");
 +
var color = getColor(value, minVal, maxVal);
 +
var cl = svgImage.getElementById(xp+":"+yp);
 +
if ( cl ){
 +
cl.setAttribute("fill" , color);
 +
} else {
 +
var xd = csvProps.minX + xp * csvProps.twd; // rectの西
 +
var yd = csvProps.maxY - yp * csvProps.thd; // rectの北
 +
 +
cl = document.createElement("rect"); // Should be used NS ( for Firefox!!)
 +
cl.setAttribute("x" ,  100 * xd );
 +
cl.setAttribute("y" , -100 * yd );
 +
cl.setAttribute("width" , 100 * csvProps.twd );
 +
cl.setAttribute("height" , 100 * csvProps.thd );
 +
cl.setAttribute("content" , value);
 +
cl.setAttribute("fill" , color);
 +
cl.setAttribute("id", xp+":"+yp);
 +
svgImage.getElementsByTagName("svg")[0].appendChild(cl);
 +
}
 +
}
 +
 
 +
function getCsvProps(headerLine){
 +
var hp = getHeaderParams( headerLine );
 +
console.log("sc_param:",hp);
 +
svgImage.documentElement.setAttribute("property", hp.valName);
 +
 +
csvProps={
 +
minX: Number(hp.minX),
 +
maxX: Number(hp.maxX),
 +
minY: Number(hp.minY),
 +
maxY: Number(hp.maxY),
 +
minVal: Number(hp.minVal),
 +
maxVal: Number(hp.maxVal),
 +
partX: Number(hp.partX),
 +
partY: Number(hp.partY),
 +
}
 +
 +
csvProps.twd = ( csvProps.maxX - csvProps.minX ) / csvProps.partX;
 +
csvProps.thd = ( csvProps.maxY - csvProps.minY ) / csvProps.partY;
 +
 +
return ( csvProps );
 +
updateTile();
 +
}
 +
 
 +
function getHeaderParams( hash ){
 +
hash = hash.split(",");
 +
for ( var i = 0 ; i < hash.length ; i++ ){
 +
hash[i] = hash[i].split(":");
 +
if ( hash[i][1] ){
 +
hash[hash[i][0]] = hash[i][1];
 +
} else {
 +
hash[hash[i][0]] = true;
 +
}
 +
}
 +
return ( hash );
 +
}
 +
 
 +
async function getText(path){
 +
var response = await fetch(path);
 +
var txt = await response.text();
 +
return ( txt );
 +
}
 +
 
 +
function getColor( val, minVal, maxVal ){
 +
 +
// value clip
 +
if ( val > maxVal ){
 +
val = maxVal;
 +
}
 +
if ( val < minVal ){
 +
val = minVal;
 +
}
 +
 +
// Hue値の算出(最大値:H=0(赤) , 最小値:H=270(青紫) 逆周り)
 +
var h = 270 - 270 * (val - minVal) / (maxVal - minVal);
 +
 +
var ans = HSVtoRGB (h, 255, 255);
 +
 +
return ("#"+ pad16(ans.r) + pad16(ans.g) + pad16(ans.b));
 +
}
 +
 
 +
function pad16( val ){
 +
var bv =  "00" + val.toString(16);
 +
bv = bv.substr(bv.length - 2, 2);
 +
return ( bv );
 +
}
 +
 
 +
function HSVtoRGB (h, s, v) { // from http://d.hatena.ne.jp/ja9/20100903/1283504341
 +
var r, g, b; // 0..255
 +
while (h < 0) {
 +
h += 360;
 +
}
 +
h = h % 360;
 +
 +
// 特別な場合 saturation = 0
 +
if (s == 0) {
 +
// → RGB は V に等しい
 +
v = Math.round(v);
 +
return {'r': v, 'g': v, 'b': v};
 +
}
 +
s = s / 255;
 +
 +
var i = Math.floor(h / 60) % 6,
 +
f = (h / 60) - i,
 +
p = v * (1 - s),
 +
q = v * (1 - f * s),
 +
t = v * (1 - (1 - f) * s);
 +
 
 +
switch (i) {
 +
case 0 :
 +
r = v;  g = t;  b = p;  break;
 +
case 1 :
 +
r = q;  g = v;  b = p;  break;
 +
case 2 :
 +
r = p;  g = v;  b = t;  break;
 +
case 3 :
 +
r = p;  g = q;  b = v;  break;
 +
case 4 :
 +
r = t;  g = p;  b = v;  break;
 +
case 5 :
 +
r = v;  g = p;  b = q;  break;
 +
}
 +
return {'r': Math.round(r), 'g': Math.round(g), 'b': Math.round(b)};
 +
}
 +
 
 +
 
 +
function getRange(){
 +
if ( isNaN(vminI.value) || isNaN(vmaxI.value) ){return}
 +
var minVal = Number(vminI.value);
 +
var maxVal = Number(vmaxI.value);
 +
if ( minVal > maxVal){[minVal, maxVal] = [maxVal, minVal]}
 +
 +
document.getElementById("scalemin").innerHTML = minVal.toPrecision(5);
 +
document.getElementById("scalemax").innerHTML = maxVal.toPrecision(5);
 +
document.getElementById("scalemid").innerHTML = ((maxVal + minVal)/2.0).toPrecision(5);
 +
return{minVal,maxVal}
 +
}
 +
 
 +
function setRange(){
 +
var range=getRange();
 +
drawMesh(csvLines, csvProps, range.minVal, range.maxVal);
 +
}
 +
</pre>

2024年7月24日 (水) 10:28時点における最新版

目次

[編集] チュートリアル8 WebApp Layer メッシュデータ


[編集] メッシュデータとは

メッシュデータは、等間隔のグリッド上にデータが並んだデータの構造を持っており、グリッドデータとも呼ばれます。 プログラム上では、二次元配列データとそのメタデータ（原点とグリッド間隔の情報など）として扱えます。

日本では、メッシュ間隔と原点、および各メッシュへの附番規則として、地域基準メッシュがよく用いられています。参考１、参考２、参考３（なお、地域基準メッシュはメッシュデータのデータ形式ではない）

10x8 meshData (X0=xx,Y0=yy,interval=ii)
Val0,0 Val1,0 Val2,0 Val3,0 Val4,0 Val5,0 Val6,0 Val7,0 Val8,0 Val9,0
Val0,1 Val1,1 Val2,1 Val3,1 Val4,1 Val5,1 Val6,1 Val7,1 Val8,1 Val9,1
Val0,2 Val1,2 Val2,2 Val3,2 Val4,2 Val5,2 Val6,2 Val7,2 Val8,2 Val9,2
Val0,3 Val1,3 Val2,3 Val3,3 Val4,3 Val5,3 Val6,3 Val7,3 Val8,3 Val9,3
Val0,4 Val1,4 Val2,4 Val3,4 Val4,4 Val5,4 Val6,4 Val7,4 Val8,4 Val9,4
Val0,5 Val1,5 Val2,5 Val3,5 Val4,5 Val5,5 Val6,5 Val7,5 Val8,5 Val9,5
Val0,6 Val1,6 Val2,6 Val3,6 Val4,6 Val5,6 Val6,6 Val7,6 Val8,6 Val9,6
Val0,7 Val1,7 Val2,7 Val3,7 Val4,7 Val5,7 Val6,7 Val7,7 Val8,7 Val9,7

上の図で、個々の升目が一個のメッシュ、升目の中の数字はメッシュの番号(二次元配列の番号）、それぞれの升目の中に値が入ります。また括弧の中のメタデータX0,Y0,intervalが原点の座標値、メッシュ間隔です。（メタデータとしてはさらにデータの単位や座標系・説明などが記述されることがある）

[編集] メッシュデータ形式の種類

データ形式の構造としては、主に以下の二種類が知られています。

[編集] Raster

  • 上図メッシュデータの構造をそのままデータ化したものです。
  • よく使用されるASCII(テキスト)符号化形式: AAIGrid
  • 圧縮が効きやすいデータのため、差分符号化、バイナリ符号化も よく行われます。ビットイメージデータ形式（ただしロスレス形式）をそのまま利用することもあります。

[編集] Gridded XYZ

  • Pointフィーチャの形式を用いてデータを符号化します。ただしPointの座標が必ずグリッド上にしか存在しないように制約をかけます。
  • Rasterとの違いは、各レコードに座標値(X,Y)が入る点です。 
X0,Y0,interval
Value00,Value10,Value20
Value01,Value11,Value21
Value02,Value12,Value22

このようなRasterデータは、 Gridded XYZで記述すると以下のようになります。 

X0,Y0,Value00
X1,Y0,Value10
X2,Y0,Value20
X0,Y1,Value01
....
X2,Y2,Value22
</code>

ここで、Gridded XYZではレコードの並びの順番は問いません。また、格子点にデータが無い場合はそのレコードは省略をできます。データによってはX,Y値が重複するデータ（正規化されていないデータ）が交換されることもあります。このように正規化されていなくても記述できることが特徴的と言えます。


データ形式構造間の変換ツールの例： https://gdal.org/programs/gdal_grid.html

[編集] 本チュートリアルのデータ形式

テキスト符号化したRaster形式を用いることにします。

  • ヘッダ行（最初の1行）
  • カンマ区切り、2次元配列データ（2行目以降）
    • 一個のメッシュに対して一個の値が入る[実数](温度と湿度など複数の値は許容されない)
    • カラム（桁）方向：X方向
      • 桁が増える方向が、Xのグリッド座標も増える方向
    • ロー（行）方向：Y方向
      • 行が増える方向は、Yのグリッド座標が減る方向

[編集] ヘッダ行

  • [属性名]:[属性値]の組をカンマ区切りで並べる。
  • 属性名
    • minX : メッシュ領域のX(経度)の最小値[実数]（上の図の全体を囲む四角形の左端の座標）
    • maxX : メッシュ領域のX(経度)の最大値[実数]（同、右端の座標）
    • minY : メッシュ領域のY(緯度)の最小値[実数]（同、下端の座標）
    • maxY : メッシュ領域のY(緯度)の最大値[実数]（同、上端の座標）
    • partX : メッシュ領域X(経度)方向のメッシュ個数[自然数]
    • partY : メッシュ領域Y(緯度)方向のメッシュ個数[自然数]
    • valName : メッシュの値の単位[文字列]
    • minVal : メッシュの値の最小値[実数]
    • maxVal : メッシュの値の最大値[実数]

[編集] 実際に使うサンプルデータ

使用するサンプルデータはこちら（日本の神社仏閣の密度） 

minX:124.1539312,maxX:145.7870748,minY:24.33444293,maxY:45.51431213,partX:100,partY:98,valName:count/km2,minVal:1.95645299200927E-03,maxVal:2.86870067881484
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.97412404320488E-02,2.4676550540061E-03,2.4676550540061E-03,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,7.37480244978236E-03,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,4.89797155921526E-03,,4.89797155921526E-03,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.43980848573941E-03,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,7.29220251762907E-03,,,1.21536708627151E-02,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,9.68704575374383E-03,9.68704575374383E-03,,,2.17958529459236E-02,4.84352287687192E-03,,,2.17958529459236E-02,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.41288890872148E-03,2.65417779959363E-02,,,1.44773334523289E-02,,7.23866672616444E-03,,,1.68902223610504E-02,9.65155563488592E-03,,,,4.82577781744296E-03,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.40411523496203E-02,4.80823046992406E-03,1.44246914097722E-02,2.40411523496203E-03,9.37604941635191E-02,1.92329218796962E-02,1.20205761748101E-02,,,1.20205761748101E-02,7.21234570488609E-03,3.12534980545064E-02,1.20205761748101E-02,4.80823046992406E-03,1.68288066447342E-02,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.39543909437019E-03,,2.39543909437019E-03,5.74905382648847E-02,0.011977195471851,0.150912662945322,4.79087818874039E-03,2.39543909437019E-03,,,7.18631728311058E-03,7.18631728311058E-03,4.79087818874039E-03,2.39543909437019E-03,,,,4.79087818874039E-03,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.38685918921668E-03,,,,2.38685918921668E-03,,9.54743675686673E-03,7.87663532441505E-02,4.05766062166836E-02,1.67080143245168E-02,,,,,,,,,9.54743675686673E-03,,7.16057756765004E-03,7.16057756765004E-03,2.38685918921668E-03,,2.38685918921668E-03
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.37837424625475E-03,2.37837424625475E-03,4.28107364325854E-02,0.152215951760304,0.019026993970038,3.56756136938212E-02,1.66486197237832E-02,7.84863501264066E-02,3.32972394475665E-02,,1.66486197237832E-02,,,4.75674849250949E-03,2.37837424625475E-03,2.37837424625475E-03,,,,2.37837424625475E-03,2.37837424625475E-03,,,2.37837424625475E-03,,2.61621167088022E-02
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,0.021329847145445,4.7399660323211E-03,4.7399660323211E-03,2.36998301616055E-02,0.350757486391762,8.76893715979404E-02,7.10994904848165E-02,5.68795923878532E-02,,,,1.65898811131239E-02,1.42198980969633E-02,3.79197282585688E-02,2.84397961939266E-02,,,1.18499150808028E-02,8.53193885817798E-02,,0.021329847145445,1.42198980969633E-02,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.59785270028783E-02,9.44673709195576E-03,4.25103169138009E-02,1.88934741839115E-02,,,3.54252640948341E-02,2.36168427298894E-02,2.36168427298894E-03,7.08505281896682E-03,,,,2.83402112758673E-02,4.25103169138009E-02,7.08505281896682E-03,4.72336854597788E-03,2.36168427298894E-03,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.64743376955089E-02,2.35347681364414E-03,2.82417217637296E-02,7.06043044093241E-03,9.41390725457654E-03,7.06043044093241E-03,0.035302152204662,,2.11812913227972E-02,4.70695362728827E-03,,,,4.70695362728827E-03,1.17673840682207E-02,,4.70695362728827E-03,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.40721567441894E-02,4.69071891472979E-03,2.34535945736489E-03,,,9.85050972093256E-02,3.98711107752032E-02,,,,2.34535945736489E-03,9.38143782945958E-03,4.69071891472979E-03,,,,4.69071891472979E-03,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.33733104522365E-03,2.33733104522365E-03,1.40239862713419E-02,1.16866552261183E-02,2.10359794070129E-02,2.57106414974602E-02,4.6746620904473E-03,,,,,,,,,1.16866552261183E-02,2.10359794070129E-02,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.56232948360314E-02,1.16469521981961E-02,,5.12465896720628E-02,1.39763426378353E-02,,,,,,,,,,1.16469521981961E-02,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,4.64307304780522E-03,,6.96460957170783E-03,0.176436775816598,1.62507556673183E-02,1.85722921912209E-02,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.85101456137249E-02,9.25507280686246E-03,4.62753640343123E-03,,2.08239138154405E-02,2.31376820171562E-03,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.30608439674165E-03,,1.15304219837082E-02,3.68973503478663E-02,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.60893883651801E-02,6.89545215650575E-03,1.14924202608429E-02,2.29848405216858E-03,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,3.20735258239644E-02,0.107675408123309,8.70567129507605E-02,1.83277290422654E-02,6.87289839084951E-03,4.58193226056634E-03,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,9.13411844822654E-03,2.28352961205663E-03,6.8505888361699E-03,0.2580388461624,3.19694145687929E-02,,4.11035330170194E-02,4.11035330170194E-02,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.27617349674119E-03,,9.10469398696478E-03,4.55234699348239E-03,,0.011380867483706,6.14566844120122E-02,0.106980154346836,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,6.80669040443137E-02,3.85712456251111E-02,7.94113880516994E-02,6.57980072428366E-02,2.26889680147712E-03,2.26889680147712E-03,5.89913168384052E-02,4.53779360295425E-03,4.08401424265882E-02,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,3.84488755354706E-02,8.36828467536713E-02,4.52339712182007E-03,9.04679424364014E-03,2.26169856091003E-03,,1.35701913654602E-02,2.26169856091003E-03,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.80366226145447E-02,0.24800356094999,1.12728891340905E-02,2.25457782681809E-03,,,0.137529247435904,,,4.50915565363619E-03,2.25457782681809E-03,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,4.04556060194795E-02,5.16932743582237E-02,8.31587457067078E-02,6.74260100324658E-03,,7.64161447034612E-02,6.74260100324658E-03,,2.24753366774886E-03,0.047198207022726,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,8.96226067466189E-03,0.116509388770605,6.72169550599642E-03,0.255424429227864,6.72169550599642E-03,6.72169550599642E-03,0.177004648324572,1.79245213493238E-02,5.37735640479714E-02,3.58490426986476E-02,1.79245213493238E-02,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,3.35050714590285E-02,1.78693714448152E-02,4.46734286120379E-03,0.125085600113706,2.2336714306019E-03,,0.154123328711531,0.022336714306019,0.022336714306019,3.35050714590285E-02,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,0.273902743150215,3.11759219845773E-02,1.33611094219617E-02,,,2.00416641329426E-02,0.104662023805367,4.45370314065391E-02,8.46203596724242E-02,8.90740628130781E-03,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,5.32825132804057E-02,0.419599792083195,3.10814660802366E-02,9.54645029607268E-02,3.55216755202704E-02,1.11005236000845E-02,9.32443982407099E-02,0.104344921840794,5.55026180004226E-02,1.77608377601352E-02,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,4.4268600538726E-03,3.32014504040445E-02,6.64029008080891E-03,4.4268600538726E-03,0.159366961939414,9.96043512121336E-02,1.10671501346815E-02,0.150513241831669,0.11952522145456,0.152726671858605,8.85372010774521E-03,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,4.41365330625383E-03,4.41365330625383E-03,,,,0.139030079146996,0.024275093184396,,5.51706663281728E-02,0.518604263484825,5.51706663281728E-02,7.50321062063151E-02,0.470054077116033,0.024275093184396,4.41365330625383E-03,8.82730661250765E-03,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,0.171622914458144,4.62061692771927E-02,,,2.42032315261486E-02,9.24123385543855E-02,1.32017626506265E-02,1.32017626506265E-02,0.215628789960233,0.132017626506265,6.60088132531325E-03,0.134217920281369,0.101213513654803,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,4.38766116712541E-03,2.19383058356271E-03,,,,,,3.29074587534406E-02,8.77532233425083E-03,1.75506446685017E-02,0.482642728383795,0.361982046287847,0.118466851512386,,2.19383058356271E-03,0.23473987244121,8.77532233425083E-03,0.263259670027525,6.58149175068812E-02,6.36210869233185E-02,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,0.209993883176214,0.441862129183284,0.120308995569706,1.74994902646845E-02,3.06241079631979E-02,0.109371814154278,1.53120539815989E-02,4.37487256617113E-03,0.201244138043872,2.84366716801123E-02,5.46859070771391E-02,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,8.07010733990224E-02,8.07010733990224E-02,0.148315486246852,,,,,,0.185394357808565,0.377332045892726,0.170126587165507,,6.54333027559641E-03,1.52677706430583E-02,0.174488807349238,1.30866605511928E-02,8.72444036746188E-02,0.141772155971256,0.037078871561713,3.92599816535785E-02,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.52239586900056E-02,0.154414438141486,0.121791669520045,,,,8.6994049657175E-03,3.69724711042994E-02,0.45019420697588,8.91689008986043E-02,7.17700909671694E-02,8.26443471743162E-02,,2.17485124142937E-03,1.30491074485762E-02,0.017398809931435,8.6994049657175E-03,0.143540181934339,7.39449422085987E-02,2.17485124142937E-02,8.48191984157456E-02,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,0.279757007951887,0.201685284802523,,0.134456856535016,2.38552487400834E-02,0.117107584724046,2.16865897637122E-02,0.17783003606244,3.68672025983107E-02,3.90358615746819E-02,1.30119538582273E-02,,,2.16865897637122E-03,6.50597692911366E-03,8.24090411021063E-02,2.16865897637122E-02,3.68672025983107E-02,4.77104974801668E-02,0.210359920708008,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.37878580950012E-02,0.363305469087291,0.899613542501863,0.635784570902759,0.183815267097736,,1.08126627704551E-02,0.155702343894553,0.348167741208654,2.16253255409102E-03,,5.62258464063664E-02,1.73002604327281E-02,2.16253255409102E-03,0.116776757920915,5.40633138522754E-02,0.118939290475006,2.81129232031832E-02,1.29751953245461E-02,5.19007812981844E-02,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.37211836899434E-02,1.02216736991211,0.295436560502023,0.204864768231329,0.183300055785926,2.15647124454031E-03,,4.52858961353465E-02,0.338565985392829,0.090571792270693,1.29388274672419E-02,0.028034126179024,0.174674170807765,3.01905974235643E-02,0.034503539912645,5.39117811135078E-02,0.232898894410354,0.116449447205177,4.31294248908062E-02,9.91976772488543E-02,0.034503539912645,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.15047432997382E-03,,,,,,,,,,,,,7.74170758790576E-02,0.217197907327356,2.79561662896597E-02,1.29028459798429E-02,2.15047432997382E-02,6.66647042291885E-02,2.15047432997382E-03,,0.154834151758115,4.08590122695026E-02,0.217197907327356,0.103222767838743,9.03199218589006E-02,0.462351980944372,0.408590122695026,0.550521428473299,0.339774944135864,0.249455022276963,0.165586523407984,0.111824665158639,0.133329408458377,4.30094865994765E-03,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,4.28908220941427E-03,6.4336233141214E-03,4.28908220941427E-03,,,,,,,,,,,,0.032168116570607,0.604760591527412,0.177996911690692,9.00707263976997E-02,,4.28908220941427E-03,0.137250630701257,6.4336233141214E-03,2.14454110470713E-03,9.22152675024068E-02,0.111516137444771,1.07227055235357E-02,3.64571987800213E-02,0.032168116570607,7.07698564553354E-02,0.300235754658999,0.482521748559105,0.529701652862662,0.216598651575421,0.195153240528349,0.167274206167156,8.57816441882854E-02,4.28908220941427E-03,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,3.84960757478439E-02,0.650155945963586,0.10265620199425,0.115488227243532,5.77441136217658E-02,3.84960757478439E-02,2.56640504985626E-02,,2.13867087488022E-02,9.19628476198493E-02,8.55468349952087E-02,8.12694932454482E-02,1.92480378739219E-02,2.13867087488022E-03,3.63574048729637E-02,0.160400315616016,0.530390376970294,0.780614869331279,0.970956577195618,0.303691264232991,0.134736265117454,0.160400315616016,6.62987971212867E-02,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,8.5314518329066E-03,2.13286295822665E-03,,,,2.13286295822665E-03,4.47901221227596E-02,3.83915332480797E-02,7.25173405797061E-02,0.138636092284732,6.18530257885728E-02,,,6.61187517050261E-02,0.191957666240398,1.49300407075865E-02,8.5314518329066E-03,0.042657259164533,7.46502035379327E-02,2.13286295822665E-02,1.49300407075865E-02,2.13286295822665E-02,6.18530257885728E-02,2.13286295822665E-03,1.91957666240398E-02,0.531082876598436,0.279405047527691,9.81116960784258E-02,0.296467951193504,0.897935305413419,2.26296759867847,2.86870067881484,0.499089932225036,0.245279240196065,0.219684884697345,7.03844776214794E-02,4.47901221227596E-02,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,0.189313384862506,0.176550684759416,0.295669219054925,0.176550684759416,4.89236837285128E-02,0.136135467766297,7.65762006185418E-02,0.195694734914051,4.25423336769677E-02,0.082957550670087,0.246745535326413,0.110610067560116,0.229728601855626,0.104228717508571,0.242491301958716,0.163787984656326,0.336084436048045,0.323321735944954,0.431804686821222,0.60622825489679,0.357355602886529,0.102101600824722,0.125499884347055,1.48898167869387E-02,0.112737184243964,2.12711668384838E-03,0.027652516890029,0.14464393450169,0.114864300927813,0.104228717508571,0.193567618230203,0.687058688883028,1.2528717267867,0.146771051185539,0.238237068591019,0.2637624687972,5.10508004123612E-02,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,0.152743060223704,0.120921589343766,0.146378766047716,4.03071964479218E-02,5.51572161918931E-02,1.69714511359671E-02,1.27285883519753E-02,2.33357453119548E-02,3.60643336639301E-02,3.60643336639301E-02,4.24286278399177E-02,0.171835942751667,0.273664649567469,0.163350217183683,9.12215498558231E-02,3.18214708799383E-02,0.112435863775782,0.642793711774754,0.286393237919445,0.352157611071317,1.77139521231657,0.948279832222161,0.116678726559774,5.30357847998972E-02,1.06071569599794E-02,0.019092882527963,,1.48500197439712E-02,0.239721747295535,0.214264570591585,0.1548644916157,0.473079200415083,0.267300355391482,0.56217931887891,0.163350217183683,8.27358242878396E-02,0.201535982239609,0.038185765055926,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,8.46322573541403E-03,0.131179998898918,0.118485160295796,7.40532251848728E-02,1.90422579046816E-02,2.32738707723886E-02,4.65477415447772E-02,0.112137740994236,8.88638702218474E-02,0.184075159745255,6.98216123171658E-02,8.88638702218474E-02,9.09796766557009E-02,0.192538385480669,0.139643224634332,0.190422579046816,0.296212900739491,2.13273288532434,0.768037735488824,0.693984510303951,9.94429023911149E-02,0.389308383829046,0.421045480336848,0.738416445414875,0.44643515754309,6.55899994494588E-02,5.28951608463377E-02,4.02003222432167E-02,1.69264514708281E-02,0.39777160956446,0.32583419081344,0.141759031068185,0.514140963426403,8.04006444864333E-02,,6.34741930156053E-03,0.181959353311402,0.148106450369746,2.53896772062421E-02,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.11024117132996E-03,,,2.95433763986194E-02,0.168819293706397,4.43150645979291E-02,6.75277174825587E-02,4.43150645979291E-02,0.149827123164427,5.90867527972389E-02,8.01891645105385E-02,0.111842782080488,6.11969939685688E-02,6.75277174825587E-02,6.75277174825587E-02,0.253228940559595,0.316536175699494,0.314425934528164,0.179370499563047,0.576095839773079,1.51937364335757,0.835655503846664,8.22994056818684E-02,0.293323522814864,0.208913875961666,0.225795805332306,0.151937364335757,0.51278860463318,0.183590981905706,0.346079552098113,0.215244599475656,0.379843410839393,0.240567493531615,0.346079552098113,,6.33072351398988E-02,7.38584409965486E-02,2.32126528846296E-02,6.33072351398988E-03,,1.89921705419696E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,2.10473497685373E-03,1.26284098611224E-02,,,,,,,,,4.20946995370746E-03,3.36757596296596E-02,0.092608338981564,1.89426147916836E-02,5.47231093981969E-02,7.99799291204417E-02,0.069456254236173,7.99799291204417E-02,0.134703038518639,0.311500776574352,0.23152084745391,0.328338656389182,0.319919716481767,5.05136394444895E-02,4.20946995370746E-03,,8.62941340510028E-02,0.420946995370746,0.092608338981564,2.23943801537237,1.03763434358889,0.250463462245594,0.151540918333468,0.229416112477056,0.383061765787378,3.36757596296596E-02,1.89426147916836E-02,4.41994345139283E-02,1.26284098611224E-02,8.20846640972954E-02,0.113655688750101,0.105236748842686,,,2.10473497685373E-02,4.84089044676357E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,4.19857446634665E-03,6.29786169951998E-03,,,,,,2.09928723317333E-03,5.87800425288531E-02,8.18722020937597E-02,0.151148680788479,3.35885957307732E-02,3.56878829639465E-02,3.98864574302932E-02,0.104964361658666,0.371573840271679,0.140652244622613,0.117560085057706,0.304396648810132,0.172141553120213,2.51914467980799E-02,0.163744404187519,0.327488808375039,0.138552957389439,6.29786169951998E-03,2.30921595649066E-02,0.201531574384639,2.30921595649066E-02,0.354779542406292,0.272907340312532,0.329588095608212,0.188935850985599,3.35885957307732E-02,4.40850318966398E-02,0.224623733949546,0.083971489326933,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,3.14084599974333E-02,,,,,,,,0.123539942656571,6.90986119943532E-02,0.213577527982546,0.096319277325462,8.79436879928131E-02,8.16619959933265E-02,0.140291121321869,0.127727737322895,0.048159638662731,0.13191553198922,0.048159638662731,,9.21314826591376E-02,0.364338135970226,0.161230094653491,0.11307045599076,0.274300550644251,0.22614091198152,1.46572813321355E-02,0.303615113308522,0.280582242643737,0.077474201327002,1.25633839989733E-02,8.37558933264887E-03,3.97840493300821E-02,3.35023573305955E-02,1.25633839989733E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,4.17712935925664E-03,,,,2.71513408351681E-02,0.304930443225735,0.486635570353398,0.142022398214726,4.80369876314513E-02,8.56311518647611E-02,0.139933833535097,0.240184938157257,7.72768931462478E-02,3.13284701944248E-02,0.18588225648692,8.14540225055044E-02,0.162908045011009,0.104428233981416,7.10111991073629E-02,2.29742114759115E-02,0.045948422951823,4.38598582721947E-02,0.100251104622159,0.169173739049894,,0.167085174370266,6.89226344277345E-02,8.35425871851328E-03,6.26569403888496E-03,3.55055995536814E-02,6.89226344277345E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,3.33326189620469E-02,2.08328868512793E-03,,4.37490623876865E-02,0.329159612250213,0.564571233669669,0.324993034879957,,4.16657737025586E-03,5.62487944984541E-02,,2.08328868512793E-02,,2.08328868512793E-03,0.177079538235874,7.29151039794776E-02,,,4.16657737025586E-03,8.33315474051172E-03,,8.33315474051172E-03,2.70827529066631E-02,2.08328868512793E-02,,2.08328868512793E-03,0.127080609792804,4.99989284430703E-02,6.24986605538379E-03,0.108331011626652,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,8.31227508713599E-03,0.004156137543568,0.132996401394176,0.147542882796664,0.583937324871303,0.536141743120271,0.274305077875488,0.039483306663896,0.243134046298728,0.253524390157648,0.16624550174272,0.004156137543568,,6.23420631535199E-03,0.147542882796664,6.44201319253039E-02,0.012468412630704,0.002078068771784,4.36394442074639E-02,0.14546481402488,0.02078068771784,5.19517192945999E-02,0.012468412630704,0.014546481402488,,,,0.002078068771784,0.014546481402488,0.027014894033192,0.01039034385892,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,1.45103305977601E-02,4.14580874221717E-03,0.049749704906606,9.74265054421035E-02,0.122301357895406,0.27776918572855,0.737953956114656,0.493351240323843,0.124374262266515,0.114009740410972,7.66974617310176E-02,0.153394923462035,0.223873672079727,2.69477568244116E-02,2.07290437110858E-03,2.07290437110858E-03,0.140957497235384,4.56038961643889E-02,8.29161748443434E-03,6.21871311332575E-03,1.86561393399773E-02,,,8.29161748443434E-03,3.31664699377374E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,2.27457441621238E-02,4.13558984765887E-03,,0.113728720810619,6.61694375625418E-02,0.248135390859532,0.163355798982525,0.479728422328428,0.128203285277425,2.27457441621238E-02,1.24067695429766E-02,7.44406172578596E-02,7.85762071055184E-02,0.10752533603913,1.03389746191472E-02,,2.48135390859532E-02,4.13558984765887E-03,3.10169238574415E-02,2.06779492382943E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.03389746191472E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,2.06273987972052E-03,2.06273987972052E-03,1.23764392783231E-02,,,1.03136993986026E-02,8.25095951888208E-02,0.109325213625188,6.60076761510567E-02,0.136140832061554,0.360979478951091,3.30038380755283E-02,4.33175374741309E-02,7.83841154293798E-02,2.06273987972052E-02,4.95057571132925E-02,1.03136993986026E-02,,2.06273987972052E-02,4.53802773538515E-02,1.85646589174847E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,6.17321609230951E-03,4.11547739487301E-02,,,,8.23095478974602E-03,0.160503618400047,2.88083417641111E-02,3.90970352512936E-02,4.52702513436031E-02,0.228408995415452,2.67506030666746E-02,2.26351256718015E-02,6.17321609230951E-03,8.84827639897697E-02,8.23095478974602E-03,,,,,2.0577386974365E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,0.100586751373196,2.66862809765621E-02,0.166276058392426,1.64223267548075E-02,,,2.05279084435093E-03,5.74781436418262E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,3.27663327423708E-02,3.07184369459726E-02,2.86705411495744E-02,6.34847696883434E-02,4.30058117243616E-02,,2.04789579639817E-02,3.27663327423708E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,2.45166364550266E-02,2.45166364550266E-02,3.06457955687832E-02,1.63444243033511E-02,2.45166364550266E-02,1.22583182275133E-02,0.116454023161376,2.04305303791888E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,4.07652412301805E-03,2.03826206150903E-03,5.29948135992347E-02,2.03826206150903E-02,2.85356688611264E-02,3.87269791686715E-02,1.83443585535812E-02,3.05739309226354E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,4.06704473574453E-03,,,0.030502835518084,8.33744170827628E-02,1.62681789429781E-02,1.62681789429781E-02,1.83017013108504E-02,4.06704473574453E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,4.05766693135136E-03,0.056807337038919,2.23171681224325E-02,2.63748350537838E-02,8.11533386270271E-03,8.11533386270271E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.61935589712698E-02,1.61935589712698E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,0.014105466976364,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,6.03172864662474E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,3.93652918053998E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,1.95645299200927E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,7.75050212040696E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,1.93398562085494E-02,5.80195686256481E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,4.43988958422274E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,9.54818937423838E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
1.14182140267032E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,

[編集] Container.svg

  • GeoJsonを表示する主題レイヤと、背景地図(OpenStreetMap)をanimation要素で読み込んでいます。
  • チュートリアル6同様にクリッカブルなレイヤーを指定しています。
    • 後述のように、メッシュデータをベクトルデータとして可視化し対話性を実現するため、class属性でclickableを指定しています。 
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="122.9800817, -45.398095, 21.97626, 21.0533039" >
 <globalCoordinateSystem srsName="http://purl.org/crs/84" transform="matrix(1,0,0,-1,0,0)" />

<!-- OpenStretMap背景地図を表示状態として読み込む -->
<animation xlink:href="./dynamicOSM_r11.svg" x="-3000" y="-3000" width="6000" height="6000" title="Japan Coastline" class="basemap" visibility="visible"/>

<!-- CSVのメッシュデータレイヤーを表示状態として読み込む -->
<animation xlink:href="ArrayMesh.svg" x="-3000" y="-3000" width="6000" height="6000" title="ArrayMesh" class="Mesh clickable" visibility="visible" opacity="0.6"/>
</svg>

[編集] ArrayMesh.svg

  • ドキュメントルート要素(svg要素)の、data-controller属性で、このレイヤーを操作するwebAppを指定しています。
    • <code>data-controller="ArrayMesh.html#exec=appearOnLayerLoad
    • exec=appearOnLayerLoadは、レイヤが表示状態になるとwebAppのウィンドが出現する設定です。（詳しくはこちら） 
<?xml version="1.0" encoding="UTF-8"?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="-42.8202042942663, -49.9999999999999, 513.842451531196, 600"
  data-controller="ArrayMesh.html#exec=appearOnLayerLoad"
>

<globalCoordinateSystem srsName="http://purl.org/crs/84" transform="matrix(100,0,0,-100,0,0)" />
</svg>

[編集] ArrayMesh.html, ArrayMesh.js

メッシュデータを読み込み、一個一個のメッシュをsvgのrect要素として可視化します。

  • addEventListener("load",async function(){.. : webAppロード後 fetchAPIでメッシュデータを読み込み
    • メッシュデータは１行ごとに切り分けられた文字列として、csvLines[]に格納
  • getCsvProps(headerLine) : ヘッダ行を読み込み
  • getRange() : （ヒートマップの色分けのための）可視化値の最大最小値を算出
  • drawMesh() : メッシュデータを１行ずつ読み込み、さらにカラムで分割し、メッシュデータを一個づつ可視化している
    • setMesh(...) : 一個一個のメッシュを可視化している関数
      • xd, yd : メッシュの地理座標値(xd:経度, yd:緯度)を算出している
        • Note：y座標に注意：SVGコンテンツの座標と地理的な座標(緯度の座標軸)の向きが逆。そのため北（緯度の値が大きい側）がSVG座標での原点（SVGのY座標の値が小さい側）になる。
      • cl = document.createElement("rect");: rect要素としてメッシュを可視化
        • cl.setAttribute - x,y,width,height: 地理座標値をSVGコンテンツの座標値に変換し、SVGのrect要素に設定
        • ArrayMesh.svgの、　globalCoordinateSystem要素で、指定した変換係数(100,0,0,-100,0,0)を前提に決め打ちしている
      • getColor(val, minVal, maxVal): 可視化する値を色コードに変換
    • svgMap.refreshScreen() 伸縮スクロール以外のタイミングでDOMの再描画が必要な場合、再描画を明示する必要があります。 
<!DOCTYPE html>
<html>
<head>
<title>CSV Mesh Data Visualizer Controller</title>
<meta charset="UTF-8">
</head>
<script src="https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/svgMapLayerLib.js"></script>
<script src="ArrayMesh.js"></script>

<body>
<h3>Mesh Data Controller</h3>

<div id="gui">
  <form>
      <span >min</span>
	  <input id="vminI" type="text" name="min" style="width :80px;font-size:80%">
      <span >max</span>
	  <input id="vmaxI" type="text" name="max" style="width :80px;font-size:80%">
	  <input id="vset" type="button" onclick="setRange( )" value="setRange"/>
  </form>
  <table border="0">
  <tr><td colspan="3">
  <img src="hsvBar.png" width="200" height="10"/>
  </td></tr>
  <tr style="font-size:60%"><td>
  <span id="scalemin">min</span>
  </td><td align="center">
  <span id="scalemid">mid</span>
  </td><td align="right">
  <span id="scalemax">max</span>
  </td><tr>
  </table>
</body>
</html>



var csvPath = "mesh.csv";

var csvLines, csvProps;

addEventListener("load",async function(){
	csvLines = await getText(csvPath);
	csvLines = csvLines.split("\n");
	csvProps=getCsvProps(csvLines[0]);
	vminI.value=csvProps.minVal;
	vmaxI.value=csvProps.maxVal;
	getRange();
	drawMesh(csvLines, csvProps);
});

function drawMesh(csvLines, csvProps, minVal, maxVal){
	if (!minVal){
		minVal = csvProps.minVal;
	}
	if (!maxVal){
		maxVal = csvProps.maxVal;
	}
	for ( var i = 1 ; i < csvProps.partY + 1 ; i++ ){
		var strTxt = csvLines[i].split(",");
		for ( var j = 0 ; j < csvProps.partX ; j++ ){
			if ( strTxt[j].replace(/\s+/g, "") !=""){
				var val = Number(strTxt[j]);
				setMesh( j , i-1 , val, csvProps, minVal, maxVal );
			}
		}
	}
	svgMap.refreshScreen();
}

function setMesh( xp , yp , value, csvProps, minVal, maxVal ){
//		console.log("call getMesh:");
	var color = getColor(value, minVal, maxVal);
	var cl = svgImage.getElementById(xp+":"+yp);
	if ( cl ){
		cl.setAttribute("fill" , color);
	} else {
		var xd = csvProps.minX + xp * csvProps.twd; // rectの西
		var yd = csvProps.maxY - yp * csvProps.thd; // rectの北
		
		cl = document.createElement("rect"); // Should be used NS ( for Firefox!!)
		cl.setAttribute("x" ,  100 * xd );
		cl.setAttribute("y" , -100 * yd );
		cl.setAttribute("width" , 100 * csvProps.twd );
		cl.setAttribute("height" , 100 * csvProps.thd );
		cl.setAttribute("content" , value);
		cl.setAttribute("fill" , color);
		cl.setAttribute("id", xp+":"+yp);
		svgImage.getElementsByTagName("svg")[0].appendChild(cl);
	}
}

function getCsvProps(headerLine){
	var hp = getHeaderParams( headerLine );
	console.log("sc_param:",hp);
	svgImage.documentElement.setAttribute("property", hp.valName);
	
	csvProps={
		minX: Number(hp.minX),
		maxX: Number(hp.maxX),
		minY: Number(hp.minY),
		maxY: Number(hp.maxY),
		minVal: Number(hp.minVal),
		maxVal: Number(hp.maxVal),
		partX: Number(hp.partX),
		partY: Number(hp.partY),
	}
	
	csvProps.twd = ( csvProps.maxX - csvProps.minX ) / csvProps.partX;
	csvProps.thd = ( csvProps.maxY - csvProps.minY ) / csvProps.partY;
	
	return ( csvProps );
	updateTile();
}

function getHeaderParams( hash ){
	hash = hash.split(",");
	for ( var i = 0 ; i < hash.length ; i++ ){
		hash[i] = hash[i].split(":");
		if ( hash[i][1] ){
			hash[hash[i][0]] = hash[i][1];
		} else {
			hash[hash[i][0]] = true;
		}
	}
	return ( hash );
}

async function getText(path){
	var response = await fetch(path);
	var txt = await response.text();
	return ( txt );
}

function getColor( val, minVal, maxVal ){
	
	// value clip
	if ( val > maxVal ){
		val = maxVal;
	}
	if ( val < minVal ){
		val = minVal;
	}
	
	// Hue値の算出(最大値:H=0(赤) , 最小値:H=270(青紫) 逆周り)
	var h = 270 - 270 * (val - minVal) / (maxVal - minVal);
	
	var ans = HSVtoRGB (h, 255, 255);
	
	return ("#"+ pad16(ans.r) + pad16(ans.g) + pad16(ans.b));
}

function pad16( val ){
	var bv =  "00" + val.toString(16);
	bv = bv.substr(bv.length - 2, 2);
	return ( bv );
}

function HSVtoRGB (h, s, v) { // from http://d.hatena.ne.jp/ja9/20100903/1283504341
	var r, g, b; // 0..255
	while (h < 0) {
		h += 360;
	}
	h = h % 360;
	
	// 特別な場合 saturation = 0
	if (s == 0) {
		// → RGB は V に等しい
		v = Math.round(v);
		return {'r': v, 'g': v, 'b': v};
	}
	s = s / 255;
	
	var i = Math.floor(h / 60) % 6,
	f = (h / 60) - i,
	p = v * (1 - s),
	q = v * (1 - f * s),
	t = v * (1 - (1 - f) * s);

	switch (i) {
	case 0 :
		r = v;  g = t;  b = p;  break;
	case 1 :
		r = q;  g = v;  b = p;  break;
	case 2 :
		r = p;  g = v;  b = t;  break;
	case 3 :
		r = p;  g = q;  b = v;  break;
	case 4 :
		r = t;  g = p;  b = v;  break;
	case 5 :
		r = v;  g = p;  b = q;  break;
	}
	return {'r': Math.round(r), 'g': Math.round(g), 'b': Math.round(b)};
}


function getRange(){
	if ( isNaN(vminI.value) || isNaN(vmaxI.value) ){return}
	var minVal = Number(vminI.value);
	var maxVal = Number(vmaxI.value);
	if ( minVal > maxVal){[minVal, maxVal] = [maxVal, minVal]}
	
	document.getElementById("scalemin").innerHTML = minVal.toPrecision(5);
	document.getElementById("scalemax").innerHTML = maxVal.toPrecision(5);
	document.getElementById("scalemid").innerHTML = ((maxVal + minVal)/2.0).toPrecision(5);
	return{minVal,maxVal}
}

function setRange(){
	var range=getRange();
	drawMesh(csvLines, csvProps, range.minVal, range.maxVal);
}
「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%AB8&oldid=2023」から取得
個人用ツール
名前空間

変種
操作
案内
ツール
Translate