概述

越用越觉得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讲堂”知识星球开通了，在星球，我将提供一对一的问答服务，你问我答，期待与你相见。

OL4中styleFunction的妙用相关推荐

JavaScript中的this妙用
JavaScript关键字this始JS脚本能够根据使用这个关键字的上下文将值传递给函数. 我们先来看如下一个网页,在用户单击链接之后,弹出一个alert框,然后再转到href属性所指的网页 HTML ...
golang中json.Number妙用
golang中json.Number妙用最近跟某斯调试一个API接口,接口返回数据是json格式 ,按文档描述是一个整型数据,于是定义如下 type Data struct {Api int `js ...
springboot yml中profiles的妙用，小白必看多环境配置！
遥想当年我还是个小白的时候,就只是写写demo,也就在一套环境上跑跑,真正当实战的时候,除了你本地环境,还有开发环境,测试环境,生产环境(上线)等等. 如果你不知道用这个profiles,那么这么多套 ...
python中any的妙用
在判断字符串中是否有字母或者是否有数字,是否有大写,是否有小写 if __name__ == "__main__":s = input()print(any([ch.isalnum ...
mysql中pager命令妙用
pager命令的妙用在mysql,可以大大提高工作效率. 一当处理大量数据时,不想显示查询的结果,而只需知道查询话费的时间. mysql> select * from t3; +----- ...
Redis中bitmap的妙用
在Redis中我们经常用到set,get等命令,细心的你有没有发现,还有几个相似的命令叫setbit,getbit,它们是用来干嘛的? BitMap是什么就是通过一个bit位来表示某个元素对应的值或 ...
Redis中bitmap的妙用 1
https://segmentfault.com/a/1190000008188655 BitMap是什么就是通过一个bit位来表示某个元素对应的值或者状态,其中的key就是对应元素本身.我们知道8 ...
DataGridView中回车键的妙用
在NET 中DataGridView 是一个很好的控件,它提供了一个用于输入数据和显示数据的自定义表.如果你在你的程序中提供DataGridView 作为用户输入多行数据的一种方式,你或许希望重新定 ...
C++宏定义中#与##的妙用
在C++开发当中经常用到宏的定义当中使用"#"或者"##",以下是对着两种符号使用方法的简单描述: define中的#就是把#后面的参数当做一个符号来使用,简单 ...

OL4中styleFunction的妙用

概述

效果

实现

OL4中styleFunction的妙用相关推荐

最新文章

热门文章