GeoJSON对象无法在OpenLayers v6.15.1中渲染的解决方法咨询

问题原因 #

你的GeoJSON采用WGS84（EPSG:4326）经纬度坐标，而OpenLayers默认使用Web墨卡托投影（EPSG:3857）。Leaflet会自动完成坐标投影转换，但OpenLayers需要显式声明数据源的投影参数，否则会错误地将经纬度值当作Web墨卡托坐标渲染，导致图形位置偏移甚至无法显示。

需要修改的两处关键内容 #

1. 读取GeoJSON时指定投影参数
   在调用readFeatures方法时，明确指定数据源投影为EPSG:4326，目标投影为EPSG:3857，让OpenLayers自动完成坐标转换。
2. 调整地图视图的中心坐标
   使用ol.proj.fromLonLat将科威特的经纬度（[47.5, 29.3]左右）转换为Web墨卡托坐标，确保地图定位到目标区域。

修改后的完整代码 #

HTML

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

CSS

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

JavaScript

const kuwait = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: {
        type: "Polygon",
        coordinates: [
          [
            [47.974519077349896, 29.9758192001485],
            [48.18318851094448, 29.534476630159766],
            [48.09394331237642, 29.306299343375002],
            [48.416094191283946, 28.55200429942667],
            [47.708850538937384, 28.526062730416143],
            [47.45982181172283, 29.002519436147224],
            [46.568713413281756, 29.09902517345229],
            [47.30262210469096, 30.05906993257072],
            [47.974519077349896, 29.9758192001485]            
          ]
        ]
      }
    }
  ]
};

const styles = {
  Polygon: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: "blue",
      lineDash: [4],
      width: 3
    }),
    fill: new ol.style.Fill({
      color: "rgba(0, 0, 255, 0.1)"
    })
  })
};

const styleFunction = function (feature) {
  const featureType = feature.getGeometry().getType();
  return styles[featureType];
};

// 修改点1：读取GeoJSON时指定投影参数
const vectorSource = new ol.source.Vector({
  features: new ol.format.GeoJSON().readFeatures(kuwait, {
    dataProjection: 'EPSG:4326',
    featureProjection: 'EPSG:3857'
  })
});

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

// 修改点2：转换视图中心坐标并调整缩放级别
const map = new ol.Map({
  target: "map",
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    vectorLayer
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([47.5, 29.3]),
    zoom: 7
  })
});

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