Debianでka-MapのメモプラスOpenLayers とGeoExt: 基盤地図情報

ラベル 基盤地図情報 の投稿を表示しています。すべての投稿を表示

2015年8月26日水曜日

18 - 重ねた地図をもう少し 5 - PostGIS でレイヤを調べる

18-6 PostGIS でレイヤを調べる
「Introduction to PostGIS (Japanese)（http://workshops.boundlessgeo.com/postgis-intro-jp/index.html）」を参考に PostGIS の関数を使ってレイヤの重なりを調べます。

18-6-1 テーブルに SRID を追加
最初に登録した tokyo_kuiki と akiruno_kukaku に SRID を追加します。

1 アクティビティ -> アプリケーションを表示する（左側の一番下のアイコン） -> pgAdminIII（2面めぐらい）

をクリックして起動します。

2 「オブジェクトブラウザ」欄の「PostGIS」サーバ（11 - PostGIS - 4 pgAdminIII で作成したサーバ）が接続していなければ、ダブルクリックして接続します。

3 「任意の SQL を実行」ボタンをクリックします。

4 「SQL エディタ」に次の SQL クエリを入力して「クエリの実行」ボタンをクリックします。

UPDATE akiruno_kukaku SET geom = ST_SetSRID(geom, 2451);

同じように、次の SQL クエリを実行します。

UPDATE tokyo_kuiki SET geom = ST_SetSRID(geom, 4326);

18-6-2 あきる野市の自然公園の面積
はじめに、「SQL エディタ」に次の SQL クエリを実行して、あきる野市の面積調べます。akiruno_kukaku　レイヤでは、

SELECT ST_Area(geom) FROM akiruno_kukaku where code = '13228';

1 21910112.1119498
2 11974599.9199866
3 3542105.53778772
4 36033559.3587739

akiruno_kukaku　レイヤが、もともと４つに分割されているので、次の SQL で合計します。

SELECT Sum(ST_Area(geom)) FROM akiruno_kukaku where code = '13228';

73460376.9284981
（73.46km2）

tokyos_kuikiレイヤでは、

SELECT ST_Area(ST_Transform(geom, 2451)) FROM tokyo_kuiki where n03_007 = '13228';

73335285.8776135
（73.34km2）

あきる野市のホームページ（http://www.city.akiruno.tokyo.jp/）の「市政情報」>「広報・情報公開」>「統計」ページの「1.土地・面積」のファイルには「73.34km2」とあります。

akiruno_kukaku レイヤであきる野市の自然公園の面積を調べます。「SQL エディタ」に次の SQL クエリを実行して、

SELECT ST_Area(ST_Intersection(a.geom, ST_Transform(b.geom, 2451))) FROM akiruno_kukaku a, shizenkoen b where a.code = '13228';

17 2480377.51765633
19 1072081.85082639
77 4397107.18094086
78 10430356.4828294
80 13686306.9929797

次の SQL で合計します。

SELECT Sum(ST_Area(ST_Intersection(a.geom, ST_Transform(b.geom, 2451)))) FROM akiruno_kukaku a, shizenkoen b where a.code = '13228';

32066230.02523268
（32.07km2）

tokyo_kuiki レイヤでは、

SELECT ST_Area(ST_Intersection(ST_Transform(a.geom, 2451),ST_Transform(b.geom, 2451))) FROM tokyo_kuiki a, shizenkoen b where a.n03_007 = '13228';

5 3551781.3365151
20 28455887.55361

次の SQL で合計します。

SELECT Sum(ST_Area(ST_Intersection(ST_Transform(a.geom, 2451),ST_Transform(b.geom, 2451)))) FROM tokyo_kuiki a, shizenkoen b where a.n03_007 = '13228';

32007668.8901251
（32.01km2）

8-6-2 あきる野市の自然公園内の建築物の数
8-6-2-1 kenchikubutsu レイヤの建築物の数
はじめに、kenchikubutsu レイヤの建築物の数を調べます。「SQL エディタ」に次の SQL クエリを実行します。

SELECT COUNT(gid) FROM kenchikubutsu;

111527

8-6-2-2 あきる野市内の建築物の数
akiruno_kukaku レイヤのあきる野市内の建築物の数を調べます。「SQL エディタ」に次の SQL クエリを実行します。

