OpenLayers 7.1.0中绘制的线段为何显示为非洲附近的绿色点？

我使用OpenLayers 7.1.0时遇到问题：绘制的线段本该连接美国（[-82, 42]）和意大利（[10, 45]），但实际渲染出的却是非洲附近的一个类似绿色点的短线段。以下是复现代码：

HTML代码 #

<link href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/7.1.0/ol.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/7.1.0/dist/ol.min.js"></script>

<div id="map"></div>

CSS代码 #

#map {
  height: 512px;
  width: 2424px;
}

JS代码 #

let coordinates = [
  [-82, 42],
  [10, 45]
];

const myFeature = new ol.Feature({
  geometry: new ol.geom.LineString(coordinates),
  name: "Line"
});

myFeature.setStyle(
  new ol.style.Style({ stroke: new ol.style.Stroke({ color: "green", width: 8 }) })
);

const vectorSource = new ol.source.Vector({
  features: [myFeature]
});

const vectorLayer = new ol.layer.Vector({
  source: vectorSource
});

const map = new ol.Map({
  target: "map",
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    vectorLayer
  ],
  view: new ol.View({
    center: [0, 0],
    zoom: 1
  })
});

问题原因与解决方案 #

原因 #

OpenLayers默认采用Web墨卡托投影（EPSG:3857），而你传入的是WGS84经纬度坐标（EPSG:4326，即常用的[经度, 纬度]格式）。直接将经纬度坐标作为Web墨卡托坐标使用，会导致坐标被错误解析，最终显示在非洲附近。

解决方法（两种任选其一） #

• 方法1：转换坐标格式
  使用ol.proj.fromLonLat()方法，将WGS84经纬度坐标转换为Web墨卡托坐标：

  let coordinates = [
    ol.proj.fromLonLat([-82, 42]), // 转换美国坐标
    ol.proj.fromLonLat([10, 45])   // 转换意大利坐标
  ];
  
  // 其余代码保持不变
  

• 方法2：给几何对象设置投影转换
  在创建LineString后，调用transform()方法完成投影转换：

  const myFeature = new ol.Feature({
    geometry: new ol.geom.LineString(coordinates).transform('EPSG:4326', 'EPSG:3857'),
    name: "Line"
  });
  

两种方法都能让线段正确显示在美国与意大利之间，解决坐标错位的问题。

内容的提问来源于stack exchange，提问作者Eric G