Web GIS (TNTmips 2019)

1.データのダウンロード

都道府県・市区町村別統計表（国勢調査）をダウンロード

https://www.e-stat.go.jp/stat-search/files?page=1&layout=datalist&toukei=00200521&tstat=000001049104&cycle=0&tclass1=000001049105

国土数値情報　行政区域データをダウンロード

http://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N03-v2_3.html

2.shpのインポート

行政区域の shp ファイルをベクタへインポート

メイン＞入力（インポート）…


入力形式で ARC-SHAPEFILE を選択、
ファイルの選択... をクリックし shp ファイルを選択。


shp ファイルの選択後に開かれる Import from ARC-SHAPEFILE ウィンドウ
オブジェクトタイプ：ベクタ
位相（トポロジ）レベル：ポリゴナル（NIMAレベル3）
最後に 入力（インポート）... をクリック。

3.csvのインポート

国勢調査の xls ファイルをデータベースへインポート

xls を csv で保存します。

メイン＞入力（インポート）…


入力形式で CSV を選択しインポートします。

4.テーブルの追加とリレート

行政区域のベクタへ国勢調査のデータベースを追加

メイン＞編集…


行政区域のベクタを開き＞レイヤマネージャのポリゴンの上で右クリック＞テーブルの追加…


国勢調査テーブルを追加したら、


再びレイヤマネージャのポリゴンの上で右クリック＞リレーションの修正…


関連付け（リレート）ボタンを押し、
Kokusei_2015 の上で左クリックし N03-16_160101 へドラッグして矢印を伸ばす。


Kokusei_2015 のフィールド：都道府県・市区町村コード
N03-16_160101 のフィールド：N03_007
N03-16_160101 の N03_007 で 主（プライマリ）キー にチェックを入れて OK ボタン。


リレーションの修正が完了。


ポリゴンを選択すると、
Kokusei_2015 テーブルの対応するレコードが選択されるようになりました。


オブジェクトを保存、以上でテーブルの追加とリレートが完了。

5.ポリゴンのスタイルの編集

ベクタのアイコンをクリックしてベクタレイヤコントロールを開く。


ポリゴンタブのスタイルを「すべて同じ」から「新規-主題による」へ変更。


テーブル/フィールドの選択
テーブル：Kokusei_2015
フィールド：人口 総数 （人）


テーママッピングコントロールでポリゴンの色を指定。
カウント：すべてのレコード
クラス：（凡例の数）
配布：ユーザ定義
スタイルコントロール
パターン：塗りつぶし
スプレッドクラス：すべて
グラデーションにチェックを入れ、色を指定する
パス：自動


主題（テーマ）＞保存 でテーママッピングを保存。

ポリゴンの塗りつぶし：2Dだけを有効にする


ラインのタブへ移動し、スタイルの編集ボタンをクリック。


スタイルエディタでラインの色を変更。


ベクタレイヤコントロールの適用をクリックし、OK。

6.地域名テーブルの追加

レイヤマネージャのポリゴンの上で右クリック＞新規テーブル…


ユーザ定義


名前：region
説明情報：地域名


任意の要素に対して任意のレコード


フィールドの追加


フィールド：region_no
タイプ：ユニコードテキスト
サイズ：10


同じようにもう1つフィールドを追加
フィールド：region_name
タイプ：ユニコードテキスト
サイズ：20

レイヤマネージャからregionテーブルを開き、レコードを入力する

地域名テーブルにポリゴンをアタッチする

レイヤマネージャからKokusei_2015テーブルを開く。
該当するレコードをチェックして、排他的選択をクリック。


Kokusei_2015テーブルのレコードが選択された状態で、
regionテーブルのレコードにチェックを入れて、
レコード＞マークした要素（複数選択）にアタッチ




regionテーブルの残りのレコードについても同じようにアタッチする。

アタッチを終えたらオブジェクトを保存する。

7.国勢調査テーブルに凡例等のフィールドを追加する

レイヤマネージャでKokusei_2015の右クリックメニューでプロパティを選択。


フィールドの追加


ユニコードテキストを選択

「凡例ラベル」フィールドを追加

タイプ：ユニコードテキスト
フィールド：凡例ラベル
サイズ：500

[計算処理]アイコンをクリックしてクエリのエディタを開く。


「凡例ラベル」クエリ
クエリのエディタに下記テキストを入力する。
Kokusei_2015.`都道府県・市区町村コード`
+" "+Kokusei_2015.`都道府県・市区町村名`
+" "+Kokusei_2015.`人口 総数 （人）`+"（人）"
+" "+Kokusei_2015.`面積 （km2）`+"（km2）"
凡例ラベル_qry_utf8.qry

「DataTip」フィールドを追加

タイプ：ユニコードテキスト
フィールド：DataTip
サイズ：500

「DataTip」クエリ
string tip$=Kokusei_2015.`都道府県・市区町村コード`
+"/"+Kokusei_2015.`都道府県名`
+"/"+Kokusei_2015.`都道府県・市区町村名`
+"/"+Kokusei_2015.`人口 総数 （人）`+"（人）"
return tip$
DataTip_qry_utf8.qry

「balloon」フィールドを追加

タイプ：ユニコードテキスト
フィールド：balloon
サイズ：500

