WebGIS

Ubuntu + Geoserver + PostGis <=> Ubuntu + GeoWebCache

# GIS基礎
## 地図表現
実世界をデジタル地図で表現する場合、実世界を個別の図形で表現する**「ベクタデータ」**と、セルで表現する**「ラスタデータ」**の2つの表現方法があります。
### 実際の地図
![実世界.jpg](https://qiita-image-store.s3.amazonaws.com/0/26321/8762b656-7c57-525a-7071-fff77dd1cecd.jpeg)

### [ベクタデータ](http://www.pasco.co.jp/recommend/word/word022/)
![ベクトルで表現（ベクタデータ）.gif](https://qiita-image-store.s3.amazonaws.com/0/26321/afb6b323-e6ce-458a-9a5e-323eeb7d8e30.gif)
ベクタデータは長さと方向を持ち、それぞれ「点」（ポイント）、「線」（ライン）、「面」（ポリゴン）で、基準点（X0、Y0）からの「X方向にいくつ、Y方向にいくつの位置である」という情報をもっています。

### [ラスタデータ](http://www.pasco.co.jp/recommend/word/word023/)
![ラスタで表現（ラスタデータ）.gif](https://qiita-image-store.s3.amazonaws.com/0/26321/f3ffa48b-7c11-9d80-b869-aa6a566c5082.gif)
ラスタデータは座標で表現されるデータです。一般的なフォーマットとしては、BMP、JPEG、TIFF等が挙げられます。 
## Shapefileとは
ベクタデータの一種であり、
下記の三種類ファイルに構成され、各ファイルの名前は同じでなければならない。

* メイン　ファイル：counties.shp
* インデックス　ファイル：counties.shx
* 属性ファイル：counties.dbf

# 環境作成
```console
# Geoserverに必要なライブラリを入れておく
$ sudo apt-get install gdal-bin openjdk-7-jdk openjdk-7-jre python-gdal unzip
# Tomcatインストール
$ apt-get install tomcat7
# ブラウザで　localhost:8080　確認 or
$ wget -pO- 127.0.0.1:8080
# GeoServer安定版ダウンロード(WAR式) http://geoserver.org/ にて最新版確認
$ cd ~/Downloads
$ wget http://sourceforge.net/projects/geoserver/files/GeoServer/2.7.2/geoserver-2.7.2-war.zip
$ sudo unzip geoserver-2.7.2-war.zip
$ sudo mv geoserver.war /var/lib/tomcat7/webapps/
$ sudo service tomcat7 restart
# ブラウザで　localhost:8080/geoserver 確認
```

# GeoWebCacheについて
## user情報
`/var/lib/tomcat7/webapps/geowebcache/WEB-INF/users.properties`に記述されている
## cache folder設定
1. `/var/lib/tomcat7/webapps/geowebcache/WEB-INF/web.xml`にて、`<web-app>`ノードの直下に下記の要素を追加
```xml
<context-param>
   <param-name>GEOWEBCACHE_CACHE_DIR</param-name>
   <param-value>/var/lib/tomcat7/webapps/geowebcache/cacheDir</param-value>
</context-param>
```
2. cacheDir 作成
```bash
$ cd /var/lib/tomcat7/webapps/geowebcache
$ sudo mkdir cacheDir
$ sudo chmod 777 cacheDir
```
3. 設定ファイルのロード
`localhost:8080/geowebcache/demo`にアクセスして、`Reload Configuration`ボタンを押す
4. 設定結果の確認
```bash
$ cd cacheDir
$ ls -al
#diskquota_page_store tmp geowebcache.xml　三つ生成されたことを確認できればOK
```
**★　geowebcache.xml はキャッシュするLayerの配置ファイルである。**
念のため、`localhost:8080/geowebcache/home`にて、ページの一番下に
```text
Storage Locations
  Config file:/var/lib/tomcat7/webapps/geowebcache/geowebcache.xml
  Local Storage:/var/lib/tomcat7/webapps/geowebcache
```
となっていれば、設定が正しく反映されている。

## Layers配置ファイル編集
```xml
<wmsLayer>
    <name> layer_name </name>
    <wmsUrl>
        <string>wms_url</string>
    </wmsUrl>
    <wmsLayers>layer1,layer2,layer3</wmsLayers>
</wmsLayer>
```
* Layers配置ファイル:geowebcache.xml
/tmp/tomcat7-tomcat7-tmp/geowebcache

# geoserverについて
## GeoServer設定
* Server Status
    * Native JAI: false -> true
    * http://docs.geoserver.org/latest/en/user/production/java.html
jaiは各種MAPデータを画像に変換するライブラリである。

## レイヤ作成
* dataフォルダ作成
   下記のフォルダにフォルダを作って、登録したいmapデータを保存
   `/var/lib/tomcat7/webapps/geoserver/data`
* Workspaceの作成
提供したいサービスをチェック
   * WCS
   * WFS
   * ☑　WMS
* Data Storeの作成
mapデータファイルをgeoserverに登録する
* Layerの作成
登録したmapデータをレイヤに変換
* LayerPreviewにて確認
openlayersにてレイヤが正しく表示されるか確認
 * スタイルの作成

## OpenLayersを使って、レイヤ表示

```html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>GIS Chou</title>
    // Import OpenLayers Script
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
    // create block element(div) to contain map, id is used to add map
    <div style="width: 100%; height: 500px; background-color: pink" id="map"></div>
    <script defer="defer" type="text/javascript">
        // 初期化
        var options = {
            controls: [
                new OpenLayers.Control.MousePosition(),
                new OpenLayers.Control.Navigation({
                    dragPanOptions: {
                        enableKinetic: true
                    }
                }),
                new OpenLayers.Control.Attribution(),
                new OpenLayers.Control.Zoom(),
                new OpenLayers.Control.ScaleLine({
                    maxWidth: 150,
                    bottomOutUnits: "",
                    bottomInUnits: ""
                })
            ],
            maxExtent: new OpenLayers.Bounds(-10, -50, 1000000, 50),
            minResolution: 0.001,
            maxResolution: 0.1,
            projection: "EPSG:404000",
            units: "m"
        };
        // create map 'map' is the id of div
        var map = new OpenLayers.Map('map',options);
        // create wmsLayer to be added
        var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                "http://192.168.111.148:8080/geoserver/sakai/wms",
                {
                    // ,でレイヤを分割する、スペースが入るとおかしくなる
                    layers: 'sakai_1,sakai_2,sakai_3',
                    format: 'image/png',
                    tiled: true,
                    transparent: false,
                    isBaseLayer: true
                } );
        // add Layer
        map.addLayer(wmsLayer);
        // 見えるようにmapの中心値をセットする、geoserverにてlayer previewを使って座標を確認しておく
        map.setCenter(new OpenLayers.LonLat(47.62695, 1.60855));
    </script>
</body>
</html>
```

# GeoWebCache設定

# todo
> How to integrate Standalone GeowebCache with Geoserver on different machine
http://gis.stackexchange.com/questions/143220/how-to-integrate-standalone-geowebcache-with-geoserver-on-different-machine