StyleFunction函数能够让我们做一些复杂逻辑的渲染,Feature和图层都会用到StyleFunction,但事实上Feature要素用到的是ol.FeatureStyleFunction
,函数仅带有一个参数resolution,而图层
StyleFunction,含有两个参数,feature和resolution两者是不一样,关于返回值,ol3要求返回一个样式数组,但是返回一个单个样式,也不会报错,ol4可以返回数组,也可以返回单个样式。
放张图:
节点效果:
平滑效果:
一、Feature要素设置样式函数示例:
var anchor = new ol.Feature({
geometry: new ol.geom.Point([104, 30]),
style:getStyle
});
function getStyle (resolution){
return [new ol.style.Style({
image: new ol.style.Icon({
src: '../img/anchor.png',
scale: map.getView().getZoom() / 10
})
})];
}
代码是OL3示例
二、vector图层设置样式函数示例:
//矢量图层
var vector = new ol.layer.Vector({
source: source,
style: styleFunction
});
function styleFunction(feature) {
var styles = [];
styles.push(
new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#ff0000',
width: 4
})
})
);
var _coords = feature.get("geometry").getCoordinates();
console.log(_coords);
var points = _coords["0"];
for (var i = 0; i < points.length; i++) {
var point = new ol.geom.Point(points[i]);
styles.push(
new ol.style.Style({
geometry: point,
image: new ol.style.Circle({
radius: 4,
fill: new ol.style.Fill({
color: '#ffff'
}),
stroke: new ol.style.Stroke({
color: '#ff0000',
width: 2
})
})
})
);
}
//console.log(styles.length);
return styles;
}
这里getCoordinates()返回的是一个geojson类型,需要进一步处理,不知道别人的需要处理不。
三、平滑处理多边形
var _lFeatures = vector.getSource().getFeatures();
for (var i = 0; i < _lFeatures.length; i++) {
var _coords = _lFeatures[i].get("geometry").getCoordinates();
console.log(_coords);
var points = _coords["0"];
//console.log(points.length);
var _lCoords = [];
for (var j = 0; j < _coords.length; j++) {
var _coord = _coords[j];
console.log(_coord);
console.log("1");
var line = turf.lineString(_coord);
var curved = turf.bezierSpline(line);
_lCoords.push(curved.geometry.coordinates);
}
_lFeatures[i].getGeometry().setCoordinates( _lCoords);
}
这里借用turf.js做的,注意turf.lineString(_coord)传入的可不是单个坐标,而是一份一条线或者多边形的所有坐标,就是先画一条线,然后转成贝塞尔曲线
四、总结
关于那个坐标返回的问题,我还是有点疑惑,看牛老师的代码,他并没有转换,这点我很不理解,明明返回的是geojson格式为啥不转换直接用,那位大哥知道请告诉我。