OpenLayer3实现分级渲染（初级版本）

ol2支持要素图层加载的时候进行各种渲染，例如唯一值、分级等，但是到OpenLayer3则不能进行这些操作，不知道为何。今天看官方文档的时候发现Feature类一个方法→get()方法可以获取指定属性的值，需要给该方法传进去一个字符串属性，看到这我眼前一亮，这不就是各种渲染主要的方法，废话不多说进入正题：

一、思路

1、首先我们要用到的是样式函数styleFunction，这个函数用处非常大，我们可以通过它进行条件给要素添加样式，再者我们需要用到Feature类的get方法。

2、通过在styleFunction函数中，根据传入的feature，通过get方法获取指定的属性进行判断

二、核心函数

      var vector = new ol.layer.Vector({
          source: new ol.source.Vector({
              format: new ol.format.GeoJSON(),
              url: 'http://localhost:8080/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&typeNames=nyc_roads:nyc_roads&outputFormat=application/json&srsname=EPSG:4326'
          }),
          style: function (feature, resolution) {
              console.log(feature.get("feat_code"));
              var id = feature.get("feat_code");
              var style = null;
              if (id >= 2900) {
                  style = new ol.style.Style({
                      stroke: new ol.style.Stroke({
                          color: "red",
                           3
                      })
                  });
              }
              else {
                  style = new ol.style.Style({
                      stroke: new ol.style.Stroke({
                          color: "blue",
                           3
                      })
                  });
              }
              return [style]
          }
      });

这里get方法获取的是feat_code属性的值，然后进行判断，根据满足不同的条件进行不同样式的渲染，其实我们可以把这个函数再封装下，让用户输入要分级渲染的字段，渲染样式也可以让用户指定，该方式稍微修改就能进行唯一值渲染，简单操作就可以实现想要的效果。

三、全部代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>wfs demo</title>
    <link href="Script/ol.css" rel="stylesheet" />
    <script src="Script/ol.js"></script>
    <script src="../Scripts/jquery-1.7.1.js"></script>
</head>

<body>

  <div id="map" style="100%;height:100%;"></div>

  <script>
      var vector = new ol.layer.Vector({
          source: new ol.source.Vector({
              format: new ol.format.GeoJSON(),
              url: 'http://localhost:8080/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&typeNames=nyc_roads:nyc_roads&outputFormat=application/json&srsname=EPSG:4326'
          }),
          style: function (feature, resolution) {
              console.log(feature.get("feat_code"));
              var id = feature.get("feat_code");
              var style = null;
              if (id >= 2900) {
                  console.log("zhixing");
                  style = new ol.style.Style({
                      stroke: new ol.style.Stroke({
                          color: "red",
                           3
                      })
                  });
              }
              else {
                  style = new ol.style.Style({
                      stroke: new ol.style.Stroke({
                          color: "blue",
                           3
                      })
                  });
              }
              return [style]
          }
      });

      var map = new ol.Map({
          layers: [new ol.layer.Tile({
              source: new ol.source.OSM()
          }), vector],
          target: 'map',
          view: new ol.View({
              center: [-73.99710639567148, 40.742270050255556],
              maxZoom: 19,
              zoom: 14,
              projection: 'EPSG:4326'
          })
      });
  </script>

</body>

</html>

四、放张图

五、总结

最后效果就根据feat_code范围进行渲染，加载的WFS要素服务（geoserver发布的），这种做法虽然比较方便，但是可扩展性比较差，所以需要进一步封装，做到利用更大化。