ol2支持要素圖層加載的時候進行各種渲染，例如唯一值、分級等，但是到OpenLayer3則不能進行這些操作，不知道為何。今天看官方文檔的時候發(fā)現(xiàn)Feature類一個方法→get()方法可以獲取指定屬性的值，需要給該方法傳進去一個字符串屬性，看到這我眼前一亮，這不就是各種渲染主要的方法，廢話不多說進入正題：

一、思路

1、首先我們要用到的是樣式函數(shù)styleFunction，這個函數(shù)用處非常大，我們可以通過它進行條件給要素添加樣式，再者我們需要用到Feature類的get方法。

2、通過在styleFunction函數(shù)中，根據(jù)傳入的feature，通過get方法獲取指定的屬性進行判斷

二、核心 函數(shù)

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屬性的值，然后進行判斷，根據(jù)滿足不同的條件進行不同樣式的渲染，其實我們可以把這個函數(shù)再封裝下，讓用戶輸入要分級渲染的字段，渲染樣式也可以讓用戶指定，該方式稍微修改就能進行唯一值渲染，簡單操作就可以實現(xiàn)想要的效果。

三、全部代碼

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

})

});

}

else {

style = new ol.style.Style({

stroke: new ol.style.Stroke({

color: "blue",

width: 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'

})

});

四、放張圖

五、總結(jié)

最后效果就根據(jù)feat_code范圍進行渲染，加載的WFS要素服務(wù)(geoserver發(fā)布的)，這種做法雖然比較方便，但是可擴展性比較差，所以需要進一步封裝，做到利用更大化。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的python实现矢量分级渲染_OpenLayer3实现分级渲染（初级版本）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。