openlayer 图形样式编辑
1、一个完整的绘制图层应该包含（从里到外）
（1）ol.geom.Geometry：地理空间对象的几何实体
（2）ol.Feature：要素，包含地理空间对象的几何实体
（3）ol.source.Vector：绘制层数据源，包含地图要素（ol.source.Source的子类）
（4）ol.style.Style：样式类
（5）ol.layer.Vector：绘制层，包含绘制层数据源、样式
2、地理空间对象的几何实体（ol.geom.Geometry的孙类）
（1）ol.geom.Circle：圆
（2）ol.geom.LinearRing：线性环
（3）ol.geom.LineString：线
（4）ol.geom.MultiLineString：多线条
（5）ol.geom.MultiPoint：多点
（6）ol.geom.MultiPolygon：多面
（7）ol.geom.Point：点
（8）ol.geom.Polygon：多边形
3、要素参数
（1）geometry：几何图形
（2）name：名称
4、绘制层数据源参数
（1）features：地图要素
5、关于Openlayer的样式，通过ol.style.Style类进行设置，主要参数有
（1）fill：填充样式（ol.styleFill）
（2）image：图像样式（ol.style.image）
（3）stroke：边界线样式（ol.style.stroke）
（4）text：文本样式（ol.style.Text）
6、绘制层参数
（1）source：绘制层数据源
（2）style：样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="libs/ol/ol.css"/>
<script src="libs/ol/ol-debug.js"></script>
</head>
<body>
<div id="map"></div>
</body>
<script>
//卫星图层
var satlayer = new ol.layer.Tile({
source: new ol.source.XYZ({
title: "卫星图",
url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}'
})
});
//卫星图标注层
var satannolayer = new ol.layer.Tile({
title: "卫星图标注",
source: new ol.source.XYZ({
url: 'http://t3.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}'
})
});
// 文本样式
var textStyle = new ol.style.Text({
textAlign:'Center',
textBaseline:'Top',
font:'Arial',
text:'你要的不是我',
fill: new ol.style.Fill({color: 'green'}),
stroke: new ol.style.Stroke({
color: 'red',
width:3
}),
offsetX: 0,
offsetY: 1,
rotation: 0
});
//绘制点
//点要素
var pointFeature = new ol.Feature({
geometry: new ol.geom.Point([0, 0]),
name: '点要素'
});
//点要素样式
var pointStyle = new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
fill: new ol.style.Fill({color: 'blue'}),
stroke: new ol.style.Stroke({
color: 'red',
width: 4
})
}),
text: textStyle
});
//点要素绘制图层
var vectorPoints = new ol.layer.Vector({
source: new ol.source.Vector({
features:[pointFeature]
}),
style:pointStyle
});
//绘制线
//线要素
var lineFeature = new ol.Feature({
geometry: new ol.geom.LineString([[1e7,1e6],[1e6,3e6]]),
name: '线要素'
});
//线要素样式
var lineStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 3
}),
text: textStyle
});
//先要素绘制图层
var vectorLines = new ol.layer.Vector({
source: new ol.source.Vector({
features: [lineFeature]
}),
style:lineStyle
});
//绘制区要素
//区要素
var polygonFeature = new ol.Feature({
geometry: new ol.geom.Polygon(
[[[1e6, -1e6],[1e6, 1e6], [3e6, 1e6], [3e6, -1e6],[1e6, -1e6]]]
),
name: '区要素'
});
//区要素样式
var polygonStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 3
}),
fill: new ol.style.Fill({
color: 'red'
}),
text: textStyle
});
var vectorPolygons = new ol.layer.Vector({
source: new ol.source.Vector({
features: [polygonFeature]
}),
style:polygonStyle
});
//实例化Map对象加载地图
var map = new ol.Map({
layers: [satlayer, satannolayer,vectorPoints, vectorLines, vectorPolygons],
target: 'map',
view:new ol.View({
center: [0, 0],
zoom: 3,
maxZoom: 18,
minZoom: 1
})
});
</script>
</html>转载自：https://blog.csdn.net/MASORL/article/details/78714221
