在前面的博客中，
ol.style
这个类的出镜率很高，但限于篇幅的原因，所以一直没有进行详细介绍，下面就来介绍一下
openlayers
中的样式——
ol.style
。
2、样式的基本组成
一个
ol.style.Style
对象一般包含如下属性：
geometry——地理实体
image——常用于设置点要素的样式
stroke——常用于设置线要素的样式
fill——常用于设置面要素的样式
text——常用于设置文字标注的样式
同时，
ol.style.Style
类也派生出很多子类，如下所示：
ol.style.Circle——用于设置点样式，以圆形显示
ol.style.Icon——用于设置点样式，以图片的形式显示
ol.style.Stroke——用于设置线样式
ol.style.Fill——用于设置面样式
ol.style.RegularShape——用于设置星形样式
ol.style.Text——用于设置文字样式
3、样式的创建
代码如下：
<!DOCTYPE html>
<meta charset="utf-8" />
<title>OpenLayers</title>
<link href="ol/ol.css" rel="stylesheet" />
<script src="ol/ol.js"></script>
</head>
<div id="map" style="width:500px;height:500px;"></div>
<script>
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
view: new ol.View({
projection: 'EPSG:4326',
center: [120, 30],
zoom: 10
createPoint();
createIconPoint();
createPolyline();
createPolygon();
// 创建点
function createPoint() {
// 创建样式
var style = new ol.style.Style({
image: new ol.style.Circle({
radius: 20, // 半径
stroke: new ol.style.Stroke({ // 边界样式
color: 'yellow', // 边界颜色
width: 2 // 边界宽度
fill: new ol.style.Fill({ // 填充样式
color: 'red' // 填充颜色
// 创建要素
var feature = new ol.Feature({
geometry: new ol.geom.Point([120.0, 30.0])
feature.setStyle(style);
// 创建数据源
var source = new ol.source.Vector();
source.addFeature(feature);
// 创建图层
var layer = new ol.layer.Vector({
source: source
// 添加图层
map.addLayer(layer)
// 创建图片点
function createIconPoint() {
// 创建样式
var style = new ol.style.Style({
image: new ol.style.Icon({
src: 'img/location.png'
// 创建要素
var feature = new ol.Feature({
geometry: new ol.geom.Point([119.8, 30.2])
feature.setStyle(style);
// 创建数据源
var source = new ol.source.Vector();
source.addFeature(feature);
// 创建图层
var layer = new ol.layer.Vector({
source: source
// 添加图层
map.addLayer(layer)
// 创建线
function createPolyline() {
// 创建样式
var style = new ol.style.Style({
stroke: new ol.style.Stroke({ // 边界样式
color: '#0000FF', // 边界颜色
width: 2 // 边界宽度
// 创建要素
var feature = new ol.Feature({
geometry: new ol.geom.LineString([
[120.10, 30.10],
[120.14, 30.30],
[120.25, 30.22]
feature.setStyle(style);
// 创建数据源
var source = new ol.source.Vector();
source.addFeature(feature);
// 创建图层
var layer = new ol.layer.Vector({
source: source
// 添加图层
map.addLayer(layer)
// 创建面
function createPolygon() {
// 创建样式
var style = new ol.style.Style({
stroke: new ol.style.Stroke({ // 边界样式
color: 'rgba(136,136,136,0.8)', // 边界颜色
width: 2 // 边界宽度
fill: new ol.style.Fill({ // 填充样式
color: 'rgba(136,136,136,0.5)' // 填充颜色
// 创建要素
var feature = new ol.Feature({
geometry: new ol.geom.Polygon([[
[119.80, 29.80],
[119.95, 29.80],
[119.85, 29.98],
[119.80, 29.80],
feature.setStyle(style);
// 创建数据源
var source = new ol.source.Vector();
source.addFeature(feature);
// 创建图层
var layer = new ol.layer.Vector({
source: source
// 添加图层
map.addLayer(layer)
</script>
</body>
</html>
运行结果如下图所示：
4、在要素图层中定义样式
在上面的代码中，我们创建样式的流程一般是：先定义样式，然后创建要素，最后设置要素的样式。其实我们同样可以在
layer
中定义样式，这样就不需要频繁使用
setStyle(style)
了。在
layer
中声明样式的方法就是定义一个回调函数：
style: function(feature, resolution)
，代码如下：
<!DOCTYPE html>
<meta charset="utf-8" />
<title>OpenLayers</title>
<link href="ol/ol.css" rel="stylesheet" />
<script src="ol/ol.js"></script>
</head>
<div id="map" style="width:500px;height:500px;"></div>
<script>
// 创建要素
var source = new ol.source.Vector();
source.addFeature(new ol.Feature({
geometry: new ol.geom.Point([120.0, 30.0])
source.addFeature(new ol.Feature({
geometry: new ol.geom.Point([120.4, 30.4])
// 创建图层
var layer = new ol.layer.Vector({
source: source,
style: function (feature, resolution) {
var style = new ol.style.Style({
image: new ol.style.Circle({
radius: 20,
fill: new ol.style.Fill({
color: 'red'
stroke: new ol.style.Stroke({
color: 'red',
width: 1
return style;
// 创建地图
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
layer
view: new ol.View({
projection: 'EPSG:4326',
center: [120, 30],
zoom: 7
</script>
</body>
</html>
运行结果如下图所示：
5、样式的组合使用
下面我们利用
ol.style.RegularShape
来实现一个组合样式，代码如下：
<!DOCTYPE html>
<meta charset="utf-8" />
<title>OpenLayers</title>
<link href="ol/ol.css" rel="stylesheet" />
<script src="ol/ol.js"></script>
</head>
<div id="map" style="width:500px;height:500px;"></div>
<script>
// 创建要素
var source = new ol.source.Vector();
source.addFeature(new ol.Feature({
geometry: new ol.geom.Point([120.0, 30.0])
source.addFeature(new ol.Feature({
geometry: new ol.geom.Point([120.4, 30.4])
// 创建图层
var layer = new ol.layer.Vector({
source: source,
style: function (feature, resolution) {
var styles = [];
styles.push(
new ol.style.Style({
image: new ol.style.Circle({
radius: 20,
fill: new ol.style.Fill({
color: 'red'
stroke: new ol.style.Stroke({
color: 'red',
width: 1
styles.push(
new ol.style.Style({
geometry: feature.getGeometry(),
image: new ol.style.RegularShape({
radius1: 15,
radius2: 10,
points: 8,
fill: new ol.style.Fill({
color: 'white'
return styles;
// 创建地图
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
layer
view: new ol.View({
projection: 'EPSG:4326',
center: [120, 30],
zoom: 7
</script>
</body>
</html>
运行结果如下图所示：
6、一个小实例
现有一份浙江省的
GeoJSON
格式的数据，我们现在需要把它加载到地图中，然后进行相应配色和文字标注，初始的数据如下图所示：
配色和文字标注代码如下：
<!DOCTYPE html>
<meta charset="utf-8" />
<title>OpenLayers</title>
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
</style>
<link href="ol/ol.css" rel="stylesheet" />
<script src="ol/ol.js"></script>
</head>
<div id="map"></div>
<script>
var layer = new ol.layer.Vector({
source: new ol.source.Vector({
projection: 'EPSG:4326',
url: 'data/zhejiang.json',
format: new ol.format.GeoJSON()
style: function (feature, resolution) {
var name = feature.get('name');
var color = getColor(name);
var style = getStyle(name, color);
return style;
var map = new ol.Map({
target: 'map',
layers: [
layer
view: new ol.View({
center: ol.proj.fromLonLat([120, 30]),
zoom: 7
// 获取颜色
function getColor(name) {
var color = 'Red';
switch (name) {
case '丽水市':
color = 'Red';
break;
case '杭州市':
color = 'Green';
break;
case '温州市':
color = 'Yellow';
break;
case '宁波市':
color = 'Blue';
break;
case '舟山市':
color = 'Orange';
break;
case '台州市':
color = 'Pink';
break;
case '金华市':
color = 'DodgerBlue';
break;
case '衢州市':
color = 'DarkGoldenRod';
break;
case '绍兴市':
color = 'Plum';
break;
case '嘉兴市':
color = 'Khaki';
break;
case '湖州市':
color = 'Magenta';
break;
default:
color = 'Red';
break;
return color;
// 获取样式
function getStyle(name, color) {
var style = new ol.style.Style({
stroke: new ol.style.Stroke({ // 边界样式
color: color, // 边界颜色
width: 1 // 边界宽度
fill: new ol.style.Fill({ // 填充样式
color: color // 填充颜色
text: new ol.style.Text({ // 文字样式
text: name, // 文字内容
font: '15px Calibri,sans-serif', // 字体大小
stroke: new ol.style.Stroke({ // 文字边界样式
color: 'white', // 文字边界颜色
width: 1 // 文字边界宽度
fill: new ol.style.Fill({ // 文字填充样式
color: 'black' // 文字填充颜色
return style;
</script>
</body>
</html>
运行结果如下图所示：
在
openlayers
中，合理使用样式或样式的组合可以让地图的视觉效果更加突出。
友情连接：
杰凡IT问答
编程自学指导
毕业设计指导
杰凡IT问答
QUX轻设计
开发 by 飞一样的编程
如涉及侵权，请及时告知，我们会立即处理
联系方式：飞一样的编程 QQ 1913284695
点击加好友
， 微信 jf3qcom
桂ICP备2020009361号-2
