解决OpenLayers调用GeoServer图层时出现不对齐的问题

问题描述：

笔者在将GeoServer发布的WMS图层利用OpenLayers加载到地图上时出现地图和图层显示坐标系相同但不对应的情况，OpenLayers加载地图源坐标为EPSG:3857，在GeoServer中发布的本地图层投影坐标系也为EPSG:3857，添加调试信息并打印当前加入图层的坐标系和当前地图所用坐标系后，显示坐标系相同但图层和地图不能对应。

一、问题详细描述 

在GeoServer上发布WMS图层，未检测到本机SRS，为图层手动定义坐标系统为EPSG:3857，将发布的图层利用OpenLayers加载显示。

以下为JavaScript中添加GeoServer发布的图层到页面上的代码：

//添加geoserver图层
var wmsLayer = new ol.layer.Image({
    source: new ol.source.ImageWMS({
        url: 'http://localhost:8338/geoserver/geoserver/wms',//8338为笔者自己定义的端口号
        params: {
            'LAYERS': 'geoserver:china',//此处为 'LAYERS':'你的工作区名：你的图层名'
            'TILED': true,
        },
        serverType: 'geoserver',
        crossOrigin: 'anonymous'
    }),
});

笔者在HTML中采用checkbox复选框设置显示WMS图层的响应，代码如下：

 <input type="checkbox" id="china">
        <label for="china">显示地图</label>

在JavaScript中添加响应，当选中复选框后，显示WMS图层，代码如下：

// 图层控制监听复选框变化
    document.getElementById('china').addEventListener('change', function () {
        if (this.checked) {
            map.addLayer(wmsLayer);
        } else {
            map.removeLayer(wmsLayer);
        }
    });

加载结果如下图所示，显然坐标不对应。

 在JavaScript中添加如下调试代码，检验图层和地图所用的坐标系是否对应：

  // 调试信息：打印当前加入图层的坐标系和当前地图所用坐标系
    if (baseLayer instanceof ol.layer.Group) {
        console.log('当前加入图层的坐标系:', baseLayer.getLayers().item(0).getSource().getProjection().getCode());
    } else {
        console.log('当前加入图层的坐标系:', baseLayer.getSource().getProjection().getCode());
    }
    console.log('当前地图所用坐标系:', map.getView().getProjection().getCode());
}

在网页中点击F12→控制台，可以看到当前加入图层坐标系和地图所用坐标系相同。 

 笔者经过研究后得到如下解决方案，仅供参考。

二、解决方案建议

在ArcMap中打开发布的WMS图层，查看其属性发现该图层仍未定义坐标系，尽管在GeoServer中为其定义SRS，但实际上该图层的坐标系仍未Unknown，因此需要我们为该图层定义投影坐标。在ArcToolBox中的数据管理工具→投影和变换→定义投影，将该图层定义为WGS 1984 Web Mercator (Auxiliary Sphere)，即EPSG:3857对应的投影坐标系。

修改过后在GeoServer上发布，可以看到此时GeoServer上可以识别到图层的本机SRS，利用OpenLayers调用即可和地图重叠。

---

欢迎交流🌹🌹