OpenLayer學習之style樣式的學習筆記

前言：

 

1. 可以配置的選項

/**
 * @typedef {{geometry: (undefined|string|ol.geom.Geometry|ol.style.GeometryFunction),
 *     fill: (ol.style.Fill|undefined),
 *     image: (ol.style.Image|undefined),
 *     stroke: (ol.style.Stroke|undefined),
 *     text: (ol.style.Text|undefined),
 *     zIndex: (number|undefined)}}
 * @api
 */

2.含義

 

 

• geometry，要素的屬性，或者要素，或者一個返回一個地理要素的函數，用來渲染成相應的地理要素；

• fill，填充要素的樣式；

• iamge，圖片樣式，類型為 ol.style.Image；

• stroke，要素邊界樣式，類型為 ol.style.Stroke；

• text，要素文字的樣式，類型為 ol.style.Text；

• zIndex，CSS中的zIndex，即疊置的層次，為數字類型。

一、子類

1. ol.style.Circle，針對矢量要素設置圓形的樣式，繼承 ol.style.Image；
2. ol.style.Icon，針對矢量數據設置圖標樣式，繼承 ol.style.Image；
3. ol.style.Fill，針對矢量要素設置填充樣式；
4. ol.style.RegularShape，對矢量要素設置規則的圖形樣式，如果設置 radius，結果圖形是一個規則的多邊形，如果設置 radius1 和 radius2，結果圖形將是一個星形；
5. ol.style.Stroke，矢量要素的邊界樣式；
6. ol.style.Text，矢量要素的文字樣式。

二、實例化

var style = new ol.style.Style({
  fill: new ol.style.Fill({ //矢量圖層填充顏色，以及透明度
    color: 'rgba(255, 255, 255, 0.6)'
  }),
  stroke: new ol.style.Stroke({ //邊界樣式
    color: '#319FD3',
    width: 1
  }),
  text: new ol.style.Text({ //文本樣式
    font: '12px Calibri,sans-serif',
    fill: new ol.style.Fill({
      color: '#000'
    }),
  stroke: new ol.style.Stroke({
      color: '#fff',
      width: 3
    })
  })
});

三、應用

var vectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            url: '../data/geojson/line-samples.geojson', 
            format: new ol.format.GeoJSON()
        }),
        // 設置樣式，顏色為紅色，線條粗細為1個像素
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'red',
                size: 1
            })
        })
    });

四、geometry - 地理屬性

geometry 可以是要素的地理屬性，或者 geometry，或者一個返回 geometry 類型的函數。一般與 image 樣式配合使用，表示 image 放置的位置，如下面的例子：

new ol.style.Style({
    image: new ol.style.Circle({
      radius: 5,
      fill: new ol.style.Fill({
        color: 'orange'
      })
    }),
    geometry: function(feature) {
      // return the coordinates of the first ring of the polygon
      var coordinates = feature.getGeometry().getCoordinates()[0];
      return new ol.geom.MultiPoint(coordinates);
    }
  })

五、styleFunction應用

<div id="map2" style="width: 100%"></div>
<script type="text/javascript">

  // 創建layer使用的style function，根據feature的自定義type，返回不同的樣式
  var layerStyleFunction = function(feature, resolution) {
    var type = feature.get('type');
    var style = null;
    // 點
    if (type === 'point') {
      style = new ol.style.Style({
        image: new ol.style.Circle({
          radius: 1,
          fill: new ol.style.Fill({
            color: 'red'
          })
        })
      });
    } else if ( type === 'circle') { // 圓形
      style = new ol.style.Style({
        image: new ol.style.Circle({
          radius: 10,
          stroke: new ol.style.Stroke({
            color: 'red',
            size: 1
          })
        })
      });
    } else { // 其他形狀
      style = new ol.style.Style({
        image: new ol.style.RegularShape({
          points: 5,
          radius: 10,
          fill: new ol.style.Fill({
            color: 'blue'
          })
        })
      });
    }

    // 返回 style 數組
    return [style];
  };

  var layer2 = new ol.layer.Vector({
    source: new ol.source.Vector(),
    style: layerStyleFunction // 應用上面創建的 style function
  });

  var map2 = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      }), 
      layer2
    ],
    target: 'map2',
    view: new ol.View({
      projection: 'EPSG:4326',
      center: [104, 30],
      zoom: 10
    })
  });

  // 添加三個feature，並設置自定義屬性 type
  var rect = new ol.Feature({
    geometry: new ol.geom.Point([104, 30])
  });
  layer2.getSource().addFeature(rect);

  var circle = new ol.Feature({
    geometry: new ol.geom.Point([104, 30])
  });
  circle.set('type', 'circle');
  layer2.getSource().addFeature(circle);

  var point = new ol.Feature({
    geometry: new ol.geom.Point([104, 30])
  });
  point.set('type', 'point');
  layer2.getSource().addFeature(point);

</script>

這就是一個典型的根據feature的屬性進行不同渲染的例子，可以在業務上無限擴展，比如feature的屬性可以是速度，可以是大小，可以是時間，可以是權重等等。 由此可見，只要掌握了這個方法，前端按照條件渲染就不再困難。