openLayers实战(七)：根据坐标信息绘制圆形_openlayer绘制圆并标注出半径

引入所需的库和模块

在代码的开头，确保正确导入 Turf.js 和 OpenLayers 的库和模块。例如：

import * as turf from '@turf/turf';
import GeoJSON from 'ol/format/GeoJSON';
import { Feature } from 'ol';

这将确保你可以使用 Turf.js 中的 circle 函数，并正确操作 OpenLayers 中的相关对象。

创建圆形对象并添加到矢量源中

var options = { units: "meters" };
var circle = turf.circle(center, radius, options);
var circleFeature = new Feature({
  geometry: new GeoJSON().readGeometry(circle.geometry)
});
vectorSource.addFeature(circleFeature);

使用 Turf.js 的 circle 函数创建圆形对象，并保存在 circle 变量中。然后，使用 OpenLayers 的 GeoJSON 类将圆形对象转换为 OpenLayers 的几何对象，并将其包装在一个 Feature 中。最后，将该 Feature 添加到矢量源 (vectorSource) 中。

为何圆形扁扁的

因为你使用的地图投影不是球形而是椭球形的。在球形地球上，绘制的圆会是一个完美的圆形，但当我们在地图上使用椭球形投影时，圆形会变得扁扁的。

地图投影的目的是将球形地球表面展示在二维平面上，但由于地球的形状是椭球形的，所以无法完美地展示。椭球形投影在将球面投影到平面时，会引入形变和扭曲，导致圆形变形。

要解决这个问题，你可以尝试使用一个更适合的地图投影，例如使用球面墨卡托投影。球面墨卡托投影是一种常见的投影方式，它可以在保持形状不变的同时，将地球表面展示在平面上。

使用球面墨卡托投影时，你可能需要注意调整代码中的投影设定。确保设置正确的投影参数和地理坐标系，以及正确的单位，以获得更准确的圆形。

记住，在地图展示上，我们无法完美地呈现地球的真实形状，追求完美的圆形可能并不现实。但可以尽量通过选择合适的地图投影和调整参数，使其更贴近实际形状。