2017-02-28 14 views
0

我正在与nodejs Postgres和传单创建一个choroplethic地图。我有一个查询在地图上运行并完美工作。但是,我似乎无法得到另一个工作,因为我希望这些是用户可以选择的选项。这是我有的代码。顺便说一句,我真的很陌生。多个查询到Postgres数据库的choropleth传单地图

// 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 
     }); 
    }) 
}); 

这是我的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); 

我知道,在运行OSM2查询,并连接起来,cwnsLayer2不起作用。任何人都可以提供任何建议,为什么它不工作?

回答

0

免责声明我对此也很新,而且这恰好适用。可能不是最好的解决方案。

我有同样的问题,我无法获得多个查询工作。四处询问之后,这是我想出了解决方案:

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] 
      });      
     }); 
    }) 
}); 

如果你遇到一个更好的解决方案,请分享一下:d