OpenLayers绘制图形

 

OpenLayers的显示构成由外向内为:

  1. ol.Map:地图对象。
  2. ol.layer.Vector:图层对象layer。Map含有多个layer,最终的显示效果是由多个layer叠加而成。
  3. ol.source.Vector和ol.style.Style:

一个layer由两部分构成:数据源source和样式style。其含义是,该layer下所有的图形都使用同样的绘制样式。

  • ol.source.Vector:数据源,提供该layer下所有的图形信息。
  • ol.style.Style:绘制样式,为该layer下所有的图形共用。具体见后面ol.style.Style详解。
  1. ol.Feature:要素,即图形。一个source下含多个Feature。Feature是所有图形的一个封装,具体代表什么图形由内部的geometry参数决定。
  2. ol.geom.Geometry:具体图形,决定了一个Feature具体代表什么图形。其类型有:
    • ol.geom.Point:点。
    • ol.geom.LineString:线。
    • ol.geom.Circle:圆。
    • ol.geom.LinearRing:线性环。
    • ol.geom.MultiPoint:多点。
    • ol.geom.MultiLineString:多线。
    • ol.geom.MultiPolygon:多面。
    • ol.geom.Polygon:多边形。

其结构如下:

因此,要绘制一个点,其过程为:

  1. 调用new ol.geom.Point来创建一个geometry对象。
  2. 将geometry对象作为属性,调用new ol.Feature来创建一个Feature。
  3. 多个Feature构成一个features数组,作为属性,调用new ol.source.Vector来创建一个source。
  4. 调用new ol.style.Style来创建一个style。
  5. 将3和4中创建的source和style作为属性,调用来new ol.layer.Vector创建一个layer。
  6. 将layer作为属性,调用new ol.Map来创建Map。

若要清空一个layer的所有图形,那么获取该layer的source,然后调用source.clear()即可。

ol.style.Style详解

一个layer由两部分构成:数据源source和样式style。

其中,style即ol.style.Style,指明了各个类型的要素所使用的样式。其属性为:

  • geometry:要素的属性/要素/返回一个地理要素的函数,用来渲染成相应的地理要素。一般与image属性配合使用,用于定义image要显示的位置。
  • fill:填充要素的样式。只有一个color属性。其格式为:

color: 'rgba(255, 125, 125, 0.5)'

  • image:图片样式,类型为 ol.style.Image,也可设置为ol.style.Image的两个派生类:ol.stylel.Circle和ol.style.Icon。然而,image属性并不仅仅对图片生效。默认image会对整个layer的要素生效。例如将image赋值为ol.style.Circle,那么point要素会渲染成一个圆。
  • stroke:要素边界样式,类型为 ol.style.Stroke。主要属性为color和width。
  • text:要素文字的样式,类型为 ol.style.Text。主要配合ol.geom.Point在指定位置显示文本。文本内容由ol.style.Text.text属性控制。因此,若多个点共享同一个style,那么这些点显示的文本是相同的。若要每个点显示不同的文本,需要每个Feature单独设置自己的style。
  • zIndex:z轴次序。用于layer的上下堆叠。

也就是说,一个ol.style.Style对象,是由多个ol.style.XXX组成。所以一个ol.style.Style对象就涵盖了各个类型要素的显示方式。

因此,一个layer只需要设置一个ol.style.Style,然后该layer下的所有要素就会按ol.style.Style中定义的对应类型style来进行渲染,即

若非常确定一个layer下不会显示某些类型的要素,例如text,那么可以不为ol.style.Style设置对应的属性。

ol.style.Style是layer的全局属性,对layer的所有要素生效。但每个feature也可以调用setStyle()来设置自己的style。

例如:

对一个ol.geom.Point而言,fill和stroke属性是无效的,其最主要的style是image属性。将image属性设为ol.stylel.Circle,则该点会显示为一个圆;将image属性设为ol.style.Icon,则该点会显示为一个图标。

对一个ol.geom.Circle而言,最主要的style属性是fill和stroke,这两个属性决定了圆的内部颜色和外侧轮廓。而image属性则是无效的。

