前一段时间一直被一个问题所困扰，作为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

四、成果

五、总结

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