SELECT COUNT(c.gid) FROM akiruno_kukaku AS a JOIN kenchikubutsu AS c ON ST_Contains(a.geom, c.geom) where a.code = '13228';

43458

tokyo_kuiki レイヤのあきる野市内の建築物の数を調べます。「SQL エディタ」に次の SQL クエリを実行します。

SELECT COUNT(c.gid) FROM tokyo_kuiki AS a JOIN kenchikubutsu AS c ON ST_Contains(a.geom, ST_Transform(c.geom, 4326)) where a.n03_007 = '13228';

43504

あきる野市のホームページ（http://www.city.akiruno.tokyo.jp/）の「市政情報」>「広報・情報公開」>「統計」ページの「8.住宅・道路」のファイルには、「課税家屋の棟数、床面積」の「平成25年度」の「棟数」に「33,865」とあります。

8-6-2-3 あきる野市の自然公園内の建築物の数
akiruno_kukaku レイヤのあきる野市の自然公園内の建築物の数を調べます。「SQL エディタ」に次の SQL クエリを実行します。（１分ぐらいかかりました。）

SELECT COUNT(c.gid) FROM kenchikubutsu AS c JOIN akiruno_kukaku AS a ON ST_Contains(a.geom, c.geom) JOIN shizenkoen AS b ON ST_Contains(ST_Transform(b.geom, 2451), c.geom) where a.code = '13228';

7262

tokyo_kuiki レイヤのあきる野市の自然公園内の建築物の数を調べます。「SQL エディタ」に次の SQL クエリを実行します。（１分ぐらいかかりました。）

SELECT COUNT(c.gid) FROM kenchikubutsu AS c JOIN tokyo_kuiki AS a ON ST_Contains(a.geom, ST_Transform(c.geom, 4326)) JOIN shizenkoen AS b ON ST_Contains(b.geom, ST_Transform(c.geom, 4326)) where a.n03_007 = '13228';

7279

18 - 重ねた地図をもう少し 4 - レイヤをマップに追加

18-5 レイヤをマップに追加
「16-5 レイヤを操作する」で作成したマップ（16-5_ol3-1.html）にレイヤを追加します。

1 NetBeans を起動します。

2 「新規ファイル」ボタンをクリック。

3 「新規ファイル」ダイアログで「カテゴリ」を「HTML5」ファイルタイプ」を「HTMLファイル」を選択して「次>」ボタンをクリック。

4 「new HTML ファイル」ダイアログで「ファイル名」を「18-5_ol3-1」と入力して「終了」ボタンをクリック。

「index.html」

<html>
 <head>
  <title>TODO supply a title</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>

 <body>
  <div>TODO write content</div>
  <div><a href="./13-3_ol3-1.html">13-3_ol3-1.html</a></div>
  <div><a href="./14-7_ol3-1.html">14-7_ol3-1.html</a></div>
  <div><a href="./15-3_ol3-1.html">15-3_ol3-1.html</a></div>
  <div><a href="./16-3_ol3-1.html">16-3_ol3-1.html</a></div>
  <div><a href="./16-4_ol3-1.html">16-4_ol3-1.html</a></div>
  <div><a href="./16-5_ol3-1.html">16-5_ol3-1.html</a></div>
  <div><a href="./18-5_ol3-1.html">18-5_ol3-1.html</a></div>
 </body>
</html>

「18-5_ol3-1.html」

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>あきる野市地図3 Layer group example</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.js"></script>

<style>
#layertree li > span {
  cursor: pointer;
}
</style>
</head>

<body>
<div class="container-fluid">

