博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
OpenLayers绘制图形
阅读量:5338 次
发布时间:2019-06-15

本文共 2216 字,大约阅读时间需要 7 分钟。

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

    ol.Map:地图对象。

    ol.layer.Vector:图层对象layer。Map含有多个layer,最终的显示效果是由多个layer叠加而成

    ol.source.Vector和ol.style.Style

一个layer由两部分构成:数据源source和样式style。其含义是,该layer下所有的图形都使用同样的绘制样式。
   ol.source.Vector:数据源,提供该layer下所有的图形信息。
   ol.style.Style:      绘制样式,为该layer下所有的图形共用。

ol.Feature:要素,即图形。一个source下含多个Feature。Feature是所有图形的一个封装,具体代表什么图形由内部的geometry参数决定。

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:多边形。
其结构如下:

 

 

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

调用new ol.geom.Point来创建一个geometry对象。

将geometry对象作为属性,调用new ol.Feature来创建一个Feature。
多个Feature构成一个features数组,作为属性,调用new ol.source.Vector来创建一个source。
调用new ol.style.Style来创建一个style。
将3和4中创建的source和style作为属性,调用来new ol.layer.Vector创建一个layer。
将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属性则是无效的

原文:https://blog.csdn.net/fyyyr/article/details/82588483

 

转载于:https://www.cnblogs.com/liuwd/p/10855198.html

你可能感兴趣的文章
分析语句执行步骤并对排出耗时比较多的语句
查看>>
原生JS轮播-各种效果的极简实现
查看>>
软件工程总结作业---提问回顾与个人总结
查看>>
计数器方法使用?
查看>>
带你全面了解高级 Java 面试中需要掌握的 JVM 知识点
查看>>
sonar结合jenkins
查看>>
解决VS+QT无法生成moc文件的问题
查看>>
AngularJs练习Demo14自定义服务
查看>>
stat filename
查看>>
关于空想X
查看>>
CF1067C Knights 构造
查看>>
[BZOJ2938] 病毒
查看>>
webstorm修改文件,webpack-dev-server不会自动编译刷新
查看>>
Scikit-learn 库的使用
查看>>
CSS: caption-side 属性
查看>>
python 用数组实现队列
查看>>
认证和授权(Authentication和Authorization)
查看>>
Mac上安装Tomcat
查看>>
CSS3中box-sizing的理解
查看>>
传统企业-全渠道营销解决方案-1
查看>>