OpenLayers绘制图形
OpenLayers的显示构成由外向内为:html
- 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.style.Style详解。
- 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:多边形。
其结构以下:函数
所以,要绘制一个点,其过程为:spa
- 调用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()便可。htm
ol.style.Style详解对象
一个layer由两部分构成:数据源source和样式style。blog
其中,style即ol.style.Style,指明了各个类型的要素所使用的样式。其属性为:图片
- geometry:要素的属性/要素/返回一个地理要素的函数,用来渲染成相应的地理要素。通常与image属性配合使用,用于定义image要显示的位置。
- fill:填充要素的样式。只有一个color属性。其格式为:
color: 'rgba(255, 125, 125, 0.5)'it
- 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对象就涵盖了各个类型要素的显示方式。class
所以,一个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属性则是无效的。