OpenLayers绘制五角星

安装依赖

npm install ol@8.1.0

核心代码

 drawInteraction = new Draw({
    'type': 'Circle',
    'source': featureLayer.getSource(),
    'features': drawFeatures,
    geometryFunction: function(coordinates, geometry) {
      const center = coordinates[0]
      const last = coordinates[coordinates.length - 1]
      const dx = center[0] - last[0]
      const dy = center[1] - last[1]
      const radius = Math.sqrt(dx * dx + dy * dy)
      const rotation = Math.atan2(dy, dx)
      const newCoordinates = []
      const numPoints = 10
      for (let i = 0; i < numPoints; ++i) {
        const angle = rotation + (i * 2 * Math.PI) / numPoints
        const fraction = i % 2 === 0 ? 1 : 0.5
        const offsetX = radius * fraction * Math.cos(angle)
        const offsetY = radius * fraction * Math.sin(angle)
        newCoordinates.push([center[0] + offsetX, center[1] + offsetY])
      }
      newCoordinates.push(newCoordinates[0].slice())
      if (!geometry) {
        geometry = new Polygon([newCoordinates])
      } else {
        geometry.setCoordinates([newCoordinates])
      }
      return geometry
    },
    'finishCondition': function(res) {
      drawInteraction.finishDrawing()
      drawInteraction.setActive(false)
      console.log('绘制完成，绘制的图形：')
      console.log(drawFeatures)
    }
  })
  map.addInteraction(drawInteraction)
}

完整实现

import 'ol/ol.css'
import * as control from 'ol/control'
import { Map, View } from 'ol/index'
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'
import { Vector as VectorSource, XYZ } from 'ol/source'
import { Fill, Stroke, Style, Circle as CircleStyle } from 'ol/style'
import { Draw } from 'ol/interaction'
import { Polygon } from 'ol/geom'

var map
var featureLayer
 // 初始化
function init () {
	map = initMap() // 初始化地图
	featureLayer = addLayer() // 初始化地图
}

// 初始化地图
function initMap() {
  map = new Map({
    target: 'map',
    controls: control.defaults({ attribution: false, zoom: true, rotate: true }),
    view: new View({
      center: [119, 32],
      maxZoom: 21,
      zoom: 8,
      minZoom: 7,
      projection: 'EPSG:4326'
    })
	return map 
})
 // 添加图层
function addLayer (map, projection ='EPSG:3857'') {
	  const xyzLayer = new TileLayer({  // 添加高德地图图层
	    source: new XYZ({
	      url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
	    }),
	    projection:projection 
	  })
	  map.addLayer(xyzLayer)
}

 
 

  const featureStyle = new Style({
    stroke: new Stroke({
      color: 'rgba(255,0,0, 1)',
      width: 2
    }),
    fill: new Fill({
      color: 'rgba(255,255,0, 0.5)'
    }),
    image: new CircleStyle({
      radius: 8,
      fill: new Fill({
        color: 'blue'
      }),
      stroke: new Stroke({
        color: 'white',
        width: 8
      })
    })
  })
  // 创建一个矢量图层，用于添加要素（多边形、圆形、线段）
  featureLayer = new VectorLayer({
    id: 'eguid-marker',
    zIndex: 1,
    source: new VectorSource({
      features: []
    }),
    style: featureStyle,
    visible: true // 是否显示图层，默认true
  })
  map.addLayer(featureLayer)
}
var drawInteraction
var drawFeatures = []// 用于存储绘制的图形
var radius = 50
var vertices = 5

// 手绘图形
function drawGeometry() {
  if (drawInteraction != null) {
    map.removeInteraction(drawInteraction)
  }
  drawFeatures = []
  drawInteraction = new Draw({
    'type': 'Circle',
    'source': featureLayer.getSource(),
    'features': drawFeatures,
    geometryFunction: function(coordinates, geometry) {
      const center = coordinates[0]
      const last = coordinates[coordinates.length - 1]
      const dx = center[0] - last[0]
      const dy = center[1] - last[1]
      const radius = Math.sqrt(dx * dx + dy * dy)
      const rotation = Math.atan2(dy, dx)
      const newCoordinates = []
      const numPoints = 10
      for (let i = 0; i < numPoints; ++i) {
        const angle = rotation + (i * 2 * Math.PI) / numPoints
        const fraction = i % 2 === 0 ? 1 : 0.5
        const offsetX = radius * fraction * Math.cos(angle)
        const offsetY = radius * fraction * Math.sin(angle)
        newCoordinates.push([center[0] + offsetX, center[1] + offsetY])
      }
      newCoordinates.push(newCoordinates[0].slice())
      if (!geometry) {
        geometry = new Polygon([newCoordinates])
      } else {
        geometry.setCoordinates([newCoordinates])
      }
      return geometry
    },
    'finishCondition': function(res) {
      drawInteraction.finishDrawing()
      drawInteraction.setActive(false)
      console.log('绘制完成，绘制的图形：')
      console.log(drawFeatures)
    }
  })
  map.addInteraction(drawInteraction)
}
function clearFeature() {
  featureLayer.getSource().clear()
}

效果展示