2017-02-28 4 views
0

Je travaille avec nodejs Postgres et un dépliant pour créer une carte choroplèthique. J'ai une requête en cours d'exécution et fonctionne parfaitement sur la carte. Cependant, je ne peux pas sembler obtenir un autre travail comme je veux que ce soit des options qu'un utilisateur peut choisir. C'est le code que j'ai. Je suis vraiment nouveau à ce sujet.Plusieurs requêtes à la base de données Postgres pour choropleth Leaflet map

// Set up database query to display GeoJSON 
    var OSM = "SELECT row_to_json(fc) FROM (SELECT 'FeatureCollection' As  type, array_to_json(array_agg(f)) As features FROM (SELECT 'Feature' As type,  ST_AsGeoJSON(lg.geom)::json As geometry, row_to_json((thirty_cens, name_tag)) As properties FROM civil_parishes As lg) As f) As fc"; 
//var OSM2 ="SELECT row_to_json(fc) FROM (SELECT 'FeatureCollection' As type, array_to_json(array_agg(f)) As features FROM (SELECT 'Feature' As type, ST_AsGeoJSON(lg.geom)::json As geometry, row_to_json((twenty_cens, name_tag)) As properties FROM civil_parishes As lg) As f) As fc"; 
/* GET home page. */ 
router.get('/', function(req, res) { 
    res.render('index', { 
     title: 'Web Mapping' 
    }); 
}); 

module.exports = router; 

/* GET Postgres JSON data */ 
router.get('/data', function (req, res) { 
    var client = new pg.Client(conString); 
    client.connect(); 
    var query = client.query(OSM); 
     query.on("row", function (row, result) { 
     result.addRow(row); 
    }); 
     query.on("end", function (result) { 
     res.send(result.rows[0].row_to_json); 
     res.end(); 
    }); 
    }); 

/* GET the map page */ 
router.get('/map', function(req, res) { 
    var client = new pg.Client(conString); // Setup Postgres Client 
    client.connect();      // connect to the client 
    var query = client.query(OSM);   // Run Query 
    query.on("row", function (row, result) { 
     result.addRow(row); 
     }); 
    // Pass the result to the map page 
    query.on("end", function (result) { 
     var data = result.rows[0].row_to_json // Save the JSON as variable data 
     res.render('map', { 
      title: "Web Mapping",    // Give a title to page 
      jsonData: data     // Pass data to the View 
     }); 
    }) 
}); 

Ceci est ma page map.jade:

#map(style='height: 100%; width: 100%') 
    script(src='http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js') 
script(src='http://code.jquery.com/jquery-2.1.0.min.js') 
script. 
    var myData = !{JSON.stringify(jsonData)};// Create variable to hold map element, give initial settings to map 
    //var myData2 = !{JSON.stringify(jsonData2)};// Create variable to hold map element, give initial settings to map 
    var map = L.map('map').setView([53.2734, -7.778320310000026], 7); 
    var osmmap = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map); 
    // Add JSON to map 
    var censLayer=new L.geoJson(myData,{ 
     style:getStyle, 
     onEachFeature: onEachFeature 
     }); 
    //var censLayer2=new L.geoJson(myData2,{ 
     //style:getStyle, 
     //onEachFeature: onEachFeature 
     /}); 
    function getStyle(feature) { 
     return { 
      weight: 1, 
      opacity: 1, 
      color: '#fff', 
      fillOpacity: 0.7, 
      fillColor: getColor(feature.properties.f1) 
     }; 
    } 
    function getColor(d) { 
     return d > 100 ? 'blue' : 
       d > 70 ? 'red' : 
       d > 50 ? 'green' : 
         'grey'; 
       } 
    function onEachFeature(feature, layer){ 
     layer.bindPopup(feature.properties.f2); 
    } 
    var baseMaps ={ 
     "osmmap": osmmap}; 
    var overlayMaps = { 
     "censLayer": censLayer}; 
    L.control.layers(baseMaps,overlayMaps).addTo(map); 

Je sais que l'exécution de la requête OSM2 et la relier à cwnsLayer2 ne fonctionne pas. Quelqu'un peut-il donner des conseils pour expliquer pourquoi cela ne fonctionne pas?

Répondre

0

Avis de non-responsabilité Je suis également très novice dans ce domaine, et cela fonctionne parfaitement. Peut ne pas être la meilleure solution.

J'avais le même problème si je n'avais pas réussi à obtenir plusieurs requêtes. Après avoir demandé autour, c'est la solution que je suis venu avec:

router.get('/map', function(req, res) { 
    var client = new pg.Client(conString); 
    client.connect(); 

    var dataHolder = []; //use this to store you results to JSON 

    var query = client.query(OSM);   
    query.on("row", function (row, result) { 
      result.addRow(row); 
    }); 

    query.on("end", function (result) { 
     var data = result.rows[0].row_to_json; 

     dataHolder.push(data) // add this 


     // this will run your second query 
     var query = client.query(OSM2);   
     query.on("row", function (row, result) { 
      result.addRow(row); 
     }); 

     query.on("end", function (result) { 
      var data2 = result.rows[0].row_to_json; 

      dataHolder.push(data2) // add this 

      res.render('map', { 
       title: "Web Mapping",    
       jsonData: data[0] 
       jsonData2: data[1] 
      });      
     }); 
    }) 
}); 

Si vous tombez sur une meilleure solution, s'il vous plaît partager: D