OpenLayers绘制图形的更多相关文章

  1. CSS 魔法系列:纯 CSS 绘制图形(心形、六边形等)

    <CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...

  2. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  3. html5 canvas 笔记一(基本用法与绘制图形)

    <canvas> 元素 <canvas id="tutorial" width="150" height="150"> ...

  4. WPF2D绘制图形方法

    我们先看看效果如何: xaml文件: <Window x:Class="WPF2D绘制图形方法.MainWindow" xmlns="http://schemas. ...

  5. 11-UIKit(Storyboard、View的基本概念、绘制图形、UIBezierPath)

    目录: 1. Storyboard 2. Views 3. View的基本概念介绍 4. 绘制图形 5. UIBezierPath 回到顶部 1. Storyboard 1.1 静态表视图 1)Sec ...

  6. HTML5—canvas绘制图形(1)

    1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...

  7. 【canvas学习笔记二】绘制图形

    上一篇我们已经讲述了canvas的基本用法,学会了构建canvas环境.现在我们就来学习绘制一些基本图形. 坐标 canvas的坐标原点在左上角,从左到右X轴坐标增加,从上到下Y轴坐标增加.坐标的一个 ...

  8. HTML5使用Canvas来绘制图形

    一.Canvas标签: 1.HTML5<canvas>元素用于图形的绘制,通过脚本(通常是javascript)来完成. 2.<canvas>标签只是图形容器,必须使用脚本来绘 ...

  9. canvas 绘制图形

    canvas 绘制图形: 注意: canvas 的宽高设置在行内,否则会使画布(canvas)产生扭曲,绘图变形: <!DOCTYPE html> <html lang=" ...

随机推荐

  1. 【数据库】一篇文章搞掂:MySQL数据库

    一.安装 使用版本:5.7(2018/08/03 阿里云的云数据库最高支持5.7,所以这里考虑用5.7) 下载版本:MySQL Community Server 5.7.23 下载地址:https:/ ...

  2. 【Shiro】四、Apache Shiro授权

    1.授权实现方式 1.1.什么是授权 授权包含4个元素(一个比较流行通用的权限模型) Resources:资源 各种需要访问控制的资源 Permissions:权限 安全策略控制原子元素 基于资源和动 ...

  3. flask中的目录解析

    首先我们看一下博客blog的封面,flask和django都属于web框架.不过flask属于轻量级web框架,功能的实现是通过扩展实现的,extension.py 中存放各个对象,具体的功能通过对象 ...

  4. 59、salesforce实现数据的批量处理

    批处理,往自己的邮箱发一封邮件,批处理采用异步的处理方式处理数据,最多可以处理5000万条数据 global with sharing class MerchandiseBatch implement ...

  5. sqlserver定时作业,定时执行存储过程

    首先,我想说,我真的是渣了,一个这个玩意弄了半天,算了,直接切入正题吧. 第一步: 先写好存储过程 用了两张表,你们自己建立吧 <br data-filtered="filtered& ...

  6. 12.Jmeter 快速入门教程 -- 监控被测资源

    写在前面的话, 作者认为jmeter的监控被测服务器资源只是基本可用, 还好习惯了linux的各种命令和工具,所以也基本不用担心什么了.但是有了图形化的监控, 也方便给领导出报告. 怎么说也是不错的. ...

  7. RedisTemplate序列号自增id(当前日期+序列号)

    话不多上,直接上码 public class TestService { @Resource RedisTemplate<String, Object> redisTemplate; pu ...

  8. zabbix添加对web页面url的状态监控

    zabbix3.0.4添加对web页面url的状态监控 1.应用集配置 在配置—>主机中打开主机列表,选择需要添加监控主机的web,创建应用集 2.web监测配置 选择web场景,再单击右上角的 ...

  9. iView Card 图文组件

    <Card style="width:3.3rem" :dis-hover="false" > <div style="text-a ...

  10. 视频专家之路【三】:Vs开发环境的搭建

    本文是听了雷宵骅大神的课之后的总结,部分内容借用了其PPT的内容,如有侵权请告知删除. 雷宵骅大神的博客为:https://blog.csdn.net/leixiaohua1020 这里提及一点,原来 ...