巧用Openlayers4的Style

概述

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

StyleFunction

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

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

样例

  1. 随着缩放点大小变化
    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;
    }

技术博客 CSDN:http://blog.csdn.NET/gisshixisheng 博客园:http://www.cnblogs.com/lzugis/ 在线教程 https://edu.csdn.net/course/detail/7471 Github https://github.com/lzugis/ 联系方式

类型

内容

qq

1004740957

公众号

lzugis15

e-mail

niujp08@qq.com

webgis群

452117357

Android群

337469080

GIS数据可视化群

458292378

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏木子昭的博客

学习React中ref的两个demo

虚拟Dom虽然能够提升网页的性能, 但虚拟 DOM 是拿不到用户输入的。为了获取文本输入框的一些操作, 还是js原生的事件绑定机制最好用~

8330
来自专栏WD学习记录

辅助方法、模型、视图数据

在相应的视图中,使用 ViewBag 中的值来为 TextBox 辅助方法命名,可以实现渲染显示价格的文本框:

9020
来自专栏简书专栏

基于Excel2013的数据转换和清洗

数字可以被设成的格式有12种:常规、数值、货币、会计专用、日期、时间、百分比、分数、科学记数、文本、特殊、自定义

18620
来自专栏软件开发

前端MVC Vue2学习总结(五)——表单输入绑定、组件

一、表单输入绑定 1.1、基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,...

508140
来自专栏马涛涛的专栏

虚拟DOM

DOM 是 JavaScript 操作网页的接口,全称为“文档对象模型”(Document Object Model)。它的作用是将网页转为一个 JavaScr...

40920
来自专栏CoXie带你学编程

初学Python:写码时应该缩进使用 tab 还是空格?

在不同的编辑器里tab的长度可能不一致,所以在一个编辑器里用tab设置缩进后,在其它编辑器里看可能缩进就乱了。空格不会出现这个问题,因为空格就占一个字符的位置。

21510
来自专栏大前端_Web

前端开发常用函数及小技巧(持续更新)

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

26630
来自专栏软件开发

前端MVC Vue2学习总结(五)——表单输入绑定、组件

你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法...

12130
来自专栏前端布道

CSS预处理器的对比 — sass、less和stylus

本文根据Johnathan Croom的《sass vs. less vs. stylus: Preprocessor Shootout》所译,整个译文带有我们...

1.4K60
来自专栏更流畅、简洁的软件开发方式

表单控件续(1)——应用接口来简化和分散代码

上次有点仓促,有几个地方没有明确。 后者是整个流程,前者是其中的一个步骤,是一个简单的思路说明,其中前三段代码都是表单控件里面的。 2、我要写的是一个表单控...

20890

扫码关注云+社区

领取腾讯云代金券