绘制地理圆形

使用示例

点我查看代码

<script lang="ts" setup>
import { getOSMLayer, getRealCircleCoordinates, OlMap, wgs84ToMercator } from '@summeruse/ol'
import { Feature, Map as OLMap } from 'ol'
import { Polygon } from 'ol/geom'
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'

const olMap = new OLMap()
const center = [120, 30]
const formatCenter = wgs84ToMercator(center)
const circleCoordinates = getRealCircleCoordinates(
  center,
  100000,
  100,
)

const source = new VectorSource({
  features: [
    new Feature({
      geometry: new Polygon([circleCoordinates[0].map(item => wgs84ToMercator(item))]),
    }),
  ],
})
const layer = new VectorLayer({
  source,
  zIndex: 2,
})
olMap.addLayer(getOSMLayer())
olMap.addLayer(layer)
</script>

<template>
  <OlMap :ol-map class="w-100% h-300px" show-zoom :center="formatCenter" :zoom="6" />
</template>

源代码

点我查看代码

import type { Coordinate } from 'ol/coordinate'
import { getDestinationPoint } from '../calculate'

/**
 * 获取一个地理圆形的坐标点
 * @param coordinate 中心坐标 EPSG:4326 WGS84
 * @param radius  单位：米
 * @param  [sides] 边数
 * @returns 伪圆形坐标 EPSG:4326 WGS84
 */
export function getRealCircleCoordinates(coordinate: Coordinate, radius: number, sides: number = 60) {
  const points = []
  const step = 360 / sides
  for (let i = -180; i < 180; i = i + step) {
    points.push(getDestinationPoint(coordinate, radius, i))
  }
  return [points]
}