<div class="row-fluid">
 <div class="span6">
  <div id="map" class="map"></div>
 </div>
 <div id="layertree" class="span6">
  <h5>Click on layer nodes below to change their properties.</h5>

  <ul>
   <li><span>地理院地図 写真 layer</span>
    <fieldset id="layer0">
     <label class="checkbox" for="visible0">
      <input id="visible0" class="visible" type="checkbox"/>visibility
     </label>
     <label>opacity</label>
     <input class="opacity" type="range" min="0" max="1" step="0.01"/>
     <label>hue</label>
     <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
     <label>saturation</label>
     <input class="saturation" type="range" min="0" max="5" step="0.01"/>
     <label>contrast</label>
     <input class="contrast" type="range" min="0" max="2" step="0.01"/>
     <label>brightness</label>
     <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
    </fieldset>
   </li>

   <li>
    <span>Layer group</span>
    <fieldset id="layer1">
     <label class="checkbox" for="visible1">
      <input id="visible1" class="visible" type="checkbox"/>visibility
     </label>
     <label>opacity</label>
     <input class="opacity" type="range" min="0" max="1" step="0.01"/>
     <label>hue</label>
     <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
     <label>saturation</label>
     <input class="saturation" type="range" min="0" max="5" step="0.01"/>
     <label>contrast</label>
     <input class="contrast" type="range" min="0" max="2" step="0.01"/>
     <label>brightness</label>
     <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
    </fieldset>

    <ul>
     <li>
      <span>東京都 国土数値情報 layer</span>
      <fieldset id="layer10">
       <label class="checkbox" for="visible10">
        <input id="visible10" class="visible" type="checkbox"/>visibility
       </label>
       <label>opacity</label>
       <input class="opacity" type="range" min="0" max="1" step="0.01"/>
       <label>hue</label>
       <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
       <label>saturation</label>
       <input class="saturation" type="range" min="0" max="5" step="0.01"/>
       <label>contrast</label>
       <input class="contrast" type="range" min="0" max="2" step="0.01"/>
       <label>brightness</label>
       <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
      </fieldset>
     </li>

     <li>
      <span>あきる野市 基盤地図情報 layer</span>
      <fieldset id="layer11">
       <label class="checkbox" for="visible11">
        <input id="visible11" class="visible" type="checkbox"/>visibility
       </label>
       <label>opacity</label>
       <input class="opacity" type="range" min="0" max="1" step="0.01"/>
       <label>hue</label>
       <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
       <label>saturation</label>
       <input class="saturation" type="range" min="0" max="5" step="0.01"/>
       <label>contrast</label>
       <input class="contrast" type="range" min="0" max="2" step="0.01"/>
       <label>brightness</label>
       <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
      </fieldset>
     </li>
    </ul>
   </li>

     <li>
      <span>町字界線 基盤地図情報 layer</span>
      <fieldset id="layer12">
       <label class="checkbox" for="visible11">
        <input id="visible11" class="visible" type="checkbox"/>visibility
       </label>
       <label>opacity</label>
       <input class="opacity" type="range" min="0" max="1" step="0.01"/>
       <label>hue</label>
       <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
       <label>saturation</label>
       <input class="saturation" type="range" min="0" max="5" step="0.01"/>
       <label>contrast</label>
       <input class="contrast" type="range" min="0" max="2" step="0.01"/>
       <label>brightness</label>
       <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
      </fieldset>
     </li>

     <li>
      <span>町字界点 基盤地図情報 layer</span>
      <fieldset id="layer13">
       <label class="checkbox" for="visible11">
        <input id="visible11" class="visible" type="checkbox"/>visibility
       </label>
       <label>opacity</label>
       <input class="opacity" type="range" min="0" max="1" step="0.01"/>
       <label>hue</label>
       <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
       <label>saturation</label>
       <input class="saturation" type="range" min="0" max="5" step="0.01"/>
       <label>contrast</label>
       <input class="contrast" type="range" min="0" max="2" step="0.01"/>
       <label>brightness</label>
       <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
      </fieldset>
     </li>

     <li>
      <span>建築物 基盤地図情報 layer</span>
      <fieldset id="layer14">
       <label class="checkbox" for="visible11">
        <input id="visible11" class="visible" type="checkbox"/>visibility
       </label>
       <label>opacity</label>
       <input class="opacity" type="range" min="0" max="1" step="0.01"/>
       <label>hue</label>
       <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
       <label>saturation</label>
       <input class="saturation" type="range" min="0" max="5" step="0.01"/>
       <label>contrast</label>
       <input class="contrast" type="range" min="0" max="2" step="0.01"/>
       <label>brightness</label>
       <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
      </fieldset>
     </li>

     <li>
      <span>自然公園 国土数値情報 layer</span>
      <fieldset id="layer15">
       <label class="checkbox" for="visible11">
        <input id="visible11" class="visible" type="checkbox"/>visibility
       </label>
       <label>opacity</label>
       <input class="opacity" type="range" min="0" max="1" step="0.01"/>
       <label>hue</label>
       <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
       <label>saturation</label>
       <input class="saturation" type="range" min="0" max="5" step="0.01"/>
       <label>contrast</label>
       <input class="contrast" type="range" min="0" max="2" step="0.01"/>
       <label>brightness</label>
       <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
      </fieldset>
     </li>

     <li>
      <span>特別地域 国土数値情報 layer</span>
      <fieldset id="layer16">
       <label class="checkbox" for="visible11">
        <input id="visible11" class="visible" type="checkbox"/>visibility
       </label>
       <label>opacity</label>
       <input class="opacity" type="range" min="0" max="1" step="0.01"/>
       <label>hue</label>
       <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
       <label>saturation</label>
       <input class="saturation" type="range" min="0" max="5" step="0.01"/>
       <label>contrast</label>
       <input class="contrast" type="range" min="0" max="2" step="0.01"/>
       <label>brightness</label>
       <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
      </fieldset>
     </li>

     <li>
      <span>特別保護地域 国土数値情報 layer</span>
      <fieldset id="layer17">
       <label class="checkbox" for="visible11">
        <input id="visible11" class="visible" type="checkbox"/>visibility
       </label>
       <label>opacity</label>
       <input class="opacity" type="range" min="0" max="1" step="0.01"/>
       <label>hue</label>
       <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
       <label>saturation</label>
       <input class="saturation" type="range" min="0" max="5" step="0.01"/>
       <label>contrast</label>
       <input class="contrast" type="range" min="0" max="2" step="0.01"/>
       <label>brightness</label>
       <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
      </fieldset>
     </li>
  </ul>
 </div>
</div>

</div>
<script>
var extent = [15488640, 4257688, 15510235, 4270370];

var map = new ol.Map({
 layers: [
  new ol.layer.Tile({
   extent: extent,
   source: new ol.source.XYZ({
    url: 'http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg',
    attributions: [new ol.Attribution({
     html: '<a href="http://www.gsi.go.jp/kikakuchousei/' +
           'kikakuchousei40182.html" target="_blank">' +
             '国土地理院 地理院地図</a>'
    })],
   })
  }),

  new ol.layer.Group({
   layers: [
    new ol.layer.Tile({
     extent: extent,
     source: new ol.source.TileWMS({
      url: 'http://localhost:8080/geoserver/wms',
      attributions: [new ol.Attribution({
       html: '国土数値情報'
      })],
      params: {
       'LAYERS': 'tokyo_kuiki', 
       'SRS': 'EPSG:4326',
       'TILED': true, 
       'VERSION': '1.1.1'
      },
      serverType: 'geoserver',
     })
    }),

    new ol.layer.Tile({
     extent: extent,
     source: new ol.source.TileWMS({
      url: 'http://localhost:8080/geoserver/wms',
      attributions: [new ol.Attribution({
       html: '<a href="http://www.gsi.go.jp/kikakuchousei/' +
             'kikakuchousei40182.html" target="_blank">' +
               '国土地理院 基盤地図情報</a>'
      })],
      params: {
       'LAYERS': 'akiruno_kukaku-2', 
       'SRS': 'EPSG:2451',
       'TILED': true, 
       'VERSION': '1.1.1'
      },
      serverType: 'geoserver',
     })
    }),

    new ol.layer.Tile({
     extent: extent,
     source: new ol.source.TileWMS({
      url: 'http://localhost:8080/geoserver/wms',
      params: {
       'LAYERS': 'choazakaisen', 
       'SRS': 'EPSG:2451',
       'TILED': true, 
       'VERSION': '1.1.1'
      },
      serverType: 'geoserver',
     })
    }),

    new ol.layer.Tile({
     extent: extent,
     source: new ol.source.TileWMS({
      url: 'http://localhost:8080/geoserver/wms',
      params: {
       'LAYERS': 'choazakaiten', 
       'SRS': 'EPSG:2451',
       'TILED': true, 
       'VERSION': '1.1.1'
      },
      serverType: 'geoserver',
     })
    }),

    new ol.layer.Tile({
     extent: extent,
     source: new ol.source.TileWMS({
      url: 'http://localhost:8080/geoserver/wms',
      params: {
       'LAYERS': 'kenchikubutsu', 
       'SRS': 'EPSG:2451',
       'TILED': true, 
       'VERSION': '1.1.1'
      },
      serverType: 'geoserver',
     })
    }),

    new ol.layer.Tile({
     extent: extent,
     source: new ol.source.TileWMS({
      url: 'http://localhost:8080/geoserver/wms',
      params: {
       'LAYERS': 'shizenkoen', 
       'SRS': 'EPSG:4326',
       'TILED': true, 
       'VERSION': '1.1.1'
      },
      serverType: 'geoserver',
     })
    }),

    new ol.layer.Tile({
     extent: extent,
     source: new ol.source.TileWMS({
      url: 'http://localhost:8080/geoserver/wms',
      params: {
       'LAYERS': 'tokubetsu', 
       'SRS': 'EPSG:4326',
       'TILED': true, 
       'VERSION': '1.1.1'
      },
      serverType: 'geoserver',
     })
    }),

    new ol.layer.Tile({
     extent: extent,
     source: new ol.source.TileWMS({
      url: 'http://localhost:8080/geoserver/wms',
      params: {
       'LAYERS': 'tokubetsuhogo', 
       'SRS': 'EPSG:4326',
       'TILED': true, 
       'VERSION': '1.1.1'
      },
      serverType: 'geoserver',
     })
    })
   ]
  })
 ],

 controls: ol.control.defaults({
  attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
   collapsible: false
  })
 }).extend([
  new ol.control.ScaleLine()
 ]),
 target: 'map',
 view: new ol.View({
  center: [15499432, 4264029],
  extent: extent,
  zoom: 12
 })
});

