OpenLayer学习之style样式的学习笔记
目录
前言：
1. 可以配置的选项
/**
* @typedef {{geometry: (undefined|string|ol.geom.Geometry|ol.style.GeometryFunction),
* fill: (ol.style.Fill|undefined),
* image: (ol.style.Image|undefined),
* stroke: (ol.style.Stroke|undefined),
* text: (ol.style.Text|undefined),
* zIndex: (number|undefined)}}
* @api
*/2.含义
-
geometry，要素的属性，或者要素，或者一个返回一个地理要素的函数，用来渲染成相应的地理要素；
-
fill，填充要素的样式；
-
iamge，图片样式，类型为
ol.style.Image； -
stroke，要素边界样式，类型为
ol.style.Stroke； -
text，要素文字的样式，类型为
ol.style.Text； -
zIndex，CSS中的zIndex，即叠置的层次，为数字类型。
一、子类
- ol.style.Circle，针对矢量要素设置圆形的样式，继承
ol.style.Image； - ol.style.Icon，针对矢量数据设置图标样式，继承
ol.style.Image； - ol.style.Fill，针对矢量要素设置填充样式；
- ol.style.RegularShape，对矢量要素设置规则的图形样式，如果设置
radius，结果图形是一个规则的多边形，如果设置radius1和radius2，结果图形将是一个星形； - ol.style.Stroke，矢量要素的边界样式；
- ol.style.Text，矢量要素的文字样式。
二、实例化
var style = new ol.style.Style({
fill: new ol.style.Fill({ //矢量图层填充颜色，以及透明度
color: 'rgba(255, 255, 255, 0.6)'
}),
stroke: new ol.style.Stroke({ //边界样式
color: '#319FD3',
width: 1
}),
text: new ol.style.Text({ //文本样式
font: '12px Calibri,sans-serif',
fill: new ol.style.Fill({
color: '#000'
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 3
})
})
});三、应用
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
url: '../data/geojson/line-samples.geojson',
format: new ol.format.GeoJSON()
}),
// 设置样式，颜色为红色，线条粗细为1个像素
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
size: 1
})
})
});四、geometry – 地理属性
geometry 可以是要素的地理属性，或者 geometry，或者一个返回 geometry 类型的函数。一般与 image 样式配合使用，表示 image 放置的位置，如下面的例子：
new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({
color: 'orange'
})
}),
geometry: function(feature) {
// return the coordinates of the first ring of the polygon
var coordinates = feature.getGeometry().getCoordinates()[0];
return new ol.geom.MultiPoint(coordinates);
}
})五、styleFunction应用
<div id="map2" style="width: 100%"></div>
<script type="text/javascript">
// 创建layer使用的style function，根据feature的自定义type，返回不同的样式
var layerStyleFunction = function(feature, resolution) {
var type = feature.get('type');
var style = null;
// 点
if (type === 'point') {
style = new ol.style.Style({
image: new ol.style.Circle({
radius: 1,
fill: new ol.style.Fill({
color: 'red'
})
})
});
} else if ( type === 'circle') { // 圆形
style = new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
stroke: new ol.style.Stroke({
color: 'red',
size: 1
})
})
});
} else { // 其他形状
style = new ol.style.Style({
image: new ol.style.RegularShape({
points: 5,
radius: 10,
fill: new ol.style.Fill({
color: 'blue'
})
})
});
}
// 返回 style 数组
return [style];
};
var layer2 = new ol.layer.Vector({
source: new ol.source.Vector(),
style: layerStyleFunction // 应用上面创建的 style function
});
var map2 = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
layer2
],
target: 'map2',
view: new ol.View({
projection: 'EPSG:4326',
center: [104, 30],
zoom: 10
})
});
// 添加三个feature，并设置自定义属性 type
var rect = new ol.Feature({
geometry: new ol.geom.Point([104, 30])
});
layer2.getSource().addFeature(rect);
var circle = new ol.Feature({
geometry: new ol.geom.Point([104, 30])
});
circle.set('type', 'circle');
layer2.getSource().addFeature(circle);
var point = new ol.Feature({
geometry: new ol.geom.Point([104, 30])
});
point.set('type', 'point');
layer2.getSource().addFeature(point);
</script>这就是一个典型的根据feature的属性进行不同渲染的例子，可以在业务上无限扩展，比如feature的属性可以是速度，可以是大小，可以是时间，可以是权重等等。 由此可见，只要掌握了这个方法，前端按照条件渲染就不再困难。
转载自：https://blog.csdn.net/weixin_40184249/article/details/80693698
