原文:https://blog.csdn.net/gisshixisheng/article/details/80149087

概述

非常细化Openlayers4中的StyleFunction,因为它可以让我非常方便的实现各种效果,本文带你一起一探究竟。
StyleFunction

StyleFunction是一个样式函数,参数包括:feature和resolution,如下图。

不过,一般来说,resolution我用的很少,我一般会用zoom替换掉resolution这个参数;StyleFunction的返回值包括两种:样式或样式数组,如上图API。

样例

随着缩放点大小变化

function styleFunction(feature) {
var _zoom = map.getView().getZoom(),
_radius = _zoom*2; _radius = _radius<2?2:_radius;
_radius = _radius>15?15:_radius; return new ol.style.Style({
image: new ol.style.Circle({
radius: _radius,
fill: new ol.style.Fill({
color: '#ff0000'
}),
stroke: new ol.style.Stroke({
color: '#ff0000',
width: 2
})
})
})
}

2、级别>4的时候出现标注

 function styleFunction(feature) {
var _zoom = map.getView().getZoom(),
_radius = _zoom*2; _radius = _radius<2?2:_radius;
_radius = _radius>15?15:_radius; var _attr = feature.get("attribute");
var _count = _zoom<5?"":_attr.count; return new ol.style.Style({
image: new ol.style.Circle({
radius: _radius,
fill: new ol.style.Fill({
color: '#ff0000'
}),
stroke: new ol.style.Stroke({
color: '#ff0000',
width: 2
})
}),
text: new ol.style.Text({
text: _count.toString(),
font:"bold 12px Times New Roman",
fill: new ol.style.Fill({
color: '#fff'
})
})
})
}

3、样式组合
样式组合

 function styleFunction(feature) {
var styles = []; styles.push(
new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
fill: new ol.style.Fill({
color: '#ff0000'
}),
stroke: new ol.style.Stroke({
color: '#ff0000',
width: 2
})
})
})
); styles.push(
new ol.style.Style({
geometry: feature.getGeometry(),
image: new ol.style.RegularShape({
radius1: 10,
radius2: 5,
points: 8,
fill: new ol.style.Fill({
color: '#fff'
})
})
})
); return styles;
}

4、展示线的节点
展示节点

  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();
for(var i=0;i<_coords.length;i++){
styles.push(
new ol.style.Style({
geometry: new ol.geom.Point(_coords[i]),
image: new ol.style.Circle({
radius: 4,
fill: new ol.style.Fill({
color: '#ffff'
}),
stroke: new ol.style.Stroke({
color: '#ff0000',
width: 2
})
})
})
);
} return styles;
}

5、带箭头的线
带箭头的线

 function styleFunction(feature) {
var styles = []; styles.push(
new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#ff0000',
width: 4
})
})
); var geometry = feature.get("geometry");
geometry.forEachSegment(function(start, end) {
var dx = end[0] - start[0];
var dy = end[1] - start[1];
var rotation = Math.atan2(dy, dx);
// arrows
styles.push(new ol.style.Style({
geometry: new ol.geom.Point(end),
image: new ol.style.Icon({
src: '../data/arrow.png',
anchor: [0.75, 0.5],
rotateWithView: false,
rotation: -rotation
})
}));
}); return styles;
}

