IT评测·应用市场-qidao123.com

标题: WebGIS：Geoserver简单利用方法总结（leaflet） [打印本页]
作者: 千千梦丶琪    时间: 2025-3-16 05:57
标题: WebGIS：Geoserver简单利用方法总结（leaflet）
1、常用参考网站

geoserver手册：GeoServer User Manual — GeoServer 2.26.x User ManualCSS 样式 — GeoServer 2.26.x 用户手册GeoServer User Manual — GeoServer 2.26.x User Manual
geoserver提供了的RESTful接口们：REST — GeoServer 2.26.x User Manual
2、地图服务简介

关于OGC中地图服务，详细请参考以下文章，博主介绍的详细易懂map - OGC WebGIS 常用服务尺度（WMS/WMTS/TMS/WFS）速查 - 空间的一粟 - SegmentFault 思否
3、在地图上加载图层

利用wms服务的GetMap能力，在leaflet上加载中国地区省界限
  
  1. this.map.addLayer(
  2.      L.tileLayer.wms("geoserver/china/wms", {
  3.           layers: "china:region", // 工作空间:图层名 GeoServer中定义的图层名称
  4.           styles: "china:region", // 图层的样式
  5.           service: "WMS",  // 地图服务
  6.           format: "image/png",
  7.           transparent: true, // 返回瓦片背景色设置为透明
  8.           srs: "EPSG:4326", // 坐标系，需要和底图坐标系保持一致
  9. })
复制代码
效果：
​
4、利用css修改geoserver样式

通过Geoserver官方提供的Reatful接口，利用哀求修改样式文件，Geoserver官方提供的利用手册中详细记录了如何根据图层数据环境书写样式的案例：
CSS Styling — GeoServer 2.26.x User Manual
1、查察图层属性
方法一：在左侧菜单栏选择“图层预览”，找到须要叠加的图层，点击“openLayer”
​
接着点击图层任何地区，图层表现区下方会出现一个表格，表头信息即可筛选表格内容的要素
​
方法二：在左侧菜单栏选择“样式”，点击“样式名称”列下的样式文件，切换至“Layer Attribute”，点击Previewing on layer: 背面的蓝色字体，切换当前图层为须要叠加的图层。
​
​
下方表格中name：图层要素，type：要素数据类型（String、Float等）
​
效果：给不同地区加载不同颜色。
  
  1. const headers = {
  2.         Accept: "application/vnd.geoserver.geocss+css",
  3.         Authorization: "Basic YWRtaW46Z2Vvc2VydmVy"
  4. };
  5. // css样式文件
  6. let style =
  7.         "*{stroke-width:1px;stroke:#000200;fill:#2ee000;stroke-opacity: 1;}[id='110000'] {fill:#FF4848;fill-opacity: 0.5;} ";
  8. axios
  9.     .put(`geoserver/rest/workspaces/${工作空间}/styles/${图层名}?raw=true`, style, {headers})
  10.         .then(() => {
  11.            this.map.addLayer(
  12.               L.tileLayer.wms("geoserver/${工作空间}/wms", {
  13.               layers: `${工作空间}:${图层名}` // 工作空间:图层名 GeoServer中定义的图层名称
  14.               styles: `${工作空间}:${图层名}`, // 图层的样式
  15.               service: "WMS",  // 地图服务
  16.               format: "image/png",
  17.               transparent: true, // 返回瓦片背景色设置为透明
  18.               srs: "EPSG:4326", // 坐标系，需要和底图坐标系保持一致
  19.             })
  20.          }).catch(e => {
  21.           console.log(e);
  22.         });
复制代码
​
5、利用CQL_FILTER过滤要素

CQL_FILTER的语法可以参考这篇文章，博主的介绍很清晰，这里只了举一个例子
REST — GeoServer 2.26.x User Manual
5.1、WMS服务中通过通报CQL_FILTER参数选择在地图上展示的图层要素

  
  1. L.tileLayer.wms("geoserver/china/wms", {
  2.       layers: "china:region", // GeoServer中定义的图层名称
  3.        // styles: 'china:region', // 图层的样式，默认通常是'default'
  4.       styles: "china:region", // 图层的样式，默认通常是'default'
  5.       service: "WMS",
  6.       format: "image/png",
  7.       transparent: true,
  8.       srs: "EPSG:4326",
  9.       CQL_FILTER: "id in ('640000','650000','710000')" // 通过要素对要素值筛选
  10. })
复制代码
​
5.2、点击图层弹出信息

1、利用WFS服务实现点击图层要素弹出信息，完成属性查询，wfs的GetFeature也可用于获取要素数据后根据数据修改图层样式
  
  1. this.map.on("click", res => {
  2.       const latlng = res.latlng;
  3.       let pt = crs.project(res.latlng);
  4.       this.getCilckFeatrue(latlng, pt);
  5. });
  7. /**
  8.   * 获取点击位置geoserver图层信息
  9.   */
  10. getCilckFeatrue(latlng, pt) {
  11.   var urlString = "geoserver/china/wfs";
  12.   var param = {
  13.     service: "WFS",
  14.     version: "1.0.0",
  15.     request: "GetFeature",
  16.     typeName: "china:region",
  17.     outputFormat: "application/json",
  18.     maxFeatures: 3200,
  19.     srsName: "EPSG:4326",
  20.     // propertyName: "name" // 获取图层指定字段的信息
  21.     // CQL_FILTER: `INTERSECTS(geom,POLYGON((${pt.x + 0.01} ${pt.y -
  22.     //   0.01}, ${pt.x + 0.01} ${pt.y + 0.01}, ${pt.x - 0.01} ${pt.y +
  23.     //   0.01}, ${pt.x - 0.01} ${pt.y - 0.01}, ${pt.x + 0.01} ${pt.y -
  24.     //   0.01})))` //利用多边形来定义一个包围盒
  25.     //使用了 DWITHIN 操作符来检查要素的几何形状（geom）是否在指定点（POINT(${pt.x} ${pt.y})）的 0.01 公里范围内。这将筛选出与点击点距离小于 0.01 公里的要素。
  26.     CQL_FILTER: `DWITHIN(geom,POINT(${pt.x} ${pt.y}), 0.01, kilometers)`
  27.   };
  28.   axios({
  29.     method: "GET",
  30.     url: urlString + L.Util.getParamString(param, urlString)
  31.   })
  32.     .then(res => {
  33.       if (res.status === 200) {
  34.         console.log(res.data.features);
  35.         let arr = [];
  36.         res.data.features.map(item => {
  37.           arr.push(`${item.properties.name},`);
  38.         });
  39.         let str = arr.join(",");
  40.         L.popup()
  41.           .setLatLng(latlng)
  42.           .setContent(str)
  43.           .openOn(this.map);
  44.       }
  45.     })
  46.     .catch(e => {
  47.       console.log("Error fetching feature info:", e);
  48.     });
  49. },
复制代码
效果：
​
2、利用WMS服务实现点击图层要素弹出信息，完成属性查询，wfs的GetFeatureInfo也可用于获取要素数据后根据数据修改图层样式
  
  1. this.map.on("click", res => {
  2.   const latlng = res.latlng;
  3.   // 将 latlng 转换为地图容器的像素坐标
  4.   const point = this.map.latLngToContainerPoint(latlng);
  5.   this.getCilckFeatrue(latlng, point);
  6. });
  8. /**
  9. * 获取点击位置geoserver图层信息
  10. */
  11. getCilckFeatrue(latlng, pt, layer_name) {
  12.   const mapSize = this.map.getSize(); // 获取地图大小
  13.   const bbox = this.map.getBounds().toBBoxString(); // 获取当前地图视图的边界
  14.   var urlString = "geoserver/china/ows";
  15.   var param = {
  16.     service: "WMS",
  17.     version: "1.1.1",
  18.     request: "GetFeatureInfo",
  19.     layers: "china:region", // 要加载的图层名
  20.     query_layers: "china:region", //图层服务名
  21.     srs: "EPSG:4326",
  22.     height: mapSize.y,
  23.     width: mapSize.x,
  24.     info_format: "application/json",
  25.     x: Math.floor(pt.x),
  26.     y: Math.floor(pt.y),
  27.     bbox: bbox, // 添加边界参数
  28.     feature_count: 10 // 可选：请求返回的特性数量
  29.   };
  30.   axios({
  31.     method: "GET",
  32.     url: urlString + L.Util.getParamString(param, urlString)
  33.   })
  34.     .then(res => {
  35.       if (res.status === 200) {
  36.         console.log(res);
  37.         let arr = [];
  38.         res.data.features.map(item => {
  39.           arr.push(`${item.properties.name},`);
  40.         });
  41.         let str = arr.join(",");
  42.         L.popup()
  43.           .setLatLng(latlng)
  44.           .setContent(str)
  45.           .openOn(this.map);
  46.       }
  47.     })
  48.     .catch(e => {
  49.       console.log("Error fetching feature info:", e);
  50.     });
  51. }
复制代码
效果：
​

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/) Powered by Discuz! X3.4