function bindInputs(layerid, layer) {
 var visibilityInput = $(layerid + ' input.visible');
 visibilityInput.on('change', function() {
  layer.setVisible(this.checked);
 });
 visibilityInput.prop('checked', layer.getVisible());

 $.each(['opacity', 'hue', 'saturation', 'contrast', 'brightness'],
  function(i, v) {
   var input = $(layerid + ' input.' + v);
   input.on('input change', function() {
    layer.set(v, parseFloat(this.value));
   });
   input.val(String(layer.get(v)));
  }
 );
}

map.getLayers().forEach(function(layer, i) {
 bindInputs('#layer' + i, layer);
 if (layer instanceof ol.layer.Group) {
  layer.getLayers().forEach(function(sublayer, j) {
   bindInputs('#layer' + i + j, sublayer);
  });
 }
});

$('#layertree li > span').click(function() {
 $(this).siblings('fieldset').toggle();
}).siblings('fieldset').hide();

</script>
</body>
</html>

18 - 重ねた地図をもう少し 2 - GeoServer に追加

18-2 GeoServer に PostGIS Table を追加
データベース（PostGIS）に登録した Table を GeoServer に追加します。
1 Web ブラウザのアドレスバーに「http://localhost:8080/geoserver」と入力して Enter キーを押して GeoServer を起動します。

2 ユーザ名とパスワードを入力して「ログイン」ボタンをクリックします。

1 左側の欄の「データ」の「レイヤ」をクリックします。

2 「リソース新規追加」をクリックします。

3 「新規レイヤ」の「新規レイヤを追加」の「レイヤ追加元」ドロップダウンから「npn:nlni」を選択します。

4 nlni store のリソース（レイヤ）のリストが表示されます。
「shizenkoen」の「公開」をクリックします。

5 選択したレイヤのリソースと編集したい情報の設定をします。

「リソース基本情報」を入力します。
ユーザ名: shizenkoen （変更なし）
有効化: チェック（変更なし）
詳細: チェック（変更なし）
タイトル: Shizen Koen （最初の文字を大文字に変更任意）
抜粋: National Land Numerical Info. Shizen Koen （任意）

「キーワード」を入力します。
（「キーワード」に属性が追加できます。「言語」と「Vocabulary」です。）
現在のキーワード: （追加したキーワードが表示されます）
新しいキーワード: 東京, 自然公園（右欄のリストから「日本語」を選択任意）
語彙集: area（東京）, category（自然公園）（任意）（１つずつ入力して「キーワード追加」ボタンをクリック）

「メタデータ・リンク」と「データ・リンク」は変更しません。

「座標参照系（CRS）」を確認します。
元ファイルSRS: EPSG:4326（変更なし）
指定中のSRS: EPSG:4326 （変更なし）

