OL4中styleFunction的妙用

概述

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

效果

OL4中styleFunction的妙用_第1张图片
就一个点

说明
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

技术博客
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 [email protected]
webgis群 452117357
Android群 337469080
GIS数据可视化群 458292378

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


OL4中styleFunction的妙用_第2张图片
知识星球二维码
OL4中styleFunction的妙用_第3张图片
LZUGIS

你可能感兴趣的:(OL4中styleFunction的妙用)