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 ,即可得到点击点对应的图层数据

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

Logo

前往低代码交流专区

更多推荐