OpenLayers中用函数替代URL加载热力图，点位显示异常求助

问题场景 #

原本通过本地GeoJSON文件加载热力图显示正常，改用函数生成GeoJSON数据并通过ol.format.GeoJSON().readFeatures()加载到VectorSource后，热力点出现在地图随机位置。

原因分析 #

本地GeoJSON文件可能包含CRS投影信息，或者OpenLayers加载远程文件时自动处理了坐标投影转换；而你函数生成的GeoJSON使用的是WGS84（EPSG:4326）经纬度坐标，但地图通常采用Web墨卡托投影（EPSG:3857），直接读取时未做投影转换，导致坐标被错误解析。

解决方法 #

调用readFeatures()时，显式指定数据投影和目标投影，将WGS84坐标转换为地图使用的投影。

修正后的代码 #

function loadGeoJSONData() {
  const geoJSONData = {
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "properties": {
          "weight": 0.8
        },
        "geometry": {
          "coordinates": [-52.420033886945845, -26.868413221745136],
          "type": "Point"
        }
      }
    ]
  };
  return geoJSONData;
}

const heatMapPontosCalor = new ol.layer.Heatmap({
  source: new ol.source.Vector({
    features: new ol.format.GeoJSON().readFeatures(loadGeoJSONData(), {
      dataProjection: 'EPSG:4326', // 生成的GeoJSON数据使用的WGS84经纬度投影
      featureProjection: 'EPSG:3857' // 地图使用的Web墨卡托目标投影
    }),
  }),
  radius: 20,
  blur: 12,
  gradient: ['#0000FF', '#00FF00', '#FFFF00', '#FFA500', '#FF0000'],
  title: 'PontosCalor',
  visible: false,
});

补充说明 #

• 如果你的地图使用其他投影，将featureProjection替换为对应的EPSG代码即可。
• 本地文件加载时，OpenLayers会自动识别GeoJSON中的crs字段（若存在），或默认尝试转换为地图投影；手动生成数据则需要显式指定投影参数。

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