使用jquery

Question

我正在尝试根据oracle数据库中的描述（一列）过滤标记。我创建了一个查询（filter.py），该查询已作为json发送到ajax，以允许用户使用提交按钮选择一种或多种描述类型（例如Rock，Knoll等），从而使过滤器成为可能。该查询已发送到ajax，但我不知道如何在jquery中进行处理，因此，如果用户根据岩石描述选中一个框，他将获得被描述为岩石的标记，并且他还可以获取标记描述为小节等。我使用的是传单js库。我对jquery真的很陌生

     <div class="btn-group">
        <input type="button"class="btn btn-default"  id="allmarkers">Submit</input>
       <input type="checkbox" id="Rock">Rock</input>
       <input type='checkbox' id= "Knoll">Knoll</input>
      </div>

var map = L.map('map').setView([51.505, -0.09], 13);

 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a 
 href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

  //generate marker cluster
 // var myRenderer = L.canvas({ padding: 5 });
 var markers= L.markerClusterGroup({
 });


 {% for item in markers %}

   //create map icons from database (this calls marker from a python query created using jnja2 template)

 var marker{{ item[0] }} = L.marker({{ item[3:] }})

 markers.addLayer(marker{{ item[0] }});
 map.addLayer(markers)

{% endfor %} 




 Queries to filter(filter.py) (sent to ajax)

 #!/usr/bin/env python3

 import cgi 
 import cgitb 
 import sys 
 import json
 import cx_Oracle 
 cgitb.enable()

 from jinja2 import Environment, FileSystemLoader
 fs = cgi.FieldStorage()



desc=[]
if 'description' in fs:
    desc=fs['description'].value



def getMarkers():
    conn = cx_Oracle.connect(dsn="geosgen", user="s4346", password=pw)
    c = conn.cursor()
    query = "SELECT A.PLACENAME_ID, A.DESCRIPTION, A.LATITUDE, A.LONGITUDE FROM PLACENAMES A"

    if len(desc)>0:
        query = query +getDescriptionQuery()
c.execute(query)
    markers = []
    for row in c:
    markers.append([row[0],row[1],row[2],row[3]])
    conn.close
    return markers

 def getDescriptionQuery():
     query=''
     for index, element in enumerate(desc):
        if index==0:
            query=query + "WHERE A.DESCRIPTION = '"+ desc[index] +"' "
    else:
            query=query + "OR A.DESCRIPTION = '"+ desc[index] +"' "
    return query

 markers=getMarkers()


 result= {'data': markers}


   sys.stdout.write("Content-Type: application/json")
  sys.stdout.write("\n")
  sys.stdout.write("\n")
  sys.stdout.write(json.dumps(result,indent=1))
  sys.stdout.write("\n")

  sys.stdout.close()





    AJAX CALL

    $("#allmarkers").click(function (evt) {
   $.ajax({
 url: "/~s1774346/cgi-bin/filter.py",
 async: true,
 type: "post",
 datatype:"json",
 data: {'description': ['Rock', 'Knoll'] },
  //data: "",

 success: function(response) {
     var dataArr = response.data
        console.log(response.data)



//NOT SURE ABOUT HOW TO DO THE FILTERIING FROM HERE

$("#Rock").on('change', function(event){
  if (this.checked){
     for (var i = 0; i < dataArr.length; i++) {
      console.log(dataArr[0])
                if (description[0]== "Rock"){

}else { 

} 
    }
     }

 });



}
        });

});

Answer 1

一种简单的方法是从ajax获取它们时对其进行过滤：

var rock_group_markers = knoll_group_markers = new L.featureGroup();

$.ajax({
    url: "/~s1774346/cgi-bin/filter.py",
    async: true,
    type: "post",
    datatype: "json",
    data: {'description': ['Rock', 'Knoll']},   
    success: function (response) {
        var dataArr = response.data
        // For each result from your request
        dataArr.forEach(function(item) {
            // Create popup if you need it
            var popup = 'Your popup data' + item.description + item.title;
            if (item.description === 'Rock') {
                // Create marker
                // if item.latlng doesn't exist you have to create it like this
                // var latlng = new L.latLng(-43.1731, 6.6906);
                L.marker(item.latlng, {icon: youIcon}).bindPopup(popup).addTo(rock_group_markers);
            } else if (item.description === 'Knoll') {
                L.marker(item.latlng, {icon: youIcon}).bindPopup(popup).addTo(knoll_group_markers);
            }
        })
    }
});

$('#Rock').change(function() {
    if($("#Rock").prop('checked') === true){
        // Is checked add to map
        map.addLayer(rock_group_markers);
    } else {
        // Remove from map
        map.removeLayer(rock_group_markers);
    }
});

我正在使用featureGroup，因此您可以将所有Rock标记存储在其中。然后，在地图上添加或删除该图层真的很容易。