| OpenLayers笔记2：点、线、面矢量要素的自定义渲染 | 您所在的位置：网站首页 › 几何包哪个颜色好看点 › OpenLayers笔记2：点、线、面矢量要素的自定义渲染 |
OpenLayers笔记2：点、线、面矢量要素的自定义渲染
|
新建矢量图层ol.layer.Vector时，可以通过使用ol.style来自定义渲染地图矢量要素的样式； 目录 ol.style概述点、线、面矢量要素的常规渲染方式点要素线要素面要素 对同一要素图层中不同个体的区别渲染 ol.style概述在ol.style中默认可以配置的要素包括： Fill：填充的样式，对应的模块为ol.style.Fill； Geometry：地理属性，对应模块为ol.style.Style，使用GeometryFunction设置要素的地理位置、几何属性等； Image：图像的样式，对应的模块为ol.style.Image，还包括ol.style.Circle和ol.style.Icon两个子模块； Renderer：自定义渲染器，对应模块为ol.style.Style，使用RenderFunction对要素进行逐像素渲染； Stroke：边界的样式，对应的模块为ol.style.Stroke； Text：文本的样式，对应模块为ol.style.Text； zIndex：层叠的层次，以整型的数字来设置层次； 除上述要素之外，ol.style还包括一个子类模块ol.style.RegularShape，用于定义多边形形状。 详情说明可见 Openlayers官方API。 点、线、面矢量要素的常规渲染方式 点要素点要素的渲染有两种方式ol.style.Circle和ol.style.Icon。 ol.style.Circle是将点要素作为一个圆环来进行渲染，可设置圆环的半径、填充样式、边界样式和移位（displacement）。 例如： style:new ol.style.Style({ image: new ol.style.Circle({ radius: 5,//半径 fill: new ol.style.Fill({//填充样式 color: '#ff6688', }), stroke: new ol.style.Stroke({//边界样式 color: '#555555', width: 1 }) }),
线要素的渲染主要用到ol.style.Stroke，来设置线条的颜色、宽度、笔帽样式、线条连接处样式等等。 例如： style:new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#ff6688',//颜色 width: 3,//宽度 lineCap: 'round',//线帽样式 //butt：末端添加平直边缘；round：末端添加圆形线帽；square：末端添加方形线帽； lineJoin: 'round'//线条连接处样式 //bevel：创建斜角；round：创建圆角；square：创建尖角； }) }),
线要素的渲染主要使用ol.style.Fill 和ol.style.Stroke，来设置面要素的填充颜色和边界样式。（注：透明度一般是作为矢量图层属性来设置，与style处于同一级。） 例如： var layer = new ol.layer.Vector({ source: vectorSource, opacity: 0.5,//透明度，作为图层属性进行设置 style: new ol.style.Style({ fill: new ol.style.Fill({//填充样式 color: "#ff6688", }), stroke: new ol.style.Stroke({//边界样式 color: "555555", width: 3 }) }), });
要实现对同一要素图层中的不同个体进行区别渲染，需用到StyleFunction()，格式为style: function (feature, resolution) {}。 可根据不同个体的不同属性来区分个体并进行不同的渲染； 也可根据地图分辨率为要素设置不同的渲染，实现要素样式在不同地图分辨率下的动态变化。 例如： var layer = new ol.layer.Vector({ opacity: 0.8,//透明度 style: function (feature, resolution) { var id = feature.get("subFeature");//获取各个个体编号 var thisText = feature.get("name");//获取各个个体的名字 var style = null; var colors = new Array("#ffff66", "#ff66ff", "#66ffff", "66ff00", "#0066ff"); if(id fill: new ol.style.Fill({ color: colors[id], }), stroke: new ol.style.Stroke({ color: "#555555", width: 1 }), text: new ol.style.Text({ text: thisText,//文本 ont: '20px SimHei', //字体大小和字体 fill: new ol.style.Fill({//文字填充颜色 color: '#000000' }) }) }); } return [style]; } });
|
ol.style.Icon是将图标作为点要素的样式，可设置图标的来源、锚点、大小、透明度、旋转角等等； 例如：
【本文地址】
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |