前端地图对接 GeoServer 时最常见的问题是到底该用 WMS、WFS 还是 WMTS这三个都是 GIS 里常见的标准服务但定位完全不同。如果选错可能会出现性能差、拿不到属性、缓存不更新、点选不好做、坐标偏移等问题。这篇文章从前端业务开发视角说明三者区别以及在实际项目中应该怎么组合使用。一、先记住一句话WMS 地图图片。 WFS 要素数据。 WMTS 瓦片图片。更工程化一点WMS 前端给 GeoServer 一个 bboxGeoServer 临时渲染一张图片。 WFS 前端向 GeoServer 要真实要素数据返回 GeoJSON/GML 等。 WMTS 前端按固定瓦片行列号拿地图小图片适合缓存。二、WMS 是什么WMS 全称 Web Map Service。它返回的是图片。典型请求/geoserver/example_ws/wms ?serviceWMS version1.1.0 requestGetMap layersexample_ws:biz_lines styles bbox... width800 height600 srsEPSG:3857 formatimage/png transparenttrue前端告诉 GeoServer我要哪个图层。 我要哪个地图范围。 我要多大的图片。 我要哪个坐标系。 我要什么图片格式。GeoServer 做查询 PostGIS。 按样式渲染。 返回 PNG/JPEG 图片。WMS 适合显示业务基础图层。 调试图层是否能出图。 用 CQL_FILTER 做简单过滤。 图层数据经常变化但访问量不夸张。WMS 不适合直接拿属性数据。 前端自己控制每个要素的复杂样式。 超高并发的大范围底图浏览。因为 WMS 返回的是图片所以前端无法直接从图片里拿到id code name status geometry如果要拿属性要使用 WFS或者调用后端业务 API。三、WFS 是什么WFS 全称 Web Feature Service。它返回的是要素数据。常见请求/geoserver/example_ws/ows ?serviceWFS version1.1.0 requestGetFeature typeNameexample_ws:biz_points outputFormatapplication/json srsNameEPSG:4326返回通常是 GeoJSON{type:FeatureCollection,features:[{type:Feature,id:biz_points.10,geometry:{type:Point,coordinates:[120.12,30.26]},properties:{id:10,code:P001,status:normal}}]}WFS 适合点选对象后查询属性。 按 id 查询一个对象。 前端自己画高亮。 编辑前拉取对象 geometry。 小范围加载矢量数据。WFS 不适合大范围一次性加载海量点线。 替代后端业务查询接口。 暴露敏感字段。 绕过系统权限直接给所有人访问。如果 WFS 对公网开放要特别注意字段和权限。因为 WFS 返回的是真实数据不是图片。四、WMTS 是什么WMTS 全称 Web Map Tile Service。它返回的是瓦片图片。典型请求参数serviceWMTS requestGetTile layerexample_ws:biz_lines tilematrixsetEPSG:3857 tilematrix12 tilecol... tilerow... formatimage/pngWMTS 的核心是“固定切片规则”。前端地图在某个缩放级别下会把世界切成很多固定行列的小瓦片。每次拖动地图时只请求当前视口需要的瓦片。WMTS 适合大范围地图浏览。 稳定图层。 高并发访问。 可以接受缓存延迟的业务图层。 底图、影像、行政区划、基础管网。WMTS 不适合频繁变化的数据。 实时轨迹。 任务对象即时高亮。 大量动态 CQL_FILTER。 每次用户看到的内容都不同的权限图层。原因是 WMTS 强依赖缓存。数据更新后如果缓存没清前端可能继续看到旧瓦片。五、WMS 和 WMTS 的关键区别可以这样对比WMS 按 bbox 实时渲染一张图。 WMTS 按 tilematrix/tilecol/tilerow 获取固定瓦片。WMS 的特点灵活。 实时性好。 适合调试。 适合临时过滤。 每次请求都可能触发查询和渲染。WMTS 的特点速度快。 缓存友好。 适合大范围浏览。 瓦片规则固定。 数据更新后需要清缓存。选择建议开发调试 WMS。 后台管理低并发 WMS。 正式大屏或高频浏览 WMTS。 数据频繁变化 慎用 WMTS。 稳定底图或基础管网 WMTS 更合适。六、前端如何分层一个前端地图页面可以这样设计底图层 第三方底图或自有 WMTS。 业务基础层 GeoServer WMS/WMTS例如点、线、面。 高亮层 前端 VectorLayer显示选中对象、搜索结果、任务对象。 绘制层 前端 Draw/Modify 交互用于框选、测距、编辑。不要把所有内容都用一种服务承载。推荐分工全量显示 WMS / WMTS。 少量对象高亮 WFS 拉 GeoJSON 后前端自己画。 属性详情 后端业务 API。 统计分析 后端业务 API。 实时轨迹 前端矢量图层或专门实时接口。七、OpenLayers 接 WMS 示例示例代码constlineLayernewol.layer.Image({source:newol.source.ImageWMS({url:http://geoserver.example.com/geoserver/example_ws/wms,params:{LAYERS:example_ws:biz_lines,FORMAT:image/png,TRANSPARENT:true},ratio:1,serverType:geoserver})});适合显示一整层业务线。 地图拖动时按当前视口请求图片。如果要按条件过滤lineLayer.getSource().updateParams({CQL_FILTER:status \normal\});注意CQL 字段名必须是 GeoServer 图层属性里的字段名。八、OpenLayers 接 WFS 示例WFS 返回 GeoJSON前端可以自己绘制样式consturlhttp://geoserver.example.com/geoserver/example_ws/ows?serviceWFSversion1.1.0requestGetFeaturetypeNameexample_ws:biz_linesoutputFormatapplication/jsonsrsNameEPSG:4326CQL_FILTERid10;fetch(url).then(resres.json()).then(geojson{constfeaturesnewol.format.GeoJSON().readFeatures(geojson,{dataProjection:EPSG:4326,featureProjection:EPSG:3857});constsourcenewol.source.Vector({features});consthighlightLayernewol.layer.Vector({source,style:newol.style.Style({stroke:newol.style.Stroke({color:#ff3b30,width:4})})});map.addLayer(highlightLayer);});这里的重点是WFS 输出 EPSG:4326。 OpenLayers 地图视图通常是 EPSG:3857。 readFeatures 时要声明 dataProjection 和 featureProjection。九、前端点选对象怎么做常见有两种方案。方案一WMS GetFeatureInfo。用户点击地图时前端根据点击位置向 WMS 发GetFeatureInfo请求GeoServer 返回点击位置附近对象属性。适合基础点选。 图层主要通过 WMS 展示。 不想额外拉 WFS。缺点依赖 WMS 图层渲染。 返回字段和格式要额外处理。 复杂业务详情仍然要调后端。方案二后端 API 或 WFS 查询。前端点击后根据坐标和容差范围调用后端接口或者用 WFS 做 bbox/filter 查询。适合业务详情复杂。 需要权限过滤。 需要统一返回格式。 需要查关联对象。业务系统里通常更推荐后端 API因为它能统一业务规则。十、坐标系注意事项前端最常见坐标系是EPSG:4326 经纬度。 EPSG:3857 Web Mercator互联网地图显示常用。后端或数据库可能使用本地投影坐标系例如EPSG:4549推荐分工前端和后端接口传参 EPSG:4326。 前端地图 View EPSG:3857。 PostGIS 计算 使用适合本地的投影坐标。 GeoServer 图层原始 SRS 按数据库真实 SRID。特别注意WMS 请求 srsEPSG:3857 时bbox 必须是 EPSG:3857。 WFS 输出 srsNameEPSG:4326 时geometry.coordinates 才是经纬度。 数据库普通 x/y 字段不会因为 WFS srsName 自动改变。十一、样式放前端还是 GeoServer取决于用什么服务。如果用 WMS / WMTS样式主要在 GeoServer。 前端拿到的是图片。如果用 WFS样式主要在前端。 前端拿到的是 GeoJSON。推荐混合稳定基础样式 放 GeoServer。 动态交互样式 放前端。例如普通管线、普通设备 GeoServer 样式。 选中对象、搜索结果、任务对象 前端样式。十二、缓存怎么影响前端如果前端使用 WMTS 或 tiled WMS可能走 GeoWebCache。表现数据库已经更新。 WFS 查出来是新坐标。 普通 WMS 也是新图。 但前端地图仍然显示旧位置。这通常是瓦片缓存没有清理。处理方式GeoServer 后台进入 Tile Caching。 找到对应图层。 执行 Truncate。 必要时重新 Seed。正式项目里更建议后端在数据导入或编辑成功后自动调用 GeoWebCache REST API 清理受影响 bbox 的瓦片。十三、最终建议前端对接 GeoServer 时建议这样选全量基础业务图层 WMS 起步性能压力大后改 WMTS。 单个对象查询和高亮 WFS 或后端 API。 属性详情 后端 API。 统计分析 后端 API。 实时轨迹和编辑态 前端矢量图层。一句话总结WMS/WMTS 负责“看地图”。 WFS 负责“拿空间对象”。 后端 API 负责“懂业务”。 前端负责“交互体验”。