统一gis平台地图服务发布流程及使用

统一gis平台地图服务发布流程及使用

背景：项目里需要使用第三方提供的地图网格数据进行展示，我们需要将这些网格数据通过统一gis平台发布以供前端使用。第三方提供的数据为shx、shp、dbf文件

服务发布及配置

1、统一gis平台新增数据源支持shapefile和postGIS类型，并且shepefile文件必须包含shx、shp、dbf和prj文件。第三方提供的数据不包含prj文件，需要对源文件转换。打开mapshaper在线转换工具链接: link,导入shx、shp、dbf文件，编码类型输入encoding=gbk

2、在统一gis平台打开数据源管理，新增数据源，数据源类型选择shapefile，encoding=gbk然后导入，查看导入后的效果，注意encoding=gbk配置，否则数据中的中文会乱码。

3、点击导出，选择shapefile文件或者geojson。导出的shapefile文件夹中包含shx、shp、dbf及prj文件

4、打开统一gis平台，选择数据源管理，新增数据源，数据类型选择shapefile，点击导入，选择上面转换后的四个文件。接着在物理图层中新增选择刚刚的数据源并启用，另外在逻辑图层中可以新增图层，逻辑图层由物理图层组成。在图层样式管理中选择网格图层并新增样式，编辑填充色及边框颜色。

前端调用

1、Leaflet显示wms图层示例

let wms = this.createWMSLayer("wangge_zrwg");
createWMSLayer(layerName) {
  if (!layerName) return;
    console.log(layerName, "layerName:::::::::::");
    var nexrad = L.tileLayer.wms(
        "http://172.18.34.198:8000/geoserver/wms?",
        {
            layers: layerName,
            format: "image/png",
            transparent: true,
            styles: "政通责任网格2022",
            crs: L.CRS.EPSG4326
        }
    );
    // this.map.addLayer(nexrad);
    // nexrad.addTo(this.map);
    return nexrad;
}

其它地图框架同样有加载wms图层方法
2、WFS查询
WFS为请求由地理要素及其属性组成的⽮量地理空间数据提供了⼀个标准接⼝，通过WFS查询出数据后再用这些数据进行下一步操作
点击地图查询所属区域（点和面的交集）

getPointArea() {
      let map = this.$store.state.warning.map;
      map.on("click", (e) => {
        console.log(e);
        const { WFS, SpatialFilter, Geojson, CoordsTransform } = window.CciMap;
        const wfsUrl = "http://172.18.34.198:8000/geoserver/gis/wfs";
        const center = this.getWgs84Point([e.lnglat.lng, e.lnglat.lat]);
        console.log(center);
        const geom = {
          type: "Point",
          coordinates: center,
        };
        // 查询
        new WFS({
          url: wfsUrl,
          typeNS: "gis",
          typeName: "hzcg_area_quxian",
          geometryField: "the_geom",
          filter: SpatialFilter.Intersects(Geojson(geom), "the_geom"),
          maxFeatures: 5000,
        }).on("load", (res) => {
          if (res) {
            console.log(res)
          }
        });
      });
    },
getWgs84Point(data) {
   const { CoordsTransform } = window.CciMap;
   const pointInfo = CoordsTransform.gcj02towgs84(data[0], data[1]);
   return pointInfo;
 }