07-前端地图工程接入-OpenLayers-Leaflet-MapLibre叠加GeoServer

GeoServer 图层发布成功后下一步就是前端地图怎么用。前端不是简单地把一个 URL 放到页面上。一个可维护的地图页面通常要处理底图。 业务图层。 图层显隐。 坐标转换。 点选查询。 高亮展示。 绘制编辑。 缓存策略。 权限和配置。这篇文章以通用示例说明前端如何接 GeoServer。一、推荐前端图层结构一个业务地图页面建议分层Base Layer 底图例如 OSM、Google Map、天地图、Mapbox。 Business WMS/WMTS Layer 业务基础图层例如全量点、线、面。 Highlight Vector Layer 高亮层例如搜索结果、选中对象、任务对象。 Draw/Edit Layer 绘制编辑层例如框选区域、测距线、新增点线。 Popup/UI Layer 弹窗、浮层、属性面板。为什么要分层基础图层追求性能。 高亮图层追求交互灵活。 编辑图层追求状态可控。 业务详情追求权限和字段可控。不要把所有内容都塞进一个 WMS 图层也不要把全量大数据都拉成前端矢量。二、前端配置不要写死建议把 GeoServer 相关配置集中管理exportconstmapConfig{geoserverBaseUrl:http://geoserver.example.com/geoserver,workspace:example_ws,pointLayer:example_ws:biz_points,lineLayer:example_ws:biz_lines,dataProjection:EPSG:4326,viewProjection:EPSG:3857,useTile:false};这样做的好处环境切换方便。 租户切换方便。 图层改名影响范围小。 迁移到新项目时不用满页面搜索 URL。正式项目里可以由后端返回地图配置GET /map/config返回{geoserverBaseUrl:http://geoserver.example.com/geoserver,workspace:example_ws,layers:{points:example_ws:biz_points,lines:example_ws:biz_lines},projection:{data:EPSG:4326,view:EPSG:3857}}三、OpenLayers 接 WMSOpenLayers 对 WMS 支持很好。示例constlineWmsLayernewol.layer.Image({source:newol.source.ImageWMS({url:${mapConfig.geoserverBaseUrl}/${mapConfig.workspace}/wms,params:{LAYERS:mapConfig.lineLayer,FORMAT:image/png,TRANSPARENT:true},serverType:geoserver,ratio:1})});map.addLayer(lineWmsLayer);适合全量线图层。 后台管理图层。 数据需要相对实时。 调试阶段。动态过滤lineWmsLayer.getSource().updateParams({CQL_FILTER:status normal});清除过滤lineWmsLayer.getSource().updateParams({CQL_FILTER:null});四、OpenLayers 接 WMTSWMTS 适合缓存瓦片。示意代码constwmtsLayernewol.layer.Tile({source:newol.source.WMTS({url:${mapConfig.geoserverBaseUrl}/gwc/service/wmts,layer:mapConfig.lineLayer,matrixSet:EPSG:3857,format:image/png,projection:EPSG:3857,tileGrid:newol.tilegrid.WMTS({origin:ol.extent.getTopLeft(ol.proj.get(EPSG:3857).getExtent()),resolutions:resolutions,matrixIds:matrixIds}),style:})});实际项目里resolutions和matrixIds要和 GeoServer/GeoWebCache 的 gridset 对齐。WMTS 适合大范围稳定图层。 访问频率高。 希望减少 GeoServer 实时渲染压力。不适合频繁编辑的业务图层。 实时轨迹。 不同用户看到完全不同数据的图层。五、OpenLayers 接 WFSWFS 返回 GeoJSON适合少量对象和高亮。asyncfunctionloadFeatureById(id){consturl${mapConfig.geoserverBaseUrl}/${mapConfig.workspace}/ows?serviceWFSversion1.1.0requestGetFeaturetypeName${encodeURIComponent(mapConfig.lineLayer)}outputFormatapplication/jsonsrsNameEPSG:4326CQL_FILTER${encodeURIComponent(id${id})};constgeojsonawaitfetch(url).then(resres.json());constfeaturesnewol.format.GeoJSON().readFeatures(geojson,{dataProjection:EPSG:4326,featureProjection:EPSG:3857});highlightSource.clear();highlightSource.addFeatures(features);}高亮层consthighlightSourcenewol.source.Vector();consthighlightLayernewol.layer.Vector({source:highlightSource,style:newol.style.Style({stroke:newol.style.Stroke({color:#ff3b30,width:4}),image:newol.style.Circle({radius:6,fill:newol.style.Fill({color:#ff3b30}),stroke:newol.style.Stroke({color:#ffffff,width:2})})})});map.addLayer(highlightLayer);六、Leaflet 接 WMSLeaflet 接 WMS 也很直接constlineLayerL.tileLayer.wms(http://geoserver.example.com/geoserver/example_ws/wms,{layers:example_ws:biz_lines,styles:,format:image/png,transparent:true,version:1.1.0});lineLayer.addTo(map);Leaflet 默认使用 Web Mercator 显示。如果接的是常见互联网底图通常能比较自然地叠加 WMS。但如果业务数据是本地投影坐标系要确保 GeoServer 能正确把图层转换到地图显示坐标。七、Leaflet 接 WFSLeaflet 可以直接加载 GeoJSONfetch(http://geoserver.example.com/geoserver/example_ws/ows?serviceWFSversion1.1.0requestGetFeaturetypeNameexample_ws:biz_pointsoutputFormatapplication/jsonsrsNameEPSG:4326).then(resres.json()).then(geojson{L.geoJSON(geojson,{pointToLayer:(feature,latlng){returnL.circleMarker(latlng,{radius:5,color:#ff3b30,fillColor:#ff3b30,fillOpacity:0.8});},onEachFeature:(feature,layer){layer.bindPopup(ID:${feature.properties.id});}}).addTo(map);});Leaflet 的 GeoJSON 默认使用经纬度所以 WFS 建议输出srsNameEPSG:4326八、MapLibre 接 GeoServerMapLibre 更偏向矢量瓦片和 WebGL 渲染。如果接 WMS可以使用 raster sourcemap.addSource(biz-lines-wms,{type:raster,tiles:[http://geoserver.example.com/geoserver/example_ws/wms?serviceWMSversion1.1.0requestGetMaplayersexample_ws:biz_linesstylesbbox{bbox-epsg-3857}width256height256srsEPSG:3857formatimage/pngtransparenttrue],tileSize:256});map.addLayer({id:biz-lines-wms,type:raster,source:biz-lines-wms});如果 GeoServer 支持矢量瓦片也可以走 MVTapplication/vnd.mapbox-vector-tile这适合更复杂的前端样式控制和大数据渲染但配置、缓存、样式和兼容性要求更高。九、点选对象怎么设计常见做法有三种。第一种WMS GetFeatureInfo。用户点击地图。 前端把点击坐标、当前 bbox、图层名发给 GeoServer。 GeoServer 返回点击位置附近对象属性。适合快速实现。 图层本来就是 WMS。 属性要求简单。第二种WFS bbox 查询。用户点击地图。 前端以点击点为中心构造一个小 bbox。 WFS 查询 bbox 内对象。适合想拿 geometry 和 properties。 对象数量少。 前端能处理结果排序和命中判断。第三种后端点选接口。用户点击地图。 前端把经纬度和容差传给后端。 后端用 PostGIS 查最近对象。 返回业务详情。业务系统更推荐第三种。原因权限可控。 字段可控。 业务口径可控。 能查关联对象。 能做租户隔离。十、前端高亮怎么设计高亮不要直接改基础图层。推荐基础图层 WMS/WMTS 显示全量数据。 高亮图层 前端 VectorLayer 单独绘制。高亮数据来源WFS 按 id 查询。 后端接口返回 GeoJSON。 后端接口返回经纬度数组。这样可以实现选中变色。 搜索结果闪烁。 任务对象强调。 鼠标 hover。 编辑过程临时样式。十一、前端绘制区域怎么传后端用户框选或绘制 polygon 后前端通常传 GeoJSON 给后端。建议统一传给后端的 GeoJSON 使用 EPSG:4326。OpenLayers 中可以这样导出constgeojsonnewol.format.GeoJSON().writeFeature(feature,{dataProjection:EPSG:4326,featureProjection:EPSG:3857});后端收到后ST_SetSRID(ST_GeomFromGeoJSON(geojson), 4326) ST_Transform(..., 数据库SRID)再做ST_Intersects ST_Contains ST_DWithin ST_Buffer十二、性能建议前端不要一次性加载全量 WFS。推荐全量显示 WMS/WMTS。 当前视口少量查询 WFS bbox maxFeatures。 业务检索 后端分页接口。 高亮 只加载目标对象。WFS 请求建议带maxFeatures / count bbox CQL_FILTER srsName propertyName避免一进页面就拉全量 GeoJSON。 把几万条线直接塞进前端 VectorLayer。 每次拖动地图都无节制发 WFS。十三、权限建议前端直连 GeoServer 时要考虑GeoServer 是否公开。 WFS 是否暴露敏感字段。 用户是否能访问其他租户图层。 GeoServer 是否能识别业务 token。很多业务系统里建议WMS/WMTS 可通过网关或 Nginx 代理。 WFS 谨慎开放。 复杂属性查询走后端 API。 GeoServer 管理接口只给内网或 CI/CD 使用。十四、总结前端地图接 GeoServer 的关键不是会写一个 WMS URL而是要把层次分清楚底图第三方或自有瓦片。 基础业务层WMS/WMTS。 高亮和编辑层前端矢量。 属性和统计后端 API。 少量空间对象WFS 或后端 GeoJSON。只要图层分工合理、坐标转换明确、配置集中管理前端地图就能保持可维护而不是变成一堆散落在页面里的地图 URL 和临时逻辑。