Debianでka-MapのメモプラスOpenLayers とGeoExt: 8月 2015

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 - 重ねた地図をもう少し 3 - 各レイヤのスタイル

18-3 自然公園地域のスタイルを設定
18-3-1 自然公園 shizenkoen
国土数値情報 3. 地域 <保護保全> 自然公園地域

18-3-1-1 自然公園のスタイルの設定
行政区画用のスタイル kukaku をコピーして、自然公園（東京）用のスタイル　shizenkoen を設定しました。

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

2 「スタイル」の「新規スタイル追加」をクリックします。

3 「新規スタイル」で次のように入力します。

ユーザ名: shizenkoen
ワークスペース: npn
Format: SLD（変更なし）

4 「既存のスタイルをコピーしています」で「npn:kukaku」を選択し「コピーしています」をクリックます。
SLD を入力する欄に「kukaku」の内容が表示されます。

5 内容を次のように変更します。

---
<Title>Shizen Koen: Simple polygon with stroke</Title>
---
<Fill>
<CssParameter name="fill">#FFCCCC</CssParameter>
</Fill>
<Stroke>
<CssParameter name="stroke">#FF0000</CssParameter>
<CssParameter name="stroke-width">1</CssParameter>
</Stroke>
---

6 ページ下の「検証」ボタンをクリックします。

問題なければページ上部に次のように表示されます。

7 ページ下の「送信」ボタンをクリックします。
shizenkoen が追加されました。

18-3-1-2 自然公園のスタイルの適用

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

2 「shizenkoen」をクリックします。

3 ページ上部の「公開」タブをクリックします。

4 「WMS設定」の「デフォルトスタイル」で「npn:shizenkoen」を選択し、「保存」ボタンをクリックします。

18-3-1-3 自然公園のスタイルの確認

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

2 「shizenkoen」を検索し、「共通フォーマット」列の「OpenLayers」をクリックします。

3 成功すれば、OpenLayers Map がポリゴンで表示されます。

同じように他のレイヤのスタイルも設定します。

18-3-2 特別地域 tokubetsu
国土数値情報 3. 地域 <保護保全> 自然公園地域
内容を次のように変更します。

---
<Title>Tokubetsu Chiiki: Simple polygon with stroke</Title>
---
<Fill>
<CssParameter name="fill">#CCFF99</CssParameter>
</Fill>
<Stroke>
<CssParameter name="stroke">#00FF00</CssParameter>
<CssParameter name="stroke-width">1</CssParameter>
</Stroke>
---

18-3-3 特別保護地域 tokubetsuhogo
国土数値情報 3. 地域 <保護保全> 自然公園地域
内容を次のように変更します。

---
<Title>Tokubetsu Hogo Chiiki: Simple polygon with stroke</Title>
---
<Fill>
<CssParameter name="fill">#CCCCFF</CssParameter>
</Fill>
<Stroke>
<CssParameter name="stroke">#0000FF</CssParameter>
<CssParameter name="stroke-width">1</CssParameter>
</Stroke>
---

18-4 あきる野市のスタイルを設定
18-4-1 町字界線 choazakaisen
GeoServer 2.7.x User Manual »
Styling »
SLD Cookbook »
Lines
http://docs.geoserver.org/stable/en/user/styling/sld-cookbook/lines.html

の「Dashed line」を参考にします。

<?xml version="1.0" encoding="UTF-8"?>
<StyledLayerDescriptor 
---
<!-- ヘッダーの内容は同じです -->
 <NamedLayer>
  <Name>Dashed line</Name>
  <UserStyle>
   <Title>Choazakai Sen: Dashed line</Title>
   <FeatureTypeStyle>
    <Rule>
     <LineSymbolizer>
      <Stroke>
       <CssParameter name="stroke">#999900</CssParameter>
       <CssParameter name="stroke-width">1</CssParameter>
       <CssParameter name="stroke-dasharray">5 2</CssParameter>
      </Stroke>
     </LineSymbolizer>
    </Rule>
   </FeatureTypeStyle>
  </UserStyle>
 </NamedLayer>
</StyledLayerDescriptor>

18-4-2 町字界点 choazakaiten

GeoServer 2.7.x User Manual »
Styling »
SLD Cookbook »
Points
http://docs.geoserver.org/stable/en/user/styling/sld-cookbook/points.html#simple-point

の「Point with default label」を参考にします。

<?xml version="1.0" encoding="UTF-8"?>
<StyledLayerDescriptor 
---
<!-- ヘッダーの内容は同じです -->
 <NamedLayer>
  <Name>Point with styled label</Name>
  <UserStyle>
   <Title>Choazakai Ten: Point with styled label</Title>
   <FeatureTypeStyle>
    <Rule>
     <MaxScaleDenominator>10000</MaxScaleDenominator>
     <PointSymbolizer>
      <Graphic>
       <Mark>
        <WellKnownName>circle</WellKnownName>
        <Fill>
         <CssParameter name="fill">#FF0000</CssParameter>
        </Fill>
       </Mark>
       <Size>6</Size>
      </Graphic>
     </PointSymbolizer>
     <TextSymbolizer>
      <Label>
       <ogc:PropertyName>name</ogc:PropertyName>
      </Label>
      <Font>
       <CssParameter name="font-family">kochi-gothic</CssParameter>
       <CssParameter name="font-size">12</CssParameter>
      </Font>
      <LabelPlacement>
       <PointPlacement>
        <AnchorPoint>
         <AnchorPointX>0.5</AnchorPointX>
         <AnchorPointY>0.0</AnchorPointY>
        </AnchorPoint>
        <Displacement>
         <DisplacementX>0</DisplacementX>
         <DisplacementY>5</DisplacementY>
        </Displacement>
       </PointPlacement>
      </LabelPlacement>
     　<Fill>
     　　<CssParameter name="fill">#000000</CssParameter>
     　</Fill>
    　</TextSymbolizer>
    </Rule>
   </FeatureTypeStyle>
  </UserStyle>
 </NamedLayer>
</StyledLayerDescriptor>

18-4-2 建築物 kenchikubutsu 行政区画用のスタイル kukaku をコピーして、建築物（あきる野市）用のスタイル　kenchikubutsu を設定しました。

---
<Title>Kenchikubutsu: Simple polygon with stroke</Title>
<FeatureTypeStyle>
 <Rule>
  <MaxScaleDenominator>5000</MaxScaleDenominator>
   <PolygonSymbolizer>
---
<Fill>
 <CssParameter name="fill">#CCCCCC</CssParameter>
</Fill>
<Stroke>
 <CssParameter name="stroke">#666666</CssParameter>
 <CssParameter name="stroke-width">1</CssParameter>
</Stroke>
---

それぞれのレイヤに設定します。

自然公園

特別地域

町字界線

町字界点

建築物

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

を追加します。

登録: 投稿 (Atom)

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

ブログアーカイブ

自己紹介

2015年8月26日水曜日

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

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

18 - 重ねた地図をもう少し 3 - 各レイヤのスタイル

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

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

ブログ アーカイブ

自己紹介

2015年8月26日水曜日

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

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

18 - 重ねた地図をもう少し 3 - 各レイヤのスタイル

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

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

ブログアーカイブ