SRSのハンドリング: 上書き適用（変更しない）

「範囲矩形」を入力します。
ネイティブの範囲矩形: （「データを元に算出」をクリック -以下の値が入力されました）
最小X: 138.942865
最小Y: 25.41075281
最大X: 142.26184596
最大Y: 35.898424
緯度経度範囲矩形: （「ネイティブの範囲を元に算出」をクリック -以下の値が入力されました）
最小X: 138.942865
最小Y: 25.41075281
最大X: 142.26184596
最大Y: 35.898424

「Curved geometries control」は変更しません。

ページ下部の「保存」ボタンをクリックします。

同じように

国土数値情報 3. 地域 <保護保全> 自然公園地域
データ名     ユーザ名       タイトル               キーワード（category）
自然公園(済) shizenkoen,　  Shizen Koen,           自然公園
特別地域     tokubetsu,     Tokubetu Chiiki,       特別地域
特別保護地域 tokubetsuhogo, Tokubetsu Hogo Chiiki, 特別保護地域

共通項目
抜粋: National Land Numerical Info.
キーワード: 東京（area）
座標参照系: EPSG:4326

基盤地図情報 あきる野市
データ名 ユーザ名       タイトル       キーワード（category）
町字界線 choazakaisen,   Choazakai Sen,　町字界線
町字界点 choazakaiten,   Choazakai Ten,　町字界点
建築物   kenchikubutsu, Kenchikubutsu, 建築物

共通項目
抜粋: Base Map Info.
キーワード: あきる野市（area）
座標参照系: EPSG:2451

を追加します。

18 - 重ねた地図をもう少し 1 - データーベースに登録

18-1 シェイプファイルをデータベースに登録
作成した地図に以下のレイヤを追加します。

国土数値情報 3. 地域 <保護保全> 自然公園地域
自然公園 a001130020120311.shp
特別地域 a001130020120312.shp
特別保護地域 a001130020120313.shp

基盤地図情報あきる野市
町字界線 20141001-CommBdry.shp
町字界点 20141001-CommPt.shp
建築物 20141001-BldA.shp

pgAdminIII を使ってシェイプファイルをデータベースに登録します。

1 アクティビティ -> アプリケーションを表示する（左側の一番下のアイコン） -> pgAdminIII（2面めぐらい）

をクリックして起動します。

2 「オブジェクトブラウザ」欄の「PostGIS」サーバ（11 - PostGIS - 4 pgAdminIII で作成したサーバ）が接続していなければ、ダブルクリックして接続します。

3 「プラグイン」メニューをクリックし、「PostGIS Shapefile and DBF loader」をクリックすると「PostGIS Shapefile Import/Export Manager」が起動します。

4 「PostGIS Shapefile Import/Export Manager」の「View connection details...」ボタンをクリックします。

5 「Post connection」に次のように入力し「OK」ボタンをクリックします。

Username: user（PostgresQL の）
Password: password（PostgresQL user の）
Server Host: localhost 5432
Database: nippon

6 「PostGIS Shapefile Import/Export Manager」の「Add Files」ボタンをクリックします。

7 「Select a Shape File」でファイル（a001130020120311.shp）を選択し、「Open」ボタンをクリックします。

8 「PostGIS Shapefile Import/Export Manager」の「ImportList」を次のように変更します。

Table: a001130020120311 -> shizenkoen
SRID: 0 -> 4326

9 「PostGIS Shapefile Import/Export Manager」の「Options...」ボタンをクリックします。

10 「Import Option」の「DBF file character encoding」を「SJIS」に変更して「OK」ボタンをクリックします。

他のシェイプファイルも次のように登録します。

国土数値情報 3. 地域 <保護保全> 自然公園地域
特別地域 Table: a001130020120312 -> tokubetsu
特別保護地域 Table: a001130020120313 -> tokubetsuhogo
SRID: 0 -> 4326

基盤地図情報あきる野市
町字界線 Table: 20141001-CommBdry -> choazakaisen
町字界線 Table: 20141001-CommPt -> choazakaiten
建築物 Table: 20141001-BldA -> kenchikubutsu
SRID: 0 -> 2451

11 「PostGIS Shapefile Import/Export Manager」の「Import」ボタンをクリックします。

