关于leaflet.js实现出图，图层叠加，气泡弹窗等

    var map,vectorLayer;
     $(document).ready(function(){
      vectorLayer = L.supermap.tiledMapLayer("http://127.0.0.1:8088/iserver/services/map-zzmap/rest/maps/basemap", {
           maxZoom: 20,
           tileSize: 256,
           zoomOffset: 1
       });
    //  初始化地图
      map = L.map('mapDiv',{
        minZoom:0,
        maxZoom:19,
        crs:L.CRS.EPSG4326,
        layers: [vectorLayer]
  //  设置中心点
     }).setView([34.672852, 113.517609], 10);

      //  地图点击事件
    /* map.on('click', function(e) {
         debugger;
         // query("xzqh@xiang",["xzqh:xiang"],"P_CODE=410185","http://127.0.0.1:8088/iserver/services/data-zzmap/rest/data","登封市");

     });*/


    // 注册叠加行政区划事件
    $("#add_xzqh").click(function(){
     
      addXzqh();

    });

           //注册叠加乡镇事件
      $("#add_xiang").click(function(){
         if(this.checked){ 
           query("xzqh@xiang",["xzqh:xiang"],"P_CODE=410101","http://127.0.0.1:8088/iserver/services/data-zzmap/rest/data","市辖区");
          
         }
         else{
            
         }
      });
      
                 //注册火车站事件
      $("#add_train").click(function(){
         if(this.checked){
           query("poi@train",["poi:train"],"SMID>0","http://127.0.0.1:8088/iserver/services/data-zzmap/rest/data","123");
         }
         else{
            
         }
      });
      
                       //注册火公交站站事件
      $("#add_bus").click(function(){
         if(this.checked){
           query("poi@bus_stop",["poi:bus_stop"],"SMID>0","http://127.0.0.1:8088/iserver/services/data-zzmap/rest/data","123");
         }
         else{
            
         }
      });
      
      //叠加河流
      $("#add_river").click(function(){
        if(this.checked){
          addRiver();
         }
      });
      
     });
     
     // 查询行政区划与乡镇区划
     function query(name,datasetName,filter,url,popup) {
     
        var sqlParam = new SuperMap.GetFeaturesBySQLParameters({
            queryParameter: {
                name: name,
                attributeFilter: filter
            },
            datasetNames: datasetName
        });
        L.supermap.featureService(url).getFeaturesBySQL(sqlParam, function (serviceResult) {
        console.log(serviceResult);
                 resultLayer = L.geoJSON(serviceResult.result.features,{
                         style: function (feature) {
                                return {color: 'blue',weight:1,fillOpacity:0.1};
                            }
                 }).addTo(map).bindPopup(function(layer){
                    return layer.feature.properties.NAME;
                   });
            });
    }
    
         // 查询行政区划与乡镇区划
     function addRiver() {
     
        var sqlParam = new SuperMap.GetFeaturesBySQLParameters({
            queryParameter: {
                name: "dlg@river_line",
                attributeFilter: "",
            
            },
                fromIndex:0,
                toIndex:300,
            datasetNames: ["dlg:river_line"]
        });
        L.supermap.featureService("http://127.0.0.1:8088/iserver/services/data-zzmap/rest/data").getFeaturesBySQL(sqlParam, function (serviceResult) {
        console.log(serviceResult);
                 resultLayer = L.geoJSON(serviceResult.result.features,{
                         style: function (feature) {
                                return {color: 'blue',weight:2,fillOpacity:0.5};
                            }
                 }).addTo(map).bindPopup(function(layer){
                    return layer.feature.properties.NAME;
                   });

            });
    }
    
    function addXzqh(){
        var sqlParam = new SuperMap.GetFeaturesBySQLParameters({
            queryParameter: {
                name: "xzqh@xzqh",
                attributeFilter: "GB!='410100'"
            },
            datasetNames: ["xzqh:xzqh"]
        });
        L.supermap.featureService("127.0.0.1:8088/iserver/services/data-zzmap/rest/data").getFeaturesBySQL(sqlParam, function (serviceResult) {
         
                 resultLayer = L.geoJSON(serviceResult.result.features,{
                         style: function (feature) {
                                return {color: 'blue',weight:1,fillOpacity:0.1};
                            },
                        onEachFeature:function(feature, layer){
                         var code = feature.properties.GB.split(".")[0];
                          var center = layer.getBounds().getCenter();
                                   var myIcon = L.divIcon({
                                        html: feature.properties.NAME,
                                        className: 'label-div-icon',
                                        iconSize:50
                                    });
                          var marker = L.marker(center, { icon: myIcon });
                                    marker.layerType='xzqh';
                                    marker.addTo(map);
                             //  图层点击事件
                              layer.on("click",function(e){

                               console.log(code);
                               // 加色
                              queryByParentCode(code,"http://127.0.0.1:8088/iserver/services/data-zzmap/rest/data");
                           })
                        }
                //  地图绑定气泡弹出文字     
                 }).addTo(map).bindPopup(function(layer){
                    return layer.feature.properties.NAME;
                   });

            });
    }

         // 根据行政区划编码查询街道办事处
     function queryByParentCode(code,url,popup) {

         //  循环遍历获取图层
         map.eachLayer(function (layer) {
                let leafletId =  layer._leaflet_id;
                // 保留基本图层移除其他layer图层
             if(leafletId == 1 ||leafletId == 95 ||leafletId == 97 ||leafletId == 98 ||leafletId == 101 ||leafletId == 102 ||leafletId == 104 ||leafletId == 105 ||leafletId == 107  ||leafletId == 108 ||leafletId == 110 ||leafletId == 111 ||leafletId == 113 ||leafletId == 114 ||leafletId == 116 ||leafletId == 117 ||leafletId == 119 ||leafletId == 120 ||leafletId == 122 ||leafletId == 123 ||leafletId == 125 ||leafletId == 126  ||leafletId == 128 ||leafletId == 129 ||leafletId == 131 ||leafletId == 132 ||leafletId == 134 ||leafletId == 135 ||leafletId ==137 ||leafletId == 138 ||leafletId == 140 ||leafletId == 141 ||leafletId == 143 ||leafletId == 144){

             }
             else{
                 layer.remove();
             }
         });
         var sqlParam = new SuperMap.GetFeaturesBySQLParameters({
            queryParameter: {
                name: "xzqh@xiang",
                attributeFilter: "P_CODE="+code
            },
            datasetNames: ["xzqh:xiang"]
        });
        debugger;
        L.supermap.featureService(url).getFeaturesBySQL(sqlParam, function (serviceResult) {
        // console.log(serviceResult.result.features);
                 resultLayer = L.geoJSON(serviceResult.result.features,{
                         style: function (feature) {
                                return {color: 'yellow',weight:1,fillOpacity:0.1};
                            },
                 }).addTo(map).bindPopup(function(layer){
                    return layer.feature.properties.NAME;
                   });
            //  获取到查询条件的面
            var bounds = resultLayer.getBounds();
            //  飞向查询的面中心，面边界即为地图最大边界
            map.flyToBounds(bounds);
            });
    }