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发布的），这种做法虽然比较方便，但是可扩展性比较差，所以需要进一步封装，做到利用更大化。