【问题标题】:Multiple queries to Postgres database for choropleth Leaflet map对 Postgres 数据库的多个查询以获取 choropleth Leaflet map
【发布时间】:2017-05-11 12:17:23
【问题描述】:

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

  // 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 不起作用。任何人都可以就它为什么不起作用提供任何建议吗?

【问题讨论】:

    标签: node.js postgresql express leaflet choropleth


    【解决方案1】:

    免责声明我对此也很陌生,而这恰好奏效。可能不是最好的解决方案。

    我遇到了同样的问题,我无法让多个查询工作。问了一圈后,这是我想出的解决方案:

    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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-05-08
      • 1970-01-01
      相关资源
      最近更新 更多