[英]Multiple queries to Postgres database for choropleth Leaflet map
I am working with nodejs Postgres and leaflet to create a choroplethic map. 我正在使用nodejs Postgres和Leaflet创建一个Choroplethic映射。 I have one query running and working perfectly on the map.
我有一个查询正在地图上运行并完美运行。 However, I cannot seem to get another working as I want these to be options a user can pick.
但是,我似乎无法再进行其他工作,因为我希望这些成为用户可以选择的选项。 This is the code that I have.
这是我的代码。 I'm really new to this by the way.
顺便说一下,我真的很陌生。
// 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
});
})
});
This is my map.jade 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: '© <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);
I know that running the OSM2 query and linking it to cwnsLayer2 doesn't work. 我知道运行OSM2查询并将其链接到cwnsLayer2不起作用。 Can anyone please provide any advice as to why it is not working?
谁能提供任何关于为什么它不起作用的建议?
Disclaimer I am also very new to this, and this just so happens to work. 免责声明我对此也很陌生,这恰好起作用。 May not be the best solution.
可能不是最佳解决方案。
I was having the same problem were I couldn't get multiple queries to work. 我遇到同样的问题,因为我无法使多个查询工作。 After asking around, this is the solution that I came up with:
问完之后,这是我想出的解决方案:
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]
});
});
})
});
If you come across a better solution, please share :D 如果您遇到更好的解决方案,请分享:D
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.