OpenLayers加载GeoJSON图层尺寸异常问题求助

我尝试用OpenLayers展示在QGIS中基于非地理图像（虚构游戏世界的2D图像）绘制的道路要素，导出的GeoJSON标注了EPSG:3857坐标系，单个要素示例如下：

{"type": "FeatureCollection",
"name": "roads",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::3857" } },
"features": [
{ "type": "Feature", "properties": { "id": 1, "name": "Prospect Way", "type": "medium", "fwy": null }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 611.149016387208121, -4979.219450327811501 ], [ 705.113328259223067, -4984.793604421914097 ], [ 796.954152857294275, -4983.997296694185025 ], [ 899.943285643570562, -4978.954014418568477 ], [ 1019.654880712154409, -4970.990937141278664 ], [ 1172.015092617624987, -4972.05268077825076 ], [ 1256.423711756892772, -4979.219450327810591 ], [ 1326.49879179703953, -4979.750322146296639 ], [ 1430.018796401801865, -4978.954014418567567 ] ] ] } }

这些要素是在QGIS中叠加在2D图像上绘制的非地理数据，在OpenLayers中加载时显示为画面中央的极小点，需放大才能查看，但单独加载图像图层显示正常。我已尝试调整投影等设置仍未解决，GeoJSON中Y轴为负是QGIS栅格图像的坐标特性，我的代码如下：

const extent = [0, 0, 4532, -5754];

const projection= new ol.proj.Projection({
            units: "pixels",
            extent: extent
        })

const image = new ol.layer.Image({
      source: new ol.source.ImageStatic({
        url: '/static/assets/geo/boulderbeta2.png',
        imageSize: [4532, 5754],
        projection: projection,
        imageExtent: extent

      })
    })


const roads = new ol.layer.Vector({
    title: 'Roads',
    source: new ol.source.Vector({
        url: '/static/assets/geo/roads.geojson',
        format: new ol.format.GeoJSON()
      })
  })
image.setZIndex(0);
roads.setZIndex(1);


roads.setStyle([
    new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: '#d21212',
            width: 2
         })
     })
 ]);



var map = new ol.Map({
    target: 'map',
    layers: [image,roads],
    view: new ol.View({
        projection: projection,
        center: ol.extent.getCenter(extent),
        zoom: 1.5,
        minZoom: -1,
        maxZoom:100
    }),
});

编辑：补充了图像图层和投影代码。

问题核心是GeoJSON的坐标系声明和你自定义的像素投影不匹配。虽然GeoJSON标注了EPSG:3857，但你的数据实际是像素坐标，OpenLayers会默认把EPSG:3857坐标当作真实Web墨卡托地理坐标处理，导致像素级坐标被缩放到极小地理范围，所以显示成中央小点。

直接修改代码即可解决，不用改动GeoJSON文件：

const roads = new ol.layer.Vector({
    title: 'Roads',
    source: new ol.source.Vector({
        url: '/static/assets/geo/roads.geojson',
        format: new ol.format.GeoJSON({
            dataProjection: projection, // 声明GeoJSON数据的投影为自定义像素投影
            featureProjection: projection // 转换到地图使用的投影（与数据投影一致）
        })
      })
  })

额外检查点：

• 确认GeoJSON坐标范围在你的extent内（示例中X在600-1400，Y在-4900左右，符合0-4532和-5754-0的范围）
• 若仍有显示问题，可尝试把初始zoom值调小，比如设为zoom: 0

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