OpenLayers 和 turf.js 的灵异事件：什么？我画的圆居然不是圆！

本文链接：https://blog.csdn.net/nudtcadet/article/details/102714494

事情的起因：

使用ol.geom.Circle这个几何可以在OpenLayers中画一个圆形的要素，虽然我们知道它并不是OGC标准的要素类型。

昨天群友找我解决一个有意思的问题：使用投影EPSG：3857的时候，在用ol.geom.Circle画了一个圆形的要素之后，又用turf.circle在同样的位置，用同样的半径画了一个圆形的要素。


var fCircleBeta = new Feature({
  geometry: new Circle([4500000, 4500000], 1000000
  )
})
vCircleSource.addFeature(fCircleBeta);



var circle = turf.circle(toLonLat([4500000, 4500000]), 1000000, { steps: 100, units: 'meters' });
var turfCircleFeatureNorth = (new GeoJSON()).readFeature(circle, {
  dataProjection: "EPSG:4326",
  featureProjection: "EPSG:3857"
});
vCircleSource.addFeature(turfCircleFeatureNorth);

结果却变成了这样：

！！！这是什么情况？

事情的处理：

我仔细观察了一下，叫他以0,0为圆心，再分别画两个圆。

然后就是这个样子（为了方便区分，特意将turf的正多边形逼近的圆减少了边数）：

基本重合了。

所以至此基本可以得到结论：turf是按照球面画圆的，ol是按照平面画圆的，当按照3857投影坐标系进行投影后，越靠近北极，形变越大，所以turf画的圆就投影为一个上宽下窄的、胖了一圈的“圆”。

为了证明此事，我还需要做一个实验。

真相大白：

实验的思路就是，以第一组的两个圆为例，监听鼠标移动事件，显示鼠标位置到[4500000,4500000]的距离。当我把鼠标分别放到两个“圆”的边上面时，大略就能计算得到“半径”。借了两个控件，简单写了一个鼠标位置的popup：


var pointerMoveHandler = function (evt) {
  if (evt.dragging) {
    return;
  }
  let radiusFlat = Math.sqrt(Math.pow((evt.coordinate[0] - 4500000), 2) + Math.pow((evt.coordinate[1] - 4500000), 2));
  let radiusSphere = olSphere.getDistance(toLonLat([4500000, 4500000]), toLonLat(evt.coordinate));
  tooltipElement.innerHTML = "鼠标坐标：" + evt.coordinate + "</br>" + "平面距离：" + radiusFlat + "</br>" + "球面距离：" + radiusSphere + "</br>";
  helpTooltip.setPosition(evt.coordinate);
  tooltipElement.classList.remove('hidden');
};
map.on('pointermove', pointerMoveHandler);

function createHelpTooltip() {
  if (tooltipElement) {
    tooltipElement.parentNode.removeChild(tooltipElement);
  }
  tooltipElement = document.createElement('div');
  tooltipElement.className = 'tooltip hidden';
  helpTooltip = new Overlay({
    element: tooltipElement,
    offset: [15, 0],
    positioning: 'center-left'
  });
  map.addOverlay(helpTooltip);
}

然后就得到了下面的结果：

可见我的猜想是正确的。

结论：

并非灵异事件，只是绘制方法不同罢了。如果做空间分析，还是turf靠谱一点，毕竟是接近实地距离的。如果使用OpenLayers的ol.geom.Circle类，也不见得错，只不过受到了3857坐标系投影造成的误差影响罢了——尽管看上去它才是正“圆”，但是到实地去真实测量到圆心距离的话，一定是小于理想半径的。