|
ファイルメーカでSVGに書き出して分布図を作成した例
SVG（Scalable Vector Graphics）形式というのは、ドロー系の画像フォーマットのことである。Adobe社のイラストレータで編集したり、インターネットエクスプローラなどのブラウザで見ることができる（ここをクリックしてSVG画像を表示しよう）。
これはXML形式というテキストファイルなので、データベースソフトや表計算ソフトから加工・書き出しが可能である。それを利用して分布図を書き出す方法を紹介する。使用したデータはタンポポ調査2010で徳島県実行委員会が集めたカンサイタンポポのデータである。
- １．下絵（背景）地図の用意
- 地図の位置関係が正確に分かっていれば自分で作成したいろいろな地図でも使用できるが、ここでは国土数値情報の道路密度・道路延長メッシュデータ、行政区域データ、海岸線データを使用した。行政区域データ、海岸線データはSVGと同じように「JPGISに準拠した符号化（XML形式）」となっている。経緯度の測地系（世界測地系・日本測地系）をあったものを使うか、変換する必要がある。
-
- ２．分布図データの用意
- 今回分布図を作成するのはタンポポ調査2010で徳島県実行委員会が2009年の予備調査で集めたカンサイタンポポのデータである。
- データは日本測地系の3次メッシュのメッシュコードで入力してある。
- 今回は日本測地系の3次メッシュを使った調査であるが、あらかじめ日本測地系の3次メッシュの４隅の点の経緯度を世界測地系の経緯度に変換したファイルを用意しておき、経緯度の処理は世界測地系で統一している。
-
- ３．SVGへ加工・書き出し
- データの処理はファイルメーカpro8で行った。下絵の地図も、出力する画像もxml形式なのでxsltが使えるソフト（例えばエクセル、ファイルメーカ）などのxslt機能で簡単に処理できると思う。しかし、その方面の知識がなかったので、すべてただのテキストファイルとしてファイルメーカで処理した。この方法であれば、マクロ機能の使えるテキストエディタ（例えば秀丸エディタ）やPerlなどでも同様のことが可能である。
-
- ３−１．下絵の加工・書き出し
- 国土数値情報の徳島県の海岸線データC23-06_36.xmlを例にとって説明する。
- データは下記のようなテキストファイルになっている。
|
<?xml version="1.0" encoding="utf-8"?>
<ksj:GI xmlns:ksj="http://nlftp.mlit.go.jp/ksj/schemas/ksj-app" xmlns:jps="http://www.gsi.go.jp/GIS/jpgis/standardSchemas" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://nlftp.mlit.go.jp/ksj/schemas/ksj-app KsjAppSchema.xsd" version="1.0" timeStamp="2007-02-20T00:00:00-05:00">
<exchangeMetadata>
<datasetCitation>
<jps:CI_Citation.title>国土数値情報（海岸線）データ集合</jps:CI_Citation.title>
<jps:CI_Citation.date>
・・・・・・・・・・・・・・・・・・・
<!--============LINE============-->
<!--GM_Curve c_00001-->
<jps:GM_Curve id="c_00001">
<jps:GM_OrientablePrimitive.orientation>+</jps:GM_OrientablePrimitive.orientation>
<jps:GM_OrientablePrimitive.primitive idref="c_00001" />
<jps:GM_Curve.segment>
<jps:GM_LineString id="ls_15647">
<jps:GM_LineString.interpolation>linear</jps:GM_LineString.interpolation>
<jps:GM_LineString.controlPoint>
<jps:GM_PointArray>
<GM_PointArray.column>
<jps:GM_Position.indirect>
<GM_PointRef.point idref="p_00001" />
</jps:GM_Position.indirect>
</GM_PointArray.column>
<GM_PointArray.column>
<jps:GM_Position.direct>
<DirectPosition.coordinate>34.114460275 134.5947813875</DirectPosition.coordinate>
<DirectPosition.dimension>2</DirectPosition.dimension>
</jps:GM_Position.direct>
</GM_PointArray.column>
<GM_PointArray.column>
<jps:GM_Position.direct>
<DirectPosition.coordinate>34.1140108333333 134.5949336125</DirectPosition.coordinate>
<DirectPosition.dimension>2</DirectPosition.dimension>
</jps:GM_Position.direct>
</GM_PointArray.column>
・・・・・・・・・・・・・・・・・・・
</jps:GM_Curve.segment>
</jps:GM_Curve>
|
- 「<jps:GM_Curve id=」と「</jps:GM_Curve>」に囲まれた間のデータが各海岸線のデータである。
- 「<DirectPosition.coordinate>34.114460275 134.5947813875</DirectPosition.coordinate>」といった具合にDirectPosition.coordinateでデータがはさまれているのがわかる。このデータを取り出してSVGにすればよい。
- すると下記のようなSVGファイルになる。「<polyline fill="#FFFFFF" stroke="#000000" points="」と「"/>」に経緯度のデータをカンマで区切りながらはさんでいく。
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY ns_svg "http://www.w3.org/2000/svg">
<!ENTITY ns_xlink "http://www.w3.org/1999/xlink">
]>
<svg version="1.1" id="レイヤー_1" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" width="500" height="500" xml:space="preserve">
<polyline fill="#FFFFFF" stroke="#000000" points="
459.47813875,588.5539725
459.49336125,588.59891666667
459.52308375,588.6814725
459.52138875,588.6849725
459.50291625,588.69541666667
459.529805,588.71383333333
459.53288875,588.71883333333
459.54408375,588.76388916667
459.57238875,588.8640275
・・・・・・・・・・・・・・
459.836305,589.67558333333
"/>
<polyline fill="#FFFFFF" stroke="#000000" points="
463.192195,596.20536083333
・・・・・・・・・・・・・・
463.1252775,596.14983333333
"/>
</svg>
|
- 今回の分布図のデータはメッシュデータである。そこで、■のマークを書いてやれば良い。svgで四角は下記のようになるのでメッシュにあったデータを作成すれば良い。左上座標（x,y）と幅(width)、高さ(height)、色(fill)を指定する。
-
-
<rect x="375.987032" y="613.833676" fill="#FF0000" width="01.2" height="0.8"/>
<rect x="370.987594" y="606.334762" fill="#FF0000" width="01.2" height="0.8"/>
<rect x="372.237394" y="606.334766" fill="#FF0000" width="01.2" height="0.8"/>
<rect x="372.237415" y="603.835154" fill="#FF0000" width="01.2" height="0.8"/>
<rect x="373.487253" y="603.835137" fill="#FF0000" width="01.2" height="0.8"/>
|
- <div id="map" style="width:900px; height:700px"></div>
<script type="text/javascript">
//<![CDATA[
- if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(33.927285,134.236222), 10);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
- var points = [];
points[0] = new GLatLng(33.81167005, 133.87235845);
points[1] = new GLatLng(33.81167005, 133.8848568);
points[2] = new GLatLng(33.82000266, 133.8848568);
points[3] = new GLatLng(33.82000266, 133.87235845);
points[4] = new GLatLng(33.81167005, 133.87235845);
var polygon = new GPolygon(points, '#000000', 2, 0.5, '#FF0000', 0.5);
map.addOverlay(polygon);
var points = [];
points[0] = new GLatLng(33.82833498, 133.87235771);
points[1] = new GLatLng(33.82833498, 133.88485615);
points[2] = new GLatLng(33.83666721, 133.88485615);
points[3] = new GLatLng(33.83666721, 133.87235771);
points[4] = new GLatLng(33.82833498, 133.87235771);
var polygon = new GPolygon(points, '#000000', 2, 0.5, '#FF0000', 0.5);
map.addOverlay(polygon);
- ・・・・・・・・・・・・・・・
- }
//]]>
</script>
-
- ３−３．統合
- ３−１と３−２で作成したデータをくっつけてやる。具体的にはSVGのヘッダ部分以外をエディタでコピー・ペーストしてやれば良い。出来た画像が下記のものである。
-
|
|
