# openlayer 绘制多边形
openlayer 绘制多边形
/***
绘制多边形
points:多边形顶点组成的列表
*/
drawPolygon(points) {
let layer = this.getLayerFromMap(this.map, 'polygon') // 先查看一下之前是否存在,如果存在先移除
if (layer) {
this.map.removeLayer(layer)
}
let features = []
var polygon = new Polygon([points])
var feature = new Feature(polygon)
features.push(feature)
var vectorSource = new VectorSource()
vectorSource.addFeatures(features)
const styleFunction = function (feature) {
return new Style({
fill: new Fill({
color: [255, 255, 255, 0.33]
}),
stroke: new Stroke({
width: 2,
color: '#dc5246'
}),
text: new Text({
font: '10px Microsoft YaHei',
text: '多边形',
overflow: true,
textAlign: 'center', // 对齐方式
textBaseline: 'middle', // 文本基线
fill: new Fill({
color: '#0e84ba'
}),
offsetX: 0
})
})
}
var vlayer = new VectorLyr({
title: 'polygon',
source: vectorSource,
style: styleFunction
})
this.map.addLayer(vlayer)
},
获取地图是否存在图层的函数。
// 根据图层title获取地图图层,如果有就返回图层,没有就返回null
getLayerFromMap(map, name) {
var layers = map.getLayers() // 获取地图所有图层
var layer = null
layers.forEach((item, index) => {
if (item.values_.title !== undefined) {
if (item.values_.title === name) {
layer = item
return layer
}
}
})
return layer
}