文章目录

geoserver安装部署使用QGIS配准工具将图片转化为栅格地图通过geoserver地图服务发布tif地图新建工作区添加数据存储新建栅格数据源发布图层编辑图层预览图层 使用openlayers地图js库加载wmsopenlayers选型获取wms服务相关参数openlayer加载代码示例

geoserver安装部署

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

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

关于QGIS：一个免费的开源地理信息系统。配准步骤：/zxl761303248/article/details/110945610

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

新建工作区

添加数据存储

新建栅格数据源

发布图层

编辑图层

预览图层

使用openlayers地图js库加载wms

openlayers选型

参考：/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

由此可得：

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框架开发，可参考：/zxl761303248/article/details/110467758