使用Nodejs,leaflet和PostGIS处理新的地图项目。此时,我可以加载和显示地图图块层以及Postgis的销售代表区。现在我尝试添加另一个显示所有美国县的图层,这些图层也存储在Postgresql中。 Postgis查询在单独使用时运行和显示,但我无法同时加载和显示。以下是nodejs' routes / index.js'的摘录:
router.get('/map', function(req, res) {
var client = new pg.Client(conString); // Setup our Postgres Client
client.connect(); // connect to the client
var query = client.query(zone_query); // Run our 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: "Express API", // Give a title to our page
zoneData: data // Pass data to the View
});
});
});
router.get('/map', function(req, res) {
var client = new pg.Client(conString); // Setup our Postgres Client
client.connect(); // connect to the client
var query = client.query(counties_query); // Run our Query
query.on("row", function (row, result) {
result.addRow(row);
});
// Pass the result to the map page
query.on("end", function (result) {
var data2 = result.rows[0].row_to_json; // Save the JSON as variable data
res.render('map', {
title: "Express API", // Give a title to our page
countyData: data2 // Pass data to the View
});
});
});
来自' view / map.pug':
script("text/javascript").
$(document).ready(function(){
var myData = !{JSON.stringify(zoneData)};
var cntyData = !{JSON.stringify(countyData)};
// Create variable to hold map element, give initial settings to map
var map = L.map('map',{
center: [39.7799642, -86.2728367],
zoom: 6,
//layers: [zones, counties]
});
......然后再往下走:
L.geoJson(myData,{
style: zoneStyle,
onEachFeature: function (feature, layer) {
var ofc = JSON.stringify(feature.properties.office);
var zn = JSON.stringify(feature.properties.zone);
layer.bindPopup("office: " + ofc + "<br>" + "zone #" + zn);
// layer.bindPopup("Zone #"+JSON.stringify(feature.properties.zone));
}
}).addTo(map);
// Add county data to map
L.geoJson(cntyData,{
onEachFeature: function (feature, layer) {
//var desc = JSON.stringify(feature.properties.descriptio);
layer.bindPopup(desc);
}
}).addTo(map);
这些中的任何一个都能完美地完成,但是尝试加载这两个层根本不显示任何内容。最终我想要完成的是能够打开和关闭销售区域和州边界层。
感谢任何见解。
答案 0 :(得分:0)
所以我遇到了同样的问题,并在一些同事的帮助下提出了这个解决方案。
router.get('/', function (req, res) {
var client = new pg.Client(conString); // Setup our Postgres Client
client.connect(); // connect to the client
// creating an empty array for my row_to_json queries
var data = []
var resto_query = client.query(restoPoint_query); //connects to postgres so it can query up my request
resto_query.on("row", function (row, result) {
result.addRow(row);
});
resto_query.on("end", function (result) {
var resto_to_json = result.rows[0].row_to_json; // Save the JSON as variable data
data.push(resto_to_json); // push JSON data to data[]
var barrierQuery = client.query(barrier_query);
barrierQuery.on("row", function (row, result) {
result.addRow(row);
});
barrierQuery.on("end", function (result) {
var barrier_to_json = result.rows[0].row_to_json;
data.push(barrier_to_json);
res.render('map', {
title: "Leaflet Test API", // Give a title to our page
resto_point: data[0], // Pass data to the View
barrier: data[1]
可能不是最好的解决方案,但它暂时有效。