浅析OpenLayer3加载WMS一些问题

前一段时间一直被一个问题所困扰，作为GIS开发我们的核心竞争力在哪，如果只是搞一些api可替代性太大了，毫不技术可言，问了好多人无果，说法各持一方，最近也感觉理论知识，用处真的很大，WebGIS并不只是做出来一些效果就证明你技术很厉害，需要理论的内涵支撑，废话不多说，开车开车。

一、关于转换成tiff格式的一些问题

geoserver不支持将png格式的图片发布为服务，需要将png格式图片通过arcmap 替换成tiff格式进行保存具体做法

1、打开arcmap将图片拖入arcmap打开即可，

2、在打开的图片上进行点击→数据框属性→地理坐标(给图片加上坐标系）→地理配准

3、在图层框的你所加载的图片点击弹出对话框选择数据→数据数据导出（参数设置）→导出为tiff格式的

note:栅格大小控制导出的数据大小

二、关于Geoserver发布wms服务发布的问题

发布的过程：点击打开链接

SpecialNote:在定义坐标系的时候分为本机SRS和定义SRS两个设置框，本机SRS是图层本身自己坐标系无法更改，但是我们可以更改定义SRS,可以将其设为4326或者3857，因为这是OpenLayer支持的两个坐标系，当然你也可以选择不进行更改，选择默认的。如果选择默认就需要自己定义坐标系。

三、设为3857或4326和选择默认坐标加载方式

1、3857或4326

        var format = 'image/png';
        var untiled = new ol.layer.Image({
            source: new ol.source.ImageWMS({
                ratio: 1,
                url: 'http://localhost:8080/geoserver/unhpu/wms',
                params: {
                    'FORMAT': format,
                    'VERSION': '1.1.1',
                    STYLES: '',
                    LAYERS: 'unhpu:1',
                }
            })
        });
        var tiled = new ol.layer.Tile({
            visible: true,
            source: new ol.source.TileWMS({
                url: 'http://localhost:8080/geoserver/unhpu/wms',
                params: {
                    'FORMAT': format,
                    'VERSION': '1.1.1',
                    tiled: true,
                    STYLES: '',
                    LAYERS: 'unhpu:1', 
                }
            })
        });
        var map = new ol.Map({

            target: 'map',
            layers: [
              //untiled,
              tiled
            ],
            view: new ol.View({
                projection: 'EPSG:3857',
                center:[10,10],
                zoom:12
            })
        });

2、选择默认坐标

        var format = 'image/png';
        var bounds = [-0.5, -16533.5,
                      22440.5, 0.5];
        var untiled = new ol.layer.Image({
            source: new ol.source.ImageWMS({
                ratio: 1,
                url: 'http://localhost:8080/geoserver/unhpu/wms',
                params: {
                    'FORMAT': format,
                    'VERSION': '1.1.1',
                    STYLES: '',
                    LAYERS: 'unhpu:1',
                }
            })
        });
        var tiled = new ol.layer.Tile({
            visible: true,
            source: new ol.source.TileWMS({
                url: 'http://localhost:8080/geoserver/unhpu/wms',
                params: {
                    'FORMAT': format,
                    'VERSION': '1.1.1',
                    tiled: true,
                    STYLES: '',
                    LAYERS: 'unhpu:1',
                    tilesOrigin: -0.5 + "," + -16533.5
                }
            })
        });
        var projection = new ol.proj.Projection({
            code: 'EPSG:3857',//这里默认就不是3857，而是你默认的坐标系
            units: 'm',
            axisOrientation: 'neu',
            global: true
        });
        var map = new ol.Map({

            target: 'map',
            layers: [
             // untiled,
              tiled
            ],
            view: new ol.View({
                projection: projection,
            })
        });
       map.getView().fit(bounds, map.getSize());//非常重要

关于WMS这里选择两种加载方式

方式一、ol.layer.Image+ol.source.ImageWMS

方式二、ol.layer.Tile+ol.source+TileWMS

四、成果

五、总结

刚开始的由于不同这个问题浪费了快一天的时间，都没法解决，问了周围的人他们也不知道，归根结底是基础知识还不扎实，还需要更多的学习。

转载自：https://blog.csdn.net/weixin_40184249/article/details/81003026