關於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);
            });
    }