vue项目中leaflet结合天地图展示geoserver图层

1.安装leaflet和superMap

superMap提供了leaflet和天地图结合的方法（superMap 官网：https://leafletjs.com/reference.htmliClient for Leaflet 开发指南）（leaflet 官网：Documentation - Leaflet - a JavaScript library for interactive maps；中文文档：Plugins - Leaflet - 一个交互式地图 JavaScript 库）项目中引入插件

创建地图，引入天地图图层

    let map = L.map(mapId, {
          crs: L.CRS.EPSG4326,
          center: [29, 119],
          maxZoom: 17,
          minZoom: 7,
          zoom: 10,//当前层级
          zoomControl: false,
          attributionControl: false,
          preferCanvas: true,
          doubleClickZoom: false,
        })
      //添加窗格，把wms图层添加到此窗格中，这里自定义了窗格，wms默认窗格是tilePane，geoJson图层默认窗格是overlayPane，我这里因为要把wms覆盖在geoJson上面，所以就自定义了窗格和层级
       map.createPane("maxLevelPane");
       map.getPane("maxLevelPane").style.zIndex = 660;
       //添加天地图影像图层和标注图层，这里使用了supermap的方法
       var wMap = L.supermap.tiandituTileLayer({
          layerType: "img",
          key: "天地图key",
        })
        var lMap = L.supermap.tiandituTileLayer({
          layerType: "img",
          isLabel: true,
          key: "天地图key",
        })
        //添加影像图层
        map.addLayer(wMap);
        //添加标签图层
        map.addLayer(lMap);

2.geoJson图层添加

geoJson格式的数据可以是后台返回，也可以到geoserver中获取（如果geoserver中有的话），

后台返回：

let data = {"type":"MultiPolygon","coordinates":[[[[119.766132807747,29.2003390625065],[119.766281787158,29.2003833031418],[119.766350165137,29.2001859643868],[119.766445181959,29.2000318171805],[119.766473397007,29.2000018232861],[119.766143344738,29.2002428663719],[119.766132807747,29.2003390625065]]]]}
//图层样式
var regionStyle = {
        color: "#89cfda",
        weight: 5,
        opacity: 1,
        fillColor: "",
        fillOpacity: 0,
      };
      var list = [];
      let that = this;
      var modal = {
        type: "Feature",
        geometry_name: "geom",
        geometry: data,
      };
      list.push(modal);
      //把后台返回数据处理成可以在地图上展示geojson格式
      var geoJson = {
        type: "FeatureCollection",
        features: list,
      };
      var geo_l = L.geoJson(geoJson, {
        style: regionStyle,//设置样式
      }).addTo(map);//添加到地图

geoserver中获取：

需要使用的方法：geoserver/工作区/ows

//图层样式
var regionStyle = {
          color: "#89cfda",
          weight: 5,
          opacity: 1,
          fillColor: "",
          fillOpacity: 0,
        };
//请求接口的参数     
 var param = {
          service: "WFS",
          version: "1.0.0",
          request: "GetFeature",
          typeName: "图层名称",
          maxFeatures: 10000,//我这里设置了一个很大的值，默认返回50条数据
          outputFormat: "application/json",
          CQL_FILTER: "筛选条件",
        };
//调用获取方法就可以拿到geoJson数据，格式不用转换，可以直接使用

   var data;//返回数据，我这里就不具体写了
var geo_l = L.geoJson(data, {
          style: regionStyle,
        }).addTo(map);

3.wms图层添加

//添加图层组到地图，把wms图层全部放入图层组中，这样可以调整wms图层的层级
let layerGroups = new L.LayerGroup();
layerGroups.addTo(map);
let wmsLayer = L.tileLayer.wms(`/geoserver/工作区/wms`, {
      'format': 'image/png',
      'VERSION': '1.1.1',
      "layers": '图层名称',
      "exceptions": 'application/vnd.ogc.se_inimage',
      'transparent': true,
      'maxZoom': 21,//最大级别
    })
wmsLayer.setParams({
          styles: "样式名称"//在geoserver中设置，样式设置时，添加了工作区只能在对应的工作区使用，不添加工作区，可以通用
        });
        wmsLayer.setZIndex(100);//设置层级，数值越大，层级越高
        layerGroups.addLayer(wmsLayer);//添加图层到图层组
        layerGroups.removeLayer(wmsLayer);//把图层从图层组中移除

4.wms图层点击

因wms图层是图片，不像geoJson可以提供方法，所以wms的点击事件就需要单独处理，首先获取到当前鼠标点击地图的坐标，再根据坐标在geoserver对应的图层中查找包含该坐标的矢量图层，然后返回相应的数据，可以根据geoserver返回的数据进行下一步处理，具体实现：

首先：在数据--图层中找到对应的图层，在数据选项中找到

 找到Edit sql view然后

 修改geom属性，我这里的坐标体系是4326的，你们可以根据自身情况设置

var param = {
          service: "WFS",
          version: "1.0.0",
          request: "GetFeature",
          typeName: "图层名称",
          maxFeatures: 10,//要查询的数据是唯一的，可以设置该属性，也可以不设置，默认是50
          outputFormat: "application/json",
          CQL_FILTER: `CONTAINS(geom,SRID=4326;POINT(${longitude} ${latitude}))`,//筛选条件，根据自己的情况添加合适的筛选条件，longitude，latitude点击地图获取到的经纬度，中间要有空格
        };
var data ; // 调用接口 geoserver/工作区/ows返回的数据
//判断data.features.length ,即可得到点击点对应的图层数据

 图层展示就写到这里，如果有什么问题，可以一起探讨