27 - あきる野市の地図にスタイルを設定（WFS） 2 - 公共施設の色分け（Point）

27-2 公共施設の色分け（Point）

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

の「Custom Rules」の項目に、
ある値に対する大小や文字列の照合を基本にした応用スタイルルールを作成できる、とあります。
LESS_THAN、GREATER_THAN、EQUAL_TO を使用したフィルタの例を参考に、「ol006-nippon_bmi_akiruno_pgis.html」のコードを編集します。

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

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

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

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

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







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

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

var style_publicFacilities = new OpenLayers.Style();

var style_lightgreen = new OpenLayers.Rule({
 filter: new OpenLayers.Filter.Comparison({
  type: OpenLayers.Filter.Comparison.EQUAL_TO,
  property: "p02_002",
  value: 3
 }),
 symbolizer: {
  fillColor: "#99ff99",
  fillOpacity: 0.5,
  strokeColor: "#33ff33",
  pointRadius: 6
 }
});

var style_lightblue = new OpenLayers.Rule({
 filter: new OpenLayers.Filter.Comparison({
  type: OpenLayers.Filter.Comparison.EQUAL_TO,
  property: "p02_002",
  value: 11,
 }),
 symbolizer: {
  fillColor: "#9999ff",
  fillOpacity: 0.5,
  strokeColor: "#3333ff",
  pointRadius: 6
 }

var style_lightred = new OpenLayers.Rule({
 filter: new OpenLayers.Filter.Comparison({
  type: OpenLayers.Filter.Comparison.EQUAL_TO,
  property: "p02_002",
  value: 12,
 }),
 symbolizer: {
  fillColor: "#ff9999",
  fillOpacity: 0.5,
  strokeColor: "#ff3333",
  pointRadius: 6
 }
});

var style_lightyellow = new OpenLayers.Rule({
 filter: new OpenLayers.Filter.Comparison({
  type: OpenLayers.Filter.Comparison.EQUAL_TO,
  property: "p02_002",
  value: 13,
 }),
 symbolizer: {
  fillColor: "#ffff99",
  fillOpacity: 0.5,
  strokeColor: "#ffff33",
  pointRadius: 6
 }
});

var style_lightsyan = new OpenLayers.Rule({
 filter: new OpenLayers.Filter.Comparison({
  type: OpenLayers.Filter.Comparison.EQUAL_TO,
  property: "p02_002",
  value: 14,
 }),
 symbolizer: {
  fillColor: "#99ffff",
  fillOpacity: 0.5,
  strokeColor: "#33ffff",
  pointRadius: 6
 }
});

var style_lightmagenta = new OpenLayers.Rule({
 filter: new OpenLayers.Filter.Comparison({
  type: OpenLayers.Filter.Comparison.EQUAL_TO,
  property: "p02_002",
  value: 15,
 }),
 symbolizer: {
  fillColor: "#ff99ff",
  fillOpacity: 0.5,
  strokeColor: "#ff33ff",
  pointRadius: 6
 }
});

var style_green = new OpenLayers.Rule({
 filter: new OpenLayers.Filter.Comparison({
  type: OpenLayers.Filter.Comparison.EQUAL_TO,
  property: "p02_002",
  value: 16,
 }),
 symbolizer: {
  fillColor: "#33ff33",
  fillOpacity: 0.5,
  strokeColor: "#00ff00",
  pointRadius: 6
 }
});

var style_orange = new OpenLayers.Rule({
 filter: new OpenLayers.Filter.Comparison({
  type: OpenLayers.Filter.Comparison.EQUAL_TO,
  property: "p02_002",
  value: 17,
 }),
 symbolizer: {
  fillColor: "#ff9933",
  fillOpacity: 0.5,
  strokeColor: "#ff6600",
  pointRadius: 6
 }
});

var style_red = new OpenLayers.Rule({
 filter: new OpenLayers.Filter.Comparison({
  type: OpenLayers.Filter.Comparison.EQUAL_TO,
  property: "p02_002",
  value: 18,
 }),
 symbolizer: {
  fillColor: "#ff0000",
  fillOpacity: 0.5,
  strokeColor: "#ff0000",
  pointRadius: 6
 }
});

var style_yellow = new OpenLayers.Rule({
 filter: new OpenLayers.Filter.Comparison({
  type: OpenLayers.Filter.Comparison.EQUAL_TO,
  property: "p02_002",
  value: 19,
 }),
 symbolizer: {
  fillColor: "#ffff00",
  fillOpacity: 0.5,
  strokeColor: "#ff9933",
  pointRadius: 6
 }
});

var style_grey = new OpenLayers.Rule({
 filter: new OpenLayers.Filter.Comparison({
  type: OpenLayers.Filter.Comparison.EQUAL_TO,
  property: "p02_002",
  value: 9,
 }),
 symbolizer: {
  fillColor: "#999999",
  fillOpacity: 0.5,
  strokeColor: "#999999",
  pointRadius: 6
 }
});

style_publicFacilities.addRules([style_lightgreen,
 style_lightblue, style_lightred, style_lightyellow,
 style_lightsyan, style_lightmagenta, style_green,
 style_orange, style_red, style_yellow, style_grey]);

layer4 = new OpenLayers.Layer.Vector( "Tokyo Public Facilities Features",{
---

表示しない倍率で表示させてみました。

コードを次のようにもかけます。
Boundless
Introduction to OpenLayers
4.4. Understanding Style
http://workshops.boundlessgeo.com/openlayers-intro/vector/style-intro.html
より

---
var style_publicFacilities = new OpenLayers.Style({
// "rules:" 以下のルールに当てはまらないとき（「その他」のスタイル grey）
 fillColor: '#999999',
 fillOpacity: '0.5',
 strokeColor: '#999999',
 pointRadius: 6
 },{
 rules: [
// var style_lightgreen = new OpenLayers.Rule({
// 各スタイルでここを削除
  new OpenLayers.Rule({
   filter: new OpenLayers.Filter.Comparison({
    type: OpenLayers.Filter.Comparison.EQUAL_TO,
    property: "p02_002",
    value: 3
   }),
   symbolizer: {
    fillColor: "#99ff99",
    fillOpacity: 0.5,
    strokeColor: "#33ff33",
    pointRadius: 6
   }
  }),

// var style_lightblue = new OpenLayers.Rule({
  new OpenLayers.Rule({
   filter: new OpenLayers.Filter.Comparison({
   type: OpenLayers.Filter.Comparison.EQUAL_TO,
   property: "p02_002",
   value: 11,
  }),
---
/* スタイル grey （「その他」）のルールは削除   
  var style_grey = new OpenLayers.Rule({
   filter: new OpenLayers.Filter.Comparison({
   type: OpenLayers.Filter.Comparison.EQUAL_TO,
   property: "p02_002",
   value: 9,
  }),
  symbolizer: {
   fillColor: "#999999",
   fillOpacity: 0.5,
   strokeColor: "#999999",
   pointRadius: 6
  }
 }),

 style_publicFacilities.addRules([style_lightgreen,
  style_lightblue, style_lightred, style_lightyellow,
  style_lightsyan, style_lightmagenta, style_green,
  style_orange, style_red, style_yellow, style_grey]);
*/

  new OpenLayers.Rule({elsefilter: true})
 ]
});
  
layer4 = new OpenLayers.Layer.Vector( "Tokyo Public Facilities Features",{
---