27 - あきる野市の地図にスタイルを設定（WFS） 1 - OpenLayers のスタイル設定

27-1 OpenLayers でスタイルを設定

OpenLayers Styling ページ
http://docs.openlayers.org/library/feature_styling.html

を参考にスタイルを設定します。
「Style Classes」の項目に、スタイル情報が次の３つのうちの１つの資源から設定できるとあります。

●"シンボライザ ハッシュ" をフィーチャに直接設定。一般的ではないが、kml コンテンツのように、フィーチャレベルでスタイル情報を埋め込んだリモートデータをパースするとき作成。
●"シンボライザ ハッシュ" を layer.style としてレイヤに設定。
●Style または StyleMap オブジェクトを layer.styleMap としてレイヤに設定。

「StyleMap」の項目に、StyleMap の構成があります。

new OpenLayers.StyleMap(s);

"s" は、「Attribute Replacement Syntax」項目にある

var s = new OpenLayers.Style({
 'pointRadius': 10,
 'externalGraphic': '${thumbnail}'
});

ですが、'${thumbnail}' はわかりやすく画像のパスでもOKです。
"s" を直接記述する方法が次に示されています。

new OpenLayers.StyleMap({
 'pointRadius': 10,
 'externalGraphic': '${thumbnail}'
});

「Using Style Objects」の項目に、レイヤに設定するときの構成があります。

var styleMap = new OpenLayers.StyleMap({
 pointRadius: 10,
 externalGraphic: '${thumbnail}'
});
var l = new OpenLayers.Layer.Vector("Vector Layer",
 {styleMap: styleMap});

あきる野市の地図に設定してみます。
「Style Properties」の項目に、設定項目があります。

a メニューの「ファイル」->「開く」をクリックします。

b 「ファイルを開く」ウィンドウで、「OpenLayers-2.13.1」->「ol004-nippon_bmi_akiruno_pgis.html」をクリックして選択し、「OK」ボタンをクリックします。

c メニューの「ファイル」->「新規」 -> 「その他」をクリックします。

d 「ウィザードを選択」ウィンドウで、「Web」（複数あるときは展開して探してください。）->「HTMLファイル」をクリックして選択し、「次へ」ボタンをクリックします。

e 「HTML」ウィンドウで「openlayersTokyoproj」をクリックして選択し、「ファイル名」を「ol006-nippon_bmi_akiruno_pgis.html」と入力し、「完了」ボタンをクリックします。







f 「ol004-nippon_bmi_akiruno_pgis.html」の内容をコピーして「ol006-nippon_bmi_akiruno_pgis.html」ファイルに貼り付けます。
g javascript の一部を次のように修正します。

---
 var style_kukaku = new OpenLayers.Style({
  fillColor: '#ffff99', // 塗りつぶし色
  fillOpacity: '0.5', // 透過度
  strokeColor: '#ffff33' // 外周色
 });

 layer1 = new OpenLayers.Layer.Vector("Akiruno Kukaku Features", {
  strategies: [new OpenLayers.Strategy.BBOX()],
  protocol: new OpenLayers.Protocol.WFS({
   url: "http://192.168.1.200/cgi-bin/mapserv?map=/home/user/mapfile/nippon_bmi_akiruno_pgis.map",
//   featureNS : "http://www.myhome.net/",
   featureType: "akiruno_kukaku"
//   geometryName: "the_geom",
//   featurePrefix: "npn",
//   srsName: "EPSG:2451",
//   version: "1.0.0"
  }),
  styleMap: new OpenLayers.StyleMap(style_kukaku)
 });

 var style_kenchiku = new OpenLayers.Style({
  fillColor: '#cccc66',
  fillOpacity: '0.5',
  strokeColor: '#cccc33',
  strokeWidth: '0.5' // 外周太さ
 });

 layer2 = new OpenLayers.Layer.Vector( "Akiruno Kenchiku Features", {
  strategies: [new OpenLayers.Strategy.BBOX()],
  protocol: new OpenLayers.Protocol.WFS({
   url: "http://192.168.1.200/cgi-bin/mapserv?map=/home/user/mapfile/nippon_bmi_akiruno_pgis.map",
   featureType: "akiruno_kenchiku"
  }),
  styleMap: new OpenLayers.StyleMap(style_kukaku)
 });

 var style_kuiki = new OpenLayers.Style({
  fillColor: '#99ff99',
  fillOpacity: '0.5',
  strokeColor: '#33ff33'
 });

 layer3 = new OpenLayers.Layer.Vector("Tokyo Kuiki Features", {
  strategies: [new OpenLayers.Strategy.BBOX()],
  projection: new OpenLayers.Projection("EPSG:4326"),
  protocol: new OpenLayers.Protocol.WFS({
   url: "http://192.168.1.200/cgi-bin/mapserv?map=/home/user/mapfile/nippon_nlni_tokyo_pgis20.map",
   featureType: "tokyo_kuiki"
  }),
  styleMap: new OpenLayers.StyleMap(style_kuiki)
 });

 var style_publicFacilities = new OpenLayers.Style({
  fillColor: '#ff9999',
  fillOpacity: '0.5',
  strokeColor: '#ff3333',
  pointRadius: 6 // 大きさ
 });

 layer4 = new OpenLayers.Layer.Vector( "Tokyo Public Facilities Features",{
  strategies: [new OpenLayers.Strategy.BBOX()],
  projection: new OpenLayers.Projection("EPSG:4326"),
  protocol: new OpenLayers.Protocol.WFS({
   url: "http://192.168.1.200/cgi-bin/mapserv?map=/home/user/mapfile/nippon_nlni_tokyo_pgis20.map",
   featureType: "tokyo_pf"
  }),
  styleMap: new OpenLayers.StyleMap(style_kukaku)
 });

/*
 1 「建物」と「公共施設」は表示に時間がかかるので表示倍率が高いときだけ表示。
 Geographic Information Systems
 Different level of detail(layers) on different zoom level at OpenLayers map
 http://gis.stackexchange.com/questions/24987/different-level-of-detaillayers-on-different-zoom-level-at-openlayers-map
 より
*/
 layer2.setVisibility(false);  layer4.setVisibility(false);

 map.addLayers([layer0, layer3, layer1, layer2, layer4]);

//2 「建物」と「公共施設」は表示に時間がかかるので表示倍率が高いときだけ表示。

 map.events.register('zoomend', this, function (event) {
  var zLevel = map.getZoom();     
  if( zLevel < 4)
  {
   layer2.setVisibility(false);
   layer4.setVisibility(false);
  }
  if( zLevel >= 4)
  {
   layer2.setVisibility(true);
   layer4.setVisibility(true);
  }
 });

 map.addControl(new OpenLayers.Control.LayerSwitcher());
 map.addControl(new OpenLayers.Control.MousePosition());
 map.zoomToMaxExtent();
}
---

ブラウザのアドレスバーに

http://192.168.1.200/mapsite/openlayersTokyoproj/ol006-nippon_bmi_akiruno_pgis.html

と入力して Enter キーを押します。

次のようなメッセージが表示されたら、「処理を続行」ボタンをクリックします。