使用geoserver发布tif栅格地图并使用openlayers加载

geoserver安装部署

• 关于geoserver： GeoServer实施行业标准的OGC协议，例如Web功能服务（WFS），Web地图服务（WMS）和Web Coverage服务（WCS）。其他格式和发布选项可作为扩展使用，包括Web处理服务（WPS）和Web地图图块服务（WMTS）。
• 安装部署步骤： https://blog.csdn.net/zxl761303248/article/details/110533940

使用QGIS配准工具将图片转化为栅格地图

• 关于QGIS： 一个免费的开源地理信息系统。
• 配准步骤： https://blog.csdn.net/zxl761303248/article/details/110945610

通过geoserver地图服务发布tif地图

新建工作区

添加数据存储

新建栅格数据源

发布图层

编辑图层

预览图层

使用openlayers地图js库加载wms

openlayers选型

参考：https://blog.csdn.net/zxl761303248/article/details/110520310

获取wms服务相关参数

将以上预览地图地址解码：
http://192.168.37.85:9090/geoserver/zxl/wms?
service=WMS&version=1.1.0
&request=GetMap
&layers=zxl:zxl_tif_6
&bbox=-1078.0454581182594,-954.7562752129634,6180.5753625258385,6081.378083495683
&width=768
&height=744
&srs=EPSG:3857
&styles=
&format=application/openlayers
由此可得：

WMS服务URL	图层名称	地理坐标系code	minX	minY	maxX	maxY
http://192.168.37.85:9090/geoserver/zxl/wms	zxl:zxl_tif_6	EPSG:3857	-1078.0454581182594	-954.7562752129634	6180.5753625258385	6081.378083495683

openlayer加载代码示例

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import TileWMS from 'ol/source/TileWMS';
import Projection from 'ol/proj/Projection';

this.map = new Map({
   target: 'map',
   layers: [
       new TileLayer({
           source: new TileWMS({
               url: 'http://192.168.37.85:9090/geoserver/zxl/wms',
               params: {
                   "LAYERS": 'zxl:zxl_tif_6'
               }
           })
       })
   ],
   view: new View({
       projection: new Projection({
           code: 'EPSG:3857',
           units: 'm'
       })
   })
});
this.map.getView().fit([-1078.0454581182594, -954.7562752129634,
   6180.5753625258385, 6081.378083495683], this.map.getSize());

当前代码基于angular框架开发，可参考：https://blog.csdn.net/zxl761303248/article/details/110467758