巧用Openlayers4的Style的更多相关文章

  1. 巧用style的另类写法

    看到style,不少人可能会说这个我知道,就是控件写属性的话可以通过style来实现代码的复用,单独把这些属性及其参数写成style就可以便捷的调用. <?xml version="1 ...

  2. 前端工程师技能之photoshop巧用系列第三篇——切图篇

    × 目录 [1]切图信息 [2]切图步骤 [3]实战 前面的话 前端工程师除了使用photoshop进行测量之外,更重要的是要使用该软件进行切图.本文是photoshop巧用系列的第三篇——切图篇 切 ...

  3. 前端工程师技能之photoshop巧用系列第二篇——测量篇

    × 目录 [1]测量信息 [2]实战 [3]注意事项 前面的话 前端工程师使用photoshop进行的大量工作实际上是测量.本文是photoshop巧用系列第二篇——测量篇 测量信息 在网页制作中需要 ...

  4. 前端工程师技能之photoshop巧用系列第五篇——雪碧图

    × 目录 [1]定义 [2]应用场景 [3]合并[4]实现[5]维护 前面的话 前面已经介绍过,描述性图片最终要合并为雪碧图.本文是photoshop巧用系列第五篇——雪碧图 定义 css雪碧图(sp ...

  5. 每日学习心得:Linq解决DataTable按照某一列的值排序问题/DataTable 导出CSV文件/巧用text-overflow解决数据绑定列数据展示过长问题

    2013-8-5 1 Linq解决DataTable按照某一列的值排序 在之前的总结中提到过对拼接而成的复合的DataTable按照某一列值的大小排序,那个主要的思想是在新建表结构时将要排序的那一列的 ...

  6. 网站开发进阶(四十二)巧用clear:both

    网站开发进阶(四十二)巧用clear:both 前言 我们在制作网页中用div+css或者称xhtml+css都会遇到一些很诡异的情况,明明布局正确,但是整个画面却混乱起来了,有时候在IE6下看的很正 ...

  7. openlayers4 入门开发系列之小区信号扇形图篇

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  8. openlayers4 入门开发系列之台风轨迹篇

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  9. openlayers4 入门开发系列之船讯篇

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

随机推荐

  1. 第K人||约瑟夫环(链表)

    http://oj.acm.zstu.edu.cn/JudgeOnline/problem.php?id=4442 很容易超时 通过数组来记录,删除 //数组从1开始好像不行 后面一些数字就乱码了,因 ...

  2. JavaEE 之 Habernate

    1.Habernate a.定义:Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,它将POJO(简单java对象,即javabean)与数据库表建立映射关 ...

  3. POJ 3281 Dining (拆点)【最大流】

    <题目链接> 题目大意: 有N头牛,F种食物,D种饮料,每一头牛都有自己喜欢的食物和饮料,且每一种食物和饮料都只有一份,让你分配这些食物和饮料,问最多能使多少头牛同时获得自己喜欢的食物和饮 ...

  4. UVa 679 - Dropping Balls【二叉树】【思维题】

    题目链接 题目大意: 小球从一棵所有叶子深度相同的二叉树的顶点开始向下落,树开始所有节点都为0.若小球落到节点为0的则往左落,否则向右落.并且小球会改变它经过的节点,0变1,1变0.给定树的深度D和球 ...

  5. Springboot集成ES启动报错

    报错内容 None of the configured nodes are available elasticsearch.yml配置 cluster.name: fans node.name: no ...

  6. ASP.NET MVC不可或缺的部分——DI及其本质工作分析

    IoC框架最本质的东西:反射或者EMIT来实例化对象.然后我们可以加上缓存,或者一些策略来控制对象的生命周期,比如是否是单例对象还是每次都生成一个新的对象. DI实现其实很简单,首先设计类来实现接口, ...

  7. 通用图片加载组件UniversalImageLoader

    通用图片加载组件UniversalImageLoader   UniversalImageLoader是一款通用图片加载组件.该组件支持多种图片来源,如网络.SD卡.Assets文件夹等.在网络请求的 ...

  8. Codeforces.468C.Hack it!(构造)

    题目链接 \(dls\)出的比赛诶...这么妙. \(Description\) 令\(f(x)\)表示整数\(x\)在十进制下各个数位的数字之和.给定\(a\),求两个整数\(l,r\),使得\(\ ...

  9. NEO区块链-DAPP开发直通车-第零篇

    什么是DAPP DAPP 是以太坊发明的词汇 Decentralized Application. 目前基于区块链技术开发的应用程序广泛的接受使用了这一名称.   NEL将为开发DAPP提供全面的服务 ...

  10. Spring MVC ,使用mvc:resources标签后,处理器无法被访问

    在SpringMVC的配置文件中添加了<mvc:resources mapping="/img/**" location="/img/"/>以便处理 ...