一、写在前面

在项目中往往使用地图作为底图(比如天地图卫星图等)，再其上覆盖你的通过geoserver发布自定义图层。本文记录了我的实现方法。

二、过程

2.1 我遇到的难题

遇到难题1：使用无人机拍摄制作的正射影像图有几百MB甚至1个G，直接展示图片方式会很卡顿。我的解决方法是，使用geoserver作为 GIS 地图服务，发布 GEO TIFF 图层，再在Openlayers 中展示。
遇到难题2：geoserver 默认未开启跨域支持，需要修改web.xml配置文件开启跨域支持。
遇到难题3：坐标系问题，无人机拍摄制作的正射影像图是EPSG:4326 坐标系的，要注意在 geoserver中的选择这个配置。配合合适的底图来使用。
遇到难题4：使用什么底图合适？无人机拍摄制作的正射影像图在地图展示会很突兀，在卫星图上展示比较合适，我选择了支持 EPSG:4326 坐标系的天地图

2.2 方法和步骤

整体来说，就是先制作正射影像图，发布成图层，并在 Web 前端展示的过程。

过程如下图所示：

图层说明

制作正射影像.TIFF 和发布图层的步骤:

1、无人机飞行 拍摄得到 正射影像照片
2、使用 大疆智图 生成 正射影像图.TIF
3、Geoserver 发布Geo TIFF图层

使用Geoserver发布图层的操作步骤：

1、添加工作区(工作空间)
2、添加存储仓库(数据源)并发布
3、添加图层

完成后，就可以通过 WMS 服务来使用图层了。

WMS服务：Web Map Service，⽹络地图服务或者⼜叫动态地图服务，是利⽤具有地理空间位置信息的数据制作地图，其中将地图定义为地理数据的可视化表现，能够根据⽤户的请求，返回相应的地图，包括PNG、GIF、JPEG等栅格形式，或者SVG或者WEB CGM等⽮量形式。WMS⽀持HTTP协议，所⽀持的操作是由URL决定的。

WMS基础知识参考：https://www.osgeo.cn/geoserver-user-manual/services/wms/basics.html

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

参考这篇文章：https://code84.com/739653.html

2.4 Geoserver 跨域的解决

我使用 jar 直接启动，仅修改 web.xml 即可。
参考这篇文章：https://www.bbsmax.com/A/QV5ZkjyZdy/

2.5 openlayers 作为客户端框架展示发布的图层

参考文章：
openlayers基础概念和使用：https://zhuanlan.zhihu.com/p/395609503?utm_id=0
openlayers快速开始：https://openlayers.org/doc/quickstart.html

三、我的代码

完整的代码参考如下：

import './style.css';
import {Map, View} from 'ol';
import {Tile as TileLayer} from 'ol/layer';
import {Image as ImageLayer} from 'ol/layer';

import OSM from 'ol/source/OSM';

import TileWMS from 'ol/source/TileWMS';
import ImageWMS from 'ol/source/ImageWMS'

import GeoTIFF from "ol/source/GeoTIFF";
import XYZ from "ol/source/XYZ";

var format = 'image/png';
var bounds = [102.98741086512345, 36.05409683075217,
              102.9959459772909, 36.063839197733444];

var tiandiKey = '你的天地图KEY';


var tiandiLayer = new TileLayer({
               visible: true,
               source: new XYZ({
                 visible: true,
                 url: `https://t7.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${tiandiKey}`,
                 // url: 'https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
               }),
               maxZoom: 19
             });

var untiled = new ImageLayer({
  source: new ImageWMS({
    ratio: 1,
    url: 'http://zyf:8080/geoserver/works/wms',
    params: {'FORMAT': format,
             'VERSION': '1.1.1',
          "STYLES": '',
          "LAYERS": 'works:massif_1667368218555_1',
          "exceptions": 'application/vnd.ogc.se_inimage',
    }
  })
});

var tiled = new TileLayer({
        visible: false,
        source: new TileWMS({
          url: 'http://zyf:8080/geoserver/works/wms',
          params: {'FORMAT': format,
                   'VERSION': '1.1.1',
                   tiled: true,
                "STYLES": '',
                "LAYERS": 'works:massif_1667368218555_1',
                "exceptions": 'application/vnd.ogc.se_inimage',
             tilesOrigin: 102.98741086512345 + "," + 36.05409683075217
          }
        })
      });



const map = new Map({
  target: 'map',
  layers: [
    // new TileLayer({
    //   source: new OSM()
    // }),
    tiandiLayer,
    untiled,
    tiled
  ],
  view: new View({
    projection: 'EPSG:4326',
    center: [102.98741086512345, 36.05409683075217],
    zoom: 2
  })
});

map.getView().fit(bounds, map.getSize());