OpenLayers基础教程——要素样式的创建
标签： OpenLayers基础教程——要素样式的创建 JavaScript博客 51CTO博客
2023-07-18 18:24:26 143浏览
OpenLayers基础教程——要素样式的创建，1、前言在前面的博客中，ol.style这个类的出镜率很高，但限于篇幅的原因，所以一直没有进行详细介绍，下面
1、前言
在前面的博客中，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>
<html>
<head>
<meta charset="utf-8" />
<title>OpenLayers</title>
<link href="ol/ol.css" rel="stylesheet" />
<script src="ol/ol.js"></script>
</head>
<body>
<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>
<html>
<head>
<meta charset="utf-8" />
<title>OpenLayers</title>
<link href="ol/ol.css" rel="stylesheet" />
<script src="ol/ol.js"></script>
</head>
<body>
<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>
<html>
<head>
<meta charset="utf-8" />
<title>OpenLayers</title>
<link href="ol/ol.css" rel="stylesheet" />
<script src="ol/ol.js"></script>
</head>
<body>
<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>
<html>
<head>
<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>
<body>
<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>运行结果如下图所示：
7、结语
在openlayers中，合理使用样式或样式的组合可以让地图的视觉效果更加突出。
好博客就要一起分享哦！分享海报
此处可发布评论
评论（0）展开评论
暂无评论，快来写一下吧
展开评论
