在leaflet展示geoserver图层demo_leaflet 显示geo发布的图层-CSDN博客

本文链接：https://blog.csdn.net/u010456602/article/details/130418714

如何在leaflet里面展示geoserver图层?
先搭建geoserver服务,启动服务
写一个html页面展示地图,
地图用高德地图
调用geoserver 接口展示图层

在geoserver里面找到图层的案例列表:
在这里插入图片描述
然后找一个图层去leaflet调用 .

下面图片是调用好的效果.
在这里插入图片描述
我这里加载两个图层 ,
分别是 nurc空间的 nurc:Img_Sample
和topp的空间的topp:states

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <title>leaflet</title>
  <meta name="keywords" content="">
  <meta name="description" content="">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
    integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
    integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
</head>

<body>
  <div id="mapDiv" style="width: 800px;height: 600px;"></div>

  <script>
    var map = new L.Map("mapDiv", {
      zoom: 3,
      center: [39.9, -116.40],
      boxZoom: true,
    });
    var url = "http://webrd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8";
    var layer = new L.TileLayer(url, {
      subdomains: "1234"
    });
    map.addLayer(layer);
    var marker = new L.marker([39.99, 116.3]);
    //marker.addTo(map);
    var wmsLayer = L.tileLayer.wms("http://localhost:8071/geoserver/nurc/wms?", {
      layers: 'nurc:Img_Sample',//需要加载的图层
      format: 'image/png',//返回的数据格式
      transparent: true,
      //crs: L.CRS.EPSG4326
    });
    map.addLayer(wmsLayer);
    var wmsLayer2 = L.tileLayer.wms("http://localhost:8071/geoserver/topp/wms?", {
      layers: 'topp:states',//需要加载的图层
      format: 'image/png',//返回的数据格式
      transparent: true,
      //crs: L.CRS.EPSG4326
    });
    map.addLayer(wmsLayer2);
    //console.log(map.getCenter());

  </script>
</body>

</html>