12 「PostGIS Shapefile Import/Export Manager」を閉じて、「リフレッシュ」ボタン

をクリックします。

2015年7月29日水曜日

16 - 地図を重ねる 6 - レイヤを操作する

16-5 レイヤを操作する
OpenLayers3 の Examples の Layre Groupe example を参考にして、レイヤのプロパティを操作できるようにします。

1 NetBeans を起動します。

2 「新規ファイル」ボタンをクリック。

3 「新規ファイル」ダイアログで「カテゴリ」を「HTML5」ファイルタイプ」を「HTMLファイル」を選択して「次>」ボタンをクリック。

4 「new HTML ファイル」ダイアログで「ファイル名」を「16-5_ol3-1」と入力して「終了」ボタンをクリック。

「index.html」

<html>
 <head>
  <title>TODO supply a title</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>

 <body>
  <div>TODO write content</div>
  <div><a href="./13-3_ol3-1.html">13-3_ol3-1.html</a></div>
  <div><a href="./14-7_ol3-1.html">14-7_ol3-1.html</a></div>
  <div><a href="./15-3_ol3-1.html">15-3_ol3-1.html</a></div>
  <div><a href="./16-3_ol3-1.html">16-3_ol3-1.html</a></div>
  <div><a href="./16-4_ol3-1.html">16-4_ol3-1.html</a></div>
  <div><a href="./16-5_ol3-1.html">16-5_ol3-1.html</a></div>
 </body>
</html>

「16-5_ol3-1.html」

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>あきる野市地図3 Layer group example</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.js"></script>

<style>
#layertree li > span {
  cursor: pointer;
}
</style>
</head>

<body>
<div class="container-fluid">

<div class="row-fluid">
 <div class="span6">
  <div id="map" class="map"></div>
 </div>
 <div id="layertree" class="span6">
  <h5>Click on layer nodes below to change their properties.</h5>

  <ul>
   <li><span>地理院地図 写真 layer</span>
    <fieldset id="layer0">
     <label class="checkbox" for="visible0">
      <input id="visible0" class="visible" type="checkbox"/>visibility
     </label>
     <label>opacity</label>
     <input class="opacity" type="range" min="0" max="1" step="0.01"/>
     <label>hue</label>
     <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
     <label>saturation</label>
     <input class="saturation" type="range" min="0" max="5" step="0.01"/>
     <label>contrast</label>
     <input class="contrast" type="range" min="0" max="2" step="0.01"/>
     <label>brightness</label>
     <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
    </fieldset>
   </li>

   <li>
    <span>Layer group</span>
    <fieldset id="layer1">
     <label class="checkbox" for="visible1">
      <input id="visible1" class="visible" type="checkbox"/>visibility
     </label>
     <label>opacity</label>
     <input class="opacity" type="range" min="0" max="1" step="0.01"/>
     <label>hue</label>
     <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
     <label>saturation</label>
     <input class="saturation" type="range" min="0" max="5" step="0.01"/>
     <label>contrast</label>
     <input class="contrast" type="range" min="0" max="2" step="0.01"/>
     <label>brightness</label>
     <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
    </fieldset>

    <ul>
     <li>
      <span>東京都 国土数値情報 layer</span>
      <fieldset id="layer10">
       <label class="checkbox" for="visible10">
        <input id="visible10" class="visible" type="checkbox"/>visibility
       </label>
       <label>opacity</label>
       <input class="opacity" type="range" min="0" max="1" step="0.01"/>
       <label>hue</label>
       <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
       <label>saturation</label>
       <input class="saturation" type="range" min="0" max="5" step="0.01"/>
       <label>contrast</label>
       <input class="contrast" type="range" min="0" max="2" step="0.01"/>
       <label>brightness</label>
       <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
      </fieldset>
     </li>

     <li>
      <span>あきる野市 基盤地図情報 layer</span>
      <fieldset id="layer11">
       <label class="checkbox" for="visible11">
        <input id="visible11" class="visible" type="checkbox"/>visibility
       </label>
       <label>opacity</label>
       <input class="opacity" type="range" min="0" max="1" step="0.01"/>
       <label>hue</label>
       <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
       <label>saturation</label>
       <input class="saturation" type="range" min="0" max="5" step="0.01"/>
       <label>contrast</label>
       <input class="contrast" type="range" min="0" max="2" step="0.01"/>
       <label>brightness</label>
       <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
      </fieldset>
     </li>
    </ul>
   </li>
  </ul>
 </div>
