python实现矢量分级渲染_OpenLayer3实现分级渲染（初级版本）-CSDN博客

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",

width: 3

})

});

}

else {

style = new ol.style.Style({

stroke: new ol.style.Stroke({

color: "blue",

width: 3

})

});

}

return [style]

}

});

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

三、全部代码

wfs demo

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",

width: 3

})