OpenLayer中的StyleFunction函数的妙用

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格式为啥不转换直接用,那位大哥知道请告诉我。

转载自:https://blog.csdn.net/weixin_40184249/article/details/81220430

You may also like...