# 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
}