openlayer绘制多边形

叫我 Add V

已于 2024-01-03 10:25:45 修改

阅读量3.3k

点赞数

分类专栏： openlayer 相关文章标签： javascript 高德地图 vue

于 2022-03-28 09:42:32 首次发布

本文链接：https://blog.csdn.net/weixin_42776111/article/details/123787475

版权

openlayer 相关专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何使用OpenLayer在地图上绘制一个多边形，并详细解释了绘制过程中的关键步骤，包括创建多边形特征、设置样式以及添加到地图中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

openlayer 绘制多边形

	 /***
	  	绘制多边形
	  	points：多边形顶点组成的列表
	  */
      drawPolygon(points) {
        let layer = this.getLayerInMap(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
getLayerInMap(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
}