为什么我的线在非洲附近显示为绿点？

Question

演示问题的片段：

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
  })
});

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

<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>

坐标 [-82, 42] 在美国境内。 [10, 45] 在意大利。

渲染出来的是非洲附近的一条小线（看起来像个绿点）

我做错了什么？我正在使用 OpenLayers 7.1.0.

Answer 1

答案来自 OpenLayers FAQ 中的两个问题。

1. 为什么我的地图以几内亚湾（或非洲、海洋、空岛）为中心？

2. 为什么坐标的顺序是 [lon,lat]，而不是 [lat,lon]？

需要将坐标投影到Web Mercator中，使用

ol.proj.fromLonLat

功能可以轻松完成。

let coordinates = [
  ol.proj.fromLonLat( [-82, 42] ),
  ol.proj.fromLonLat( [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
  })
});

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

<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>

另一个选项是将视图的投影更改为 EPSG:4326。那么，经纬度坐标不用转换就可以使用了

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({
    projection: 'EPSG:4326',
    center: [0, 0],
    zoom: 1
  })
});

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

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

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

Answer 2

除了@Eric G 列出的 2 个选项之外，还有第三个选项，即在应用程序开始时调用

ol.proj.useGeographic()

，以便所有坐标都被视为经度、纬度。

ol.proj.useGeographic();

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
  })
});

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

<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>