React+OpenLayers添加Shapefile后地图倾斜问题求助

在React项目中使用OpenLayers，先加载底图再叠加GeoTiff图层，添加Zip格式的Shapefile作为额外图层后功能正常，但整个地图出现倾斜，如何避免该问题？

前后对比截图 #

• 添加Shapefile前：
• 添加Shapefile后：

相关代码 #

const [shape, setShape] = useState(null);
const [layer, setLayer] = useState(null);
const [showShape, setShowShape] = useState(false);
const [map, setMap] = useState(null);

async function loadShapefile(src) {
  // Load the shapefile data
  const content = await shp(src);
  const geoJSON = new GeoJSON();
  const features = geoJSON.readFeatures(content);
  const projection = geoJSON.readProjection(content);

  // Create a vector layer to display the features
  const vectorSource = new VectorSource({ features });

  const vectorLayer = new VectorLayer({ source: vectorSource });
  return [vectorLayer, vectorSource, projection];
}

const renderShp = async () => {
  setShowLoader(true);
  const [layer, vectorSource, projection] = await loadShapefile(shape);

  map.addLayer(layer);
  const extent = vectorSource.getExtent();
  // Transform the extent from the Shapefile projection to the map projection
  const viewConfig = {
    projection,
    center: getCenter(extent),
    zoom: 2
  };

  map.setView(new View(viewConfig));

  map.getView().fit(extent, {
    padding: [50, 50, 50, 50], // Adjust the padding as desired
  });
  setShowLoader(false);
};

useEffect(() => {
  // Remove any existing vector layers from the map
  if (!map) return;
  map.getLayers().forEach((existingLayer) => {
    if (existingLayer instanceof VectorLayer) {
      map.removeLayer(existingLayer);
    }
  });
  if (shape) renderShp();
  else {
    // set view back to the geotiff
    map.setView(layer.getSource().getView().then(getViewConfig(map)));
  }
}, [shape]);

shp函数来自脚本：https://unpkg.com/shpjs@latest/dist/shp.js

解决办法 #

问题根源 #

添加Shapefile后地图倾斜，是因为你将地图View的投影直接设置为了Shapefile的投影，而底图和GeoTiff图层使用的是另一种投影（比如Web墨卡托EPSG:3857），不同投影坐标系的叠加会导致地图显示变形倾斜。

修正步骤 #

1. 保持地图投影统一：不要修改View的投影，始终使用底图和GeoTiff的目标投影（比如EPSG:3857，这是OpenLayers默认投影）。
2. 转换Shapefile要素到目标投影：读取Shapefile时，将要素的坐标系转换为地图的目标投影，而不是让View适配Shapefile的投影。
3. 修正Extent的投影转换：在调用fit方法前，确保Shapefile的Extent已经转换到地图投影。

修改后的关键代码 #

// 定义地图的目标投影，与底图/GeoTiff保持一致，这里用OpenLayers默认的EPSG:3857
const targetProjection = 'EPSG:3857';

async function loadShapefile(src) {
  const content = await shp(src);
  const geoJSON = new GeoJSON();
  // 读取要素时直接转换到目标投影
  const features = geoJSON.readFeatures(content, {
    dataProjection: geoJSON.readProjection(content),
    featureProjection: targetProjection
  });

  const vectorSource = new VectorSource({ features });
  const vectorLayer = new VectorLayer({ source: vectorSource });
  return [vectorLayer, vectorSource];
}

const renderShp = async () => {
  setShowLoader(true);
  const [layer, vectorSource] = await loadShapefile(shape);

  map.addLayer(layer);
  const extent = vectorSource.getExtent();
  
  // 直接使用当前View的投影适配范围，无需新建View
  map.getView().fit(extent, {
    padding: [50, 50, 50, 50],
    maxZoom: 10 // 可根据需求设置最大缩放级别
  });
  setShowLoader(false);
};

useEffect(() => {
  if (!map) return;
  map.getLayers().forEach((existingLayer) => {
    if (existingLayer instanceof VectorLayer) {
      map.removeLayer(existingLayer);
    }
  });
  if (shape) renderShp();
  else {
    // 恢复到GeoTiff的视图，确保投影一致
    const geoTiffExtent = layer.getSource().getExtent();
    map.getView().fit(geoTiffExtent, { padding: [50,50,50,50] });
  }
}, [shape]);

额外说明 #

• 若不确定底图投影，可通过map.getView().getProjection()获取当前地图的投影信息。
• 如果Shapefile使用的是罕见投影，需要引入proj4库并注册该投影，确保OpenLayers能正确进行坐标转换。

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