概述

越用越觉得styleFunction是一个好东西，爱不释手啊，今天分享一个简单的memo。

效果

就一个点
说明：
1、就一个点，实现上述的效果；

实现

        function styleFunction(feature){
            var count = feature.get("count"),
                geom = feature.get("geometry"),
                res = map.getView().getResolution();

            var center = geom.getCoordinates(),
                r = 30,
                cr = 15;

            var styles = [];
            styles.push(new ol.style.Style({
                image: new ol.style.Circle({
                    radius: r,
                    fill: new ol.style.Fill({
                        color: "#3474cd"
                    })
                }),
                text: new ol.style.Text({
                    text:count,
                    font: "bold 22px 微软雅黑",
                    fill: new ol.style.Fill({
                        color: '#fff'
                    }),
                    textAlign:"center",
                    textBaseline:"middle"
                })
            }));

            var circles = [[],[],[]];
            var _interval = 6,
                _cr = r*res;

            for(var i=0;i<360/6;i++){
                var ang = i*_interval;
                var x = center[0] + _cr * Math.cos(ang * Math.PI /180),
                    y = center[1] + _cr  * Math.sin(ang * Math.PI/180);

                var coord = [x, y];
                var index = parseInt(i/20);
                circles[index].push(coord);
            }

            circles[0].push(circles[1][0]);
            circles[1].push(circles[2][0]);
            circles[2].push(circles[0][0]);

            var colors = ["#ff0000", "#00a1ad", "#2bec47"];
            for(var i=0;i<colors.length;i++){
                styles.push(new ol.style.Style({
                    geometry: new ol.geom.LineString(circles[i]),
                    stroke: new ol.style.Stroke({
                        color: colors[i],
                        lineCap: "butt",
                        width: cr
                    })
                }));
            }

            var circle1 = [[], []],
                _r = (r+cr-3)*res;
            for(var i=0;i<15;i++){
                var ang1 = 45+i*_interval,
                    ang2 = 225+i*_interval;
                var x1 = center[0] + _r * Math.cos(ang1 * Math.PI /180),
                    y1 = center[1] + _r  * Math.sin(ang1 * Math.PI/180);

                var x2 = center[0] + _r * Math.cos(ang2 * Math.PI /180),
                    y2 = center[1] + _r  * Math.sin(ang2 * Math.PI/180);

                circle1[0].push([x1, y1]);
                circle1[1].push([x2, y2]);
            }

            for(var i=0;i<circle1.length;i++){
                styles.push(new ol.style.Style({
                    geometry: new ol.geom.LineString(circle1[i]),
                    stroke: new ol.style.Stroke({
                        color: "#3474cd",
                        width: 5
                    })
                }));
            }

            return styles;
        }

---

技术博客
CSDN：http://blog.csdn.NET/gisshixisheng
在线教程
https://edu.csdn.net/course/detail/799
https://edu.csdn.net/course/detail/7471
联系方式

类型	内容
qq	1004740957
公众号	lzugis15
e-mail	niujp08@qq.com
webgis群	452117357
Android群	337469080
GIS数据可视化群	458292378

“GIS讲堂”知识星球开通了，在星球，我将提供一对一的问答服务，你问我答，期待与你相见。

知识星球二维码 LZUGIS