leaflet 加载基础地图，并在地图上添加图层

var than = this; //改变this指向

      this.map = new L.Map("map", {

        doubleClickZoom: false, // 禁用双击放大

        center: [25.83464890951628, 116.34460676774563],

        // maxZoom: 30,

        // zoom: 16,

        // minZoom: 15,

        zoomControl: true,

        attributionControl: true,

        crs: L.CRS.EPSG3857,

      }).setView([51.505, -0.09], 13);

      var osmUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",

        osmAttrib =

          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',

        osm = L.tileLayer(osmUrl, { maxZoom: 20, attribution: osmAttrib });

      var url =

        "http://IP:端口号/fcgi/gserver?map=/gssl/service/maps/grid.map";

      var nexrad = L.tileLayer.wms(url, {

        layers: "grid",

        format: "image/png",

        transparent: true,

        crs: L.CRS.EPSG4326,

        maxZoom: 20,

        version: "1.3.0",

      });

      var grid = L.gridLayer({

        attribution: "Grid Layer",

      });

      grid.setOpacity(0.2);

      grid.createTile = function (coords, done) {

        var tile = document.createElement("div");

        tile.innerHTML = [coords.x, coords.y, coords.z].join(", ");

        tile.style.outline = "2px solid black";

        tile.style.background = "white";

        tile.style.opacity = "0.6";

        setTimeout(function () {

          done(null, tile);

        }, 500 + Math.random() * 500);

        return tile;

      };

      // var bounds = new L.LatLngBounds(

      //   new L.LatLng(25.310076429618682, 115.9994845595961124),

      //   new L.LatLng(26.0428774300000292, 116.671172275477147)

      // );

      // var bounds = new L.LatLngBounds(

      //   new L.LatLng(25.5212, 116.3375),

      //   new L.LatLng(25.8429, 116.3532)

      // );

      var bounds = new L.LatLngBounds(

        new L.LatLng(25.8458, 116.3387),

        new L.LatLng(25.8195, 116.3393)

      );

      // this.map.addLayer(nexrad).fitBounds(bounds);

      this.map.addLayer(osm).addLayer(nexrad).addLayer(grid).fitBounds(bounds);

1，首先把这个地图放在静态页面的图层上进行显示。

2，加载之后发现图层不是一个需要单独再定义一个加载图层的方法，而是直接可以显示的一个方法。

3，osm  这个是基础的地图。

4，url 是添加的图层。

5，加载地图的方法是L.tileLayer.wms(url,  记得使用这个，这样地图就可以加载出来了。

6，这个图层是grid  ，这个可以利用软件看到这个图层的名字是什么？根据名字来加载地图。

7，

 var bounds = new L.LatLngBounds(

        new L.LatLng(25.8458, 116.3387),

        new L.LatLng(25.8195, 116.3393)

      );      这个是设置地图显示的边界，根据这个显示地图的边界。

8，    this.map.addLayer(osm).addLayer(nexrad).addLayer(grid).fitBounds(bounds);   这个是把一个图层添加另外一个图层之上。这样就可以显示出来完整的地图了。