「balloon」クエリ
Kokusei_2015.`都道府県・市区町村コード`
+"¥n"+Kokusei_2015.`都道府県名`
+"¥n"+Kokusei_2015.`都道府県・市区町村名`
+"¥n"+Kokusei_2015.`人口 総数 （人）`+"（人）"
+"¥n"+Kokusei_2015.`面積 （km2）`+"（km2）"
balloon_qry_utf8.qry

「Legend_of_Group」フィールドを追加

タイプ：ユニコードテキスト
フィールド：balloon
サイズ：500

「Legend_of_Group」クエリ
Kokusei_2015.`都道府県コード`+" "+Kokusei_2015.`都道府県名`
Legend_of_Group_qry_utf8.qry

「region_地域名」フィールドを追加

タイプ：ユニコードテキスト
フィールド：region_地域名
サイズ：50

「region_地域名」クエリ
region.region_no+" "+region.region_name
region_地域名_qry_utf8.qry

「Polygon_label」フィールドを追加

タイプ：ユニコードテキスト
フィールド：Polygon_label
サイズ：500

「Polygon_label」クエリ
code$ = Kokusei_2015.`都道府県・市区町村コード`
name$ = "¥n" + Kokusei_2015.`都道府県・市区町村名`;
string tip$ = code$ + name$
return tip$
Polygon_Label_qry_utf8.qry

「ColorFromStyle」フィールドを追加

タイプ：ユニコードテキスト
フィールド：ColorFromStyle
サイズ：500

「ColorFromStyle」クエリ
ColorFromStyle_qry_utf8.qry

「HTML」フィールドを追加

タイプ：ユニコードテキスト
フィールド：HTML
サイズ：20000

「HTML」クエリ
HTML_qry_utf8.qry

8.ラベルの生成

ベクタツールのラベルの自動生成をクリック。


ポリゴンタブのラベルの種類：属性を選択。


テーブル：Kokusei_2015
フィールド：Polygon_label


要素にアタッチのチェックを外し、
位置：内側に入れば表示、入らなければ表示しない


スタイルタブのスタイルの修正をクリック。


フォントを選択、色を選択。
テキストの寄せ：中央
要素（エレメント）の高さを使用のチェックを外す
文字/記号の高さ：
スケール：


ラベルの自動生成の適用操作：すべてをクリック。


約30分で処理が終了。（Core i7-6700 3.40GHz）
オブジェクトを保存し、編集を終了。


メイン＞表示...


ラベルを生成したオブジェクトを開く


ベクタアイコンをクリックして、レイヤコントロールを開く


ラベルタブ
表示：すべて
スタイル：すべて同じ
クリップ要素をラベルの境界へ：off
スタイルの指定...をクリック。


ラベルのスタイル
文字/記号の高さ：
スケール：


レイヤコントロールを適用＞閉じるで終了。


以上でラベルの処理が終了したので、表示を終了します。

タイルセットをWebサーバにアップする

Apache Server Binaries をダウンロード
https://www.apachehaus.com/cgi-bin/download.plx

ダウンロードしたzipファイル（例：httpd-2.4.38-lre-2.8.3-x64-vc14.zip）を展開する。
展開したフォルダ内にあるApache24 フォルダを任意の場所（例：C:\）へコピーする。

Apacheの起動
Windowsシステムツール＞コマンドプロンプトでコマンドプロンプトを起動。
Apacheのフォルダ内にあるbinフォルダへ移動し、httpdを実行。
（例：C:\Apache24\bin>httpd）

ブラウザでhttp://localhost/を開く。
htdocsフォルダにあるindex.htmlが表示されます。


作成したタイルセットのフォルダをhtdocsフォルダへコピーする。
（例：C:\Apache24\htdocs\html\tileset）
htdocs/html/tileset/GoogleMaps/
htdocs/html/tileset/Kokusei_2015_Tiles/
htdocs/html/tileset/OpenLayers/
htdocs/html/tileset/Kokusei_2015.tsd
htdocs/html/tileset/Kokusei_2015_GoogleMaps.html
htdocs/html/tileset/Kokusei_2015_OpenLayers.html

作成したマッシュアップのフォルダをhtdocsフォルダへコピーする。
（例：C:\Apache24\htdocs\html\mashup）
htdocs/html/mashup/GoogleMaps/
htdocs/html/mashup/Kokusei_2015.htm

コピーしたマッシュアップのhtmファイルを編集する。
customlayer[0]のbaseUrlを置換する。
（例：http://localhost/html/tileset/Kokusei_2015_Tiles/）


ブラウザでhttp://localhost/html/mashup/Kokusei_2015.htmを開く。
タイルセットとサイドバーに凡例が表示されます。


ポリゴンをクリックするとInfoWindowが表示されます。


customlayer[0]のnameを置換する。
（例：市区町村別統計表（国勢調査）2015）


InfoWindow用のcssをマッシュアップのフォルダへコピーする。
（例：mashup/GoogleMaps/css/infowin_20190304.css）
infowin_20190304.css

マッシュアップのhtmファイルを編集し、InfoWindow用cssを追加する。
（例：<link href="GoogleMaps/css/infowin_20190304.css" rel="stylesheet" type="text/css"/>）


凡例の画像をマッシュアップのフォルダへコピーする。
（例：mashup/img/Kokusei_legend.png）


ポリゴンをクリックすると、cssが適用されたInfoWindowが表示されます。

タイルセットをインターネットサーバーで公開する