</div>

</div>
<script>
var extent = [15488640, 4257688, 15510235, 4270370];

var map = new ol.Map({
 layers: [
  new ol.layer.Tile({
   extent: extent,
   source: new ol.source.XYZ({
    url: 'http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg',
    attributions: [new ol.Attribution({
     html: '<a href="http://www.gsi.go.jp/kikakuchousei/' +
           'kikakuchousei40182.html" target="_blank">' +
             '国土地理院 地理院地図</a>'
    })],
   })
  }),

  new ol.layer.Group({
   layers: [
    new ol.layer.Tile({
     extent: extent,
     source: new ol.source.TileWMS({
      url: 'http://localhost:8080/geoserver/wms',
      attributions: [new ol.Attribution({
       html: '国土数値情報'
      })],
      params: {
       'LAYERS': 'tokyo_kuiki', 
       'SRS': 'EPSG:4326',
       'TILED': true, 
       'VERSION': '1.1.1'
      },
      serverType: 'geoserver',
     })
    }),

    new ol.layer.Tile({
     extent: extent,
     source: new ol.source.TileWMS({
      url: 'http://localhost:8080/geoserver/wms',
      attributions: [new ol.Attribution({
       html: '<a href="http://www.gsi.go.jp/kikakuchousei/' +
             'kikakuchousei40182.html" target="_blank">' +
               '国土地理院 基盤地図情報</a>'
      })],
      params: {
       'LAYERS': 'akiruno_kukaku-2', 
       'SRS': 'EPSG:2451',
       'TILED': true, 
       'VERSION': '1.1.1'
      },
      serverType: 'geoserver',
     })
    })
   ]
  })
 ],

 controls: ol.control.defaults({
  attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
   collapsible: false
  })
 }).extend([
  new ol.control.ScaleLine()
 ]),
 target: 'map',
 view: new ol.View({
  center: [15499432, 4264029],
  extent: extent,
  zoom: 12
 })
});

function bindInputs(layerid, layer) {
 var visibilityInput = $(layerid + ' input.visible');
 visibilityInput.on('change', function() {
  layer.setVisible(this.checked);
 });
 visibilityInput.prop('checked', layer.getVisible());

 $.each(['opacity', 'hue', 'saturation', 'contrast', 'brightness'],
  function(i, v) {
   var input = $(layerid + ' input.' + v);
   input.on('input change', function() {
    layer.set(v, parseFloat(this.value));
   });
   input.val(String(layer.get(v)));
  }
 );
}

map.getLayers().forEach(function(layer, i) {
 bindInputs('#layer' + i, layer);
 if (layer instanceof ol.layer.Group) {
  layer.getLayers().forEach(function(sublayer, j) {
   bindInputs('#layer' + i + j, sublayer);
  });
 }
});

$('#layertree li > span').click(function() {
 $(this).siblings('fieldset').toggle();
}).siblings('fieldset').hide();

</script>
</body>
</html>

登録: 投稿 (Atom)

Debianでka-MapのメモプラスOpenLayers とGeoExt

ブログアーカイブ

自己紹介

2015年8月26日水曜日

18 - 重ねた地図をもう少し 5 - PostGIS でレイヤを調べる

18 - 重ねた地図をもう少し 4 - レイヤをマップに追加

18 - 重ねた地図をもう少し 2 - GeoServer に追加

18 - 重ねた地図をもう少し 1 - データーベースに登録

2015年7月29日水曜日

16 - 地図を重ねる 6 - レイヤを操作する

Debianでka-Mapのメモ プラスOpenLayers とGeoExt

ブログ アーカイブ

自己紹介

2015年8月26日水曜日

18 - 重ねた地図をもう少し 5 - PostGIS でレイヤを調べる

18 - 重ねた地図をもう少し 4 - レイヤをマップに追加

18 - 重ねた地図をもう少し 2 - GeoServer に追加

18 - 重ねた地図をもう少し 1 - データーベースに登録

2015年7月29日水曜日

16 - 地図を重ねる 6 - レイヤを操作する

Debianでka-MapのメモプラスOpenLayers とGeoExt

ブログアーカイブ