OpenLayers 教程
Openlayers 对样式的控制是通过一个通用的样式对象 Style，图层（Layer）和图形要素（Feature）都可以设置 Style 对象，来展示想要的结果。
Style 可以很灵活的设置**点（图标）、线、面的样式，包括基础样式、标签文本（label）、标签背景和边框、渐变色**等。
本示例介绍点线面的 基础样式、标签和渐变色 等常用样式。
Openlayers style样式演示
<html lang="en">
<head>
<meta charSet="utf-8">
<!--注意：openlayers 原版的比较慢，这里引起自己服务器版-->
<link rel="stylesheet" href="http://openlayers.vip/examples/css/ol.css" type="text/css">
<style>
/* 注意：这里必须给高度，否则地图初始化之后不显示；一般是计算得到高度，然后才初始化地图 */
.map {
height: 400px;
width: 100%;
float: left;
}
</style>
<!--注意：openlayers 原版的比较慢，这里引起自己服务器版-->
<script src="http://openlayers.vip/examples/resources/ol.js"></script>
<script src="./tiandituLayers.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>OpenLayers style</h2>
<!--地图容器，需要指定 id -->
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
// 地图容器
target: 'map',
// 地图图层，比如底图、矢量图等
layers: [
getIMG_CLayer(),
getIBO_CLayer(),
getCIA_CLayer(),
],
// 地图视野
view: new ol.View({
projection: "EPSG:4326",
// 定位
center: [115.67724700667199, 37.73879478106912],
// 缩放
zoom: 6,
maxZoom: 18,
minZoom: 1,
})
});
var defaultStyle = new ol.style.Style({
//边框样式
stroke: new ol.style.Stroke({
color: 'white',
width: 2,
}),
//填充样式
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.7)',
}),
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({
color: 'white',
})
})
})
// 初始化图层
var layer = initVectorLayer();
// 点线面数组
var features = [];
addFeatures();
// 添加点线面
function addFeatures() {
features.push(getFeatureByWKT("POINT(116.17983834030585 39.98298600752048)"));
features.push(getFeatureByWKT("LINESTRING(113.69619564084466 38.778729673116445,113.85000423459466 39.196210141866445,114.90469173459466 38.712811704366445,115.19033626584466 39.569745298116445,116.22305110959466 38.569989438741445,116.45376400021966 39.789471860616445,117.18984798459466 40.031171079366445)"));
features.push(getFeatureByWKT("POLYGON((115.13540462521966 37.877850766866445,116.31094173459466 39.042401548116445,117.23379329709466 38.130536313741445,117.10195735959466 37.295575376241445,115.64077571896966 36.976971860616445,115.26724056271966 37.174725766866445,115.13540462521966 37.877850766866445))"));
layer.getSource().addFeatures(features);
}
/**
* @todo 矢量图层
* @returns {VectorLayer}
* @constructor
*/
function initVectorLayer() {
//实例化一个矢量图层Vector作为绘制层
let source = new ol.source.Vector();
//创建一个图层
let customVectorLayer = new ol.layer.Vector({
source: source,
zIndex: 2,
//设置样式
style: defaultStyle,
});
//将绘制层添加到地图容器中
map.addLayer(customVectorLayer);
return customVectorLayer;
}
/**
* @todo wkt格式数据转化成图形对象
* @param {string} wkt "POINT(112.7197265625,39.18164062499999)" 格式数据
* @param {string|Projection} sourceCode 源投影坐标系
* @param {string|Projection} targetCode 目标投影坐标系
* @returns {Feature}
*/
function getFeatureByWKT(wkt, sourceCode, targetCode) {
try {
let view = map.getView();
if (!wkt) {
return null;
}
let format = new ol.format.WKT();
let feature;
feature = format.readFeature(wkt, {
featureProjection: targetCode || view.getProjection(),
dataProjection: sourceCode || view.getProjection(),
});
return feature;
} catch (e) {
console.log(e);
return null;
}
}
// 圆点样式
function pointStyle() {
let point = new ol.style.Style({
// 点样式
image: new ol.style.Circle({
// 点半径
radius: 15,
// 点的边框，
stroke: new ol.style.Stroke({
color: 'red',
width: 3,
}),
// 缩放比
scale: 1,
// 填充色
fill: new ol.style.Fill({
color: 'green',
})
})
});
let pointFeature = features[0];
pointFeature.setStyle(point);
}
// 规则图形样式
function RegularStyle() {
let point = new ol.style.Style({
// 点样式
image: new ol.style.RegularShape({
points: 4,
// 点半径
radius: 15,
// 点的边框，
stroke: new ol.style.Stroke({
color: 'red',
width: 3,
}),
// 缩放比
scale: 1,
// 旋转
rotation: 0.1,
// 是否跟随地图视图旋转
rotateWithView: true,
// 填充色
fill: new ol.style.Fill({
color: 'green',
})
})
});
let pointFeature = features[0];
pointFeature.setStyle(point);
}
// 图标样式，参数可以自己尝试
function markerStyle() {
let point = new ol.style.Style({
// 点样式
image: new ol.style.Icon({
// 允许跨域，如果不设置，打印地图不会打印
crossOrigin: 'anonymous',
// 标注图片和文字之间的距离
anchor: [0.5, 0],
// 图片的偏移
offset: [0.2, 0],
// 图片的锚点，一般来说，都是右下角
anchorOrigin: 'bottom-right',
//透明度
opacity: 0.8,
//图标的url
src: "http://api.tianditu.gov.cn/v4.0/image/marker-icon.png",
// src: require("../controls/queryControls/image/marker.png"),
//图标比例, 0.5 大概是25*34
scale: 1,
color: 'red',
// rotation: 1,
// Icon对象的尺寸
// size: undefined,
// 图片尺寸
// imgSize: undefined,
})
});
let pointFeature = features[0];
pointFeature.setStyle(point);
}
// 渐变色
// 基础线样式参考默认样式即可
function lineStyle() {
//渐变色线
let styleLine = [];
let steps = 10;
// 渐变色原理，其实就是多个样式共同使用
for (let i = 0; i < steps; i++) {
styleLine.push(
new ol.style.Style({
stroke: new ol.style.Stroke({
color: [0, 255, 255, 1 / (steps - i)],
// color: [0, 255, 255, 1 / (steps - i)],
width: (steps - i) * 2 - 1
}),
})
);
}
let lineFeature = features[1];
lineFeature.setStyle(styleLine);
}
// 面图形要素样式
// 显示标注
function polygon() {
var polygonStyle = new ol.style.Style({
//边框样式
stroke: new ol.style.Stroke({
color: 'blue',
width: 2,
}),
//填充样式
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.3)',
}),
// 显示标注
text: new ol.style.Text({
text: '面要素',
// 偏移
offsetX: 0,
offsetY: 0,
// 文字居中
textAlign: 'center',
// 比例
scale: 1,
placement: 'point',
// 字体
font: 'normal bold 18px Arial,sans-serif',
textBaseline: 'middle',
// 文字颜色
fill: new ol.style.Fill({
color: 'red'
}),
})
});
let polygonFeature = features[2];
polygonFeature.setStyle(polygonStyle);
}
// 标注设置
function label() {
var polygonStyle = new ol.style.Style({
//边框样式
stroke: new ol.style.Stroke({
color: 'blue',
width: 2,
}),
//填充样式
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.3)',
}),
// 标注
text: new ol.style.Text({
text: '面要素完成样式',
// 偏移
offsetX: 0,
offsetY: 0,
// 居中
textAlign: 'center',
// 比例
scale: 1,
placement: 'point',
textBaseline: 'middle',
// 旋转
rotation: 0,
rotateWithView: false,
// 边距
padding: [5, 5, 5, 5],
// 覆盖显示：即文字超过多边形也会显示
overflow: true,
// 字体
font: 'normal bold 16px Arial,sans-serif',
// 字体颜色
fill: new ol.style.Fill({
color: 'rgba(51,51,51, 1)'
}),
// 字体边框，可以配合 fill 是文字高亮
stroke: new ol.style.Stroke({
color: 'rgba(0, 255, 255, 0.8)',
width: 2,
}),
// 背景色
backgroundFill: new ol.style.Fill({
color: 'rgba(252,254,255, 1)'
}),
// 背景边框
backgroundStroke: new ol.style.Stroke({
color: 'rgba(0, 255, 255, 0.8)',
width: 1,
}),
})
});
let polygonFeature = features[2];
polygonFeature.setStyle(polygonStyle);
}
// 还原样式
function restore() {
for (let i = 0; i < features.length; i++) {
features[i].setStyle(defaultStyle);
}
}
</script>
<button id="pointStyle" onClick="pointStyle()">圆点样式</button>
<button id="RegularStyle" onClick="RegularStyle()">规则图形</button>
<button id="markerStyle" onClick="markerStyle()">点（图标）样式</button>
<button id="lineStyle" onClick="lineStyle()">线样式（渐变色）</button>
<button id="polygon" onClick="polygon()">面样式（标注）</button>
<button id="label" onClick="label()">通用标注（背景）</button>
<button id="restore" onClick="restore()">还原所有样式</button>
</body>
</html>
在线示例
Openlayers Style 样式演示：Openlayers style
