Browse Source

Acabat l'endpoint de parceles del servidor de desenvolupament; Vinculada la carrega de parceles des del client al zoom i al moviment del mapa;

main
Lucas García 6 months ago
parent
commit
80f94fa3f7
  1. 1
      .gitignore
  2. 55
      client/cadastre.html
  3. 62
      client/index.js
  4. 2897
      client/package-lock.json
  5. 1
      client/package.json
  6. BIN
      client/parceles.sqlite
  7. 136
      client/public/index.html
  8. BIN
      client/signal-desktop-keyring.gpg

1
.gitignore

@ -2,3 +2,4 @@
.venv
pdfs
images
node_modules

55
client/cadastre.html

@ -1,55 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<style>
#myMap {
height: 1000px;
}
</style>
<title>Map</title>
</head>
<body>
<div id="myMap"></div>
</body>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script>
const tilesProvider = 'https://{s}.tile.openstreetmap.de/{z}/{x}/{y}.png'
let myMap = L.map ('myMap').setView([41.41,2.13],12)
L.tileLayer (tilesProvider, {
maxzoom: 18,
}).addTo (myMap)
/*DEfinim les propietats del marcador*/
let iconMarker = L.icon({
iconUrl:'marker.png',
iconSize:[30,30],
iconAnchor:[15,30] /*A quin punt en píxels de la imatge es clva el marcador al mapa */
})
/*Definim el marcador amb les coordenades i l'objecte iconMarker definit*/
/*carregar els arxius geojson*/
function fetchJSON(url){
return fetch(url)
.then(function(response){
return response.json();
});
}
var data=fetchJSON ('cadastre/constru.geojson').then(function(data){
return data;
});
L.geoJSON(data).addTo(myMap);
</script>
</html>

62
client/index.js

@ -1,49 +1,47 @@
const path = require ('path');
const express = require("express"); //carreguem el framework express
const bodyParser = require("body-parser");
const sqlite = require('spatialite');
const app = express (); //inicialitzem express
var sqlite = require ('spatialite');
var db = new sqlite.Database('parceles.db');
const db = new sqlite.Database('parceles.sqlite');
//settings
app.set('port', process.env.PORT || 3000); //etablim quin ha de ser el port. El comando process.env.PORT indica que si hi ha un port preconfigurat a la màquina, agafi aquest iq ue si no sigui el 3000
//static files
app.use(express.static(path.join(__dirname,'public'))) //en comptes de posar el path a mà, utilitzem la funció path per evitar errors entre windows i linux del tipus /public o \public.
app.get('/parceles', function(req, res){
//ens hem quedat aquí! 28/05
var query = "SELECT geom FROM parcela WHERE Intersects(geom, GeomFromText('POLYGON((2.1464967727661137 41.42099183521083, 2.1464967727661137 41.40489940456091,2.1193313598632817 41.40489940456091, 2.1193313598632817 41.42099183521083, 2.1464967727661137 41.42099183521083))')) AS geojson;";
app.use(express.static(path.join(__dirname,'public'))); //en comptes de posar el path a mà, utilitzem la funció path per evitar errors entre windows i linux del tipus /public o \public.
// Instantiate the bodyParser configured to work with json payloads and attach it to the express app
app.use(bodyParser.json());
// parceles endpoint
app.post('/parceles', function(req, res){
var query = `SELECT
ogc_fid,
refcat,
AsGeoJSON(geometry) AS "geometry"
FROM
parceles
WHERE
ST_Intersects(
geometry,
ST_GeomFromText('POLYGON((${req.body.east} ${req.body.north}, ${req.body.east} ${req.body.south},${req.body.west} ${req.body.south}, ${req.body.west} ${req.body.north}, ${req.body.east} ${req.body.north}))', 4326)
);`;
console.log(query);
db.spatialite(function(err){
var rows = [];
const features = [];
db.each(query, function (err, row) {
rows.push(row.geojson);
features.push(`{"type":"Feature","properties":{"ogc_fid":${row.ogc_fid},"refcat":"${row.refcat}"},"geometry":${row.geometry}}`);
}, function (err, count) {
res.send(`{
"type": "FeatureCollection",
"features": [
${rows.join(',')}
]
}`);
res.send(`{"type": "FeatureCollection", "features": [${features.join(",")}]}`);
});
console.log("On ends query");
// .complete(function (data) {
// res.send(JSON.stringify(data));
// });
});
});
//start the server
const server = app.listen(app.get('port'), () => { //amb aquest comando començem a utilitzar el port
console.log('server on port', app.get('port'))
})
var testdata={
"type": "FeatureCollection",
"name": "test",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 2.131918098875751, 41.412998903027052 ], [ 2.131866898692675, 41.413043013550201 ], [ 2.131919107080173, 41.413060228915818 ], [ 2.131935458574848, 41.413009824945057 ], [ 2.132160039536676, 41.413151423066047 ], [ 2.132214160223189, 41.413148584102565 ], [ 2.13221512430667, 41.413157058386275 ], [ 2.132885535136759, 41.413112211768791 ], [ 2.132884563779806, 41.413104277883207 ], [ 2.132916422850901, 41.413101905831269 ], [ 2.132937144647257, 41.413100256004263 ], [ 2.133139598576212, 41.412920101121394 ], [ 2.133428494133724, 41.412662943673269 ], [ 2.133468524568111, 41.412627305410055 ], [ 2.133444022443288, 41.412602809727709 ], [ 2.133400680974415, 41.412559877984918 ], [ 2.133359579189742, 41.412519485185506 ], [ 2.133315297482119, 41.4124748349101 ], [ 2.133281676800167, 41.412438731944391 ], [ 2.133250087625188, 41.412402824422536 ], [ 2.133226690120387, 41.41237175256105 ], [ 2.133202091458698, 41.412341031943576 ], [ 2.133183789380371, 41.412313691521177 ], [ 2.133164822168687, 41.412282382801507 ], [ 2.133139247402766, 41.412244088548519 ], [ 2.133115664614324, 41.412208961910231 ], [ 2.133087296304647, 41.41217379920807 ], [ 2.133030149365936, 41.412107343898754 ], [ 2.132989819694177, 41.412071910887278 ], [ 2.132788630302131, 41.412247120965411 ], [ 2.132726528370582, 41.412301332640368 ], [ 2.132697716473734, 41.412326516488079 ], [ 2.132524732174752, 41.412477078120432 ], [ 2.132051240077475, 41.412884431893296 ], [ 2.131980796689533, 41.412944971021155 ], [ 2.131918098875751, 41.412998903027052 ] ] ] } },
{ "type": "Feature", "properties": { }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 2.131701239621936, 41.411908273609015 ], [ 2.131419749409599, 41.412090702711311 ], [ 2.131399471377777, 41.412103970737043 ], [ 2.131379797529412, 41.412116792947614 ], [ 2.131339003347898, 41.412143237108744 ], [ 2.131306173677312, 41.412164607138877 ], [ 2.131246683026703, 41.412202799945803 ], [ 2.131151828539192, 41.412263514540072 ], [ 2.131140844954818, 41.412252712715045 ], [ 2.130658344134337, 41.412518125226441 ], [ 2.13059882518509, 41.41255793882344 ], [ 2.130269438583491, 41.412736323583225 ], [ 2.130145623079942, 41.412806276235514 ], [ 2.130247390103653, 41.412909190201383 ], [ 2.130300231696364, 41.412948862180187 ], [ 2.130368832458563, 41.413008649813634 ], [ 2.130376875488746, 41.413015646351646 ], [ 2.130389048265573, 41.41302699768427 ], [ 2.130454045569683, 41.413087838924774 ], [ 2.130545879481549, 41.413173022929669 ], [ 2.130618428448181, 41.41324184320532 ], [ 2.130667301556527, 41.413291573380285 ], [ 2.130713187763582, 41.413332003283536 ], [ 2.13078724355454, 41.413395524939801 ], [ 2.131010330486906, 41.413562497024429 ], [ 2.131095441265656, 41.41349684494925 ], [ 2.131120795129148, 41.413479832182261 ], [ 2.131142584573999, 41.413469908383725 ], [ 2.131150278803043, 41.413467174177811 ], [ 2.131158087871615, 41.413464801136989 ], [ 2.131166131420798, 41.413462790164743 ], [ 2.131182566639081, 41.413459581518673 ], [ 2.131233197566957, 41.413458252435873 ], [ 2.131268940212464, 41.413460774194149 ], [ 2.131344026387681, 41.413473951577849 ], [ 2.1313811279455, 41.413482248334986 ], [ 2.131398425497036, 41.413486162061076 ], [ 2.13150846943713, 41.413506894792278 ], [ 2.131758035612068, 41.413554085961685 ], [ 2.131773128659075, 41.413507901523701 ], [ 2.131785968601889, 41.413469176271505 ], [ 2.13180093237309, 41.413423711450278 ], [ 2.1318105320962, 41.413394689798984 ], [ 2.131888758347303, 41.413153609947656 ], [ 2.131919107080173, 41.413060228915818 ], [ 2.131866898692675, 41.413043013550201 ], [ 2.131918098875751, 41.412998903027052 ], [ 2.131980796689533, 41.412944971021155 ], [ 2.132051240077475, 41.412884431893296 ], [ 2.132524732174752, 41.412477078120432 ], [ 2.132697716473734, 41.412326516488079 ], [ 2.132726528370582, 41.412301332640368 ], [ 2.132788630302131, 41.412247120965411 ], [ 2.132989819694177, 41.412071910887278 ], [ 2.133002048088574, 41.412061104009766 ], [ 2.13297237213985, 41.412034308363808 ], [ 2.132933597842677, 41.411998887053656 ], [ 2.132872554385094, 41.411946093640836 ], [ 2.132812677454009, 41.411896011226418 ], [ 2.132756746120195, 41.411855146133099 ], [ 2.132696801075153, 41.411810197397763 ], [ 2.132632429510611, 41.411765215259742 ], [ 2.132579296621746, 41.41172986572878 ], [ 2.132521737133453, 41.411694487300814 ], [ 2.132476630680257, 41.411667395031017 ], [ 2.13242782748088, 41.411639374121187 ], [ 2.132371878425293, 41.411608867287612 ], [ 2.132332572170567, 41.411587389816887 ], [ 2.131869915254524, 41.411822538916844 ], [ 2.131701239621936, 41.411908273609015 ] ] ] } }
]
}
console.log('server on port', app.get('port'));
});

2897
client/package-lock.json

File diff suppressed because it is too large

1
client/package.json

@ -16,6 +16,7 @@
"spatialite": "^0.1.0"
},
"devDependencies": {
"body-parser": "^1.19.0",
"nodemon": "^2.0.7"
}
}

BIN
client/parceles.db → client/parceles.sqlite

Binary file not shown.

136
client/public/index.html

@ -1,52 +1,73 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<style>
#myMap {
height: 1000px;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<style>
#myMap {
height: 1000px;
}
</style>
<title>Map</title>
</head>
<body>
<div id="myMap"></div>
<div id="myMap"></div>
</body>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<script>
const tilesProvider = 'https://{s}.tile.openstreetmap.de/{z}/{x}/{y}.png'
let myMap = L.map ('myMap').setView([41.41,2.13],12)
L.tileLayer (tilesProvider, {
let myMap = L.map('myMap').setView([41.41, 2.13], 12)
L.tileLayer(tilesProvider, {
maxzoom: 18,
}).addTo (myMap)
}).addTo(myMap)
/*DEfinim les propietats del marcador*/
let iconMarker = L.icon({
iconUrl:'images/marker.png',
iconSize:[30,30],
iconAnchor:[15,30] /*A quin punt en píxels de la imatge es clva el marcador al mapa */
iconUrl: 'images/marker.png',
iconSize: [30, 30],
iconAnchor: [15, 30] /*A quin punt en píxels de la imatge es clva el marcador al mapa */
})
let marker = L.marker ([41.41, 2.13], {icon:iconMarker}).addTo(myMap);
let marker = L.marker([41.41, 2.13], {
icon: iconMarker
}).addTo(myMap);
/*Definim el marcador amb les coordenades i l'objecte iconMarker definit*/
/*carregar els arxius geojson*/
function fetchJSON(url){
function fetchJSON (url) {
return fetch(url)
.then(function(response){
.then(function(response) {
return response.json();
});
}
function fetchParceles () {
return fetch("parceles", {
method: "POST",
cache: "no-cache",
cors: "no-cors",
headers: {
"Content-Type": "application/json",
"Accept": "application/json"
},
redirect: "error",
body: JSON.stringify({
west: myMap.getBounds().getWest(),
north: myMap.getBounds().getNorth(),
east: myMap.getBounds().getEast(),
south: myMap.getBounds().getSouth()
})
}).then(function(response) {
return response.json();
});
}
};
var style = {
fillColor: 'white',
weight: 1,
@ -55,45 +76,46 @@
dashArray: '3',
fillOpacity: 0.7
};
var layers = {districtes:null, barris:null}
var layers = {
districtes: null,
barris: null
}
var currentlayer = null;
fetchJSON('data/districtres.geojson').then(function(data){
layers.districtes=data;
currentlayer = L.geoJSON(data,{style:style}).addTo(myMap);
fetchJSON('data/districtres.geojson').then(function(data) {
layers.districtes = data;
currentlayer = L.geoJSON(data, {
style: style
}).addTo(myMap);
})
myMap.on("zoom", function(event){//creem un event que escolti els botons de zoom (es una fucnion propia del leaflet)
if (myMap.getZoom()<=12){
currentlayer.clearLayers();
currentlayer.addData(layers.districtes);
//L.geoJSON(layers.districtes, {style: style}).addTo(myMap);
}
else if (myMap.getZoom()>12 && myMap.getZoom()<=15) {
if (layers.barris!=null){
currentlayer.clearLayers();
currentlayer.addData(layers.barris);
//L.geoJSON(layers.barris, {style: style}).addTo(myMap);
}
else{
fetchJSON('data/barris.4326.geojson').then(function(data){
layers.barris=data;
currentlayer.clearLayers();
currentlayer.addData(data);
//L.geoJSON(data,{style:style}).addTo(myMap);
});
}
function loadData (ev) {
if (myMap.getZoom() <= 12) {
currentlayer.clearLayers();
currentlayer.addData(layers.districtes);
} else if (myMap.getZoom() > 12 && myMap.getZoom() <= 16) {
if (layers.barris != null) {
currentlayer.clearLayers();
currentlayer.addData(layers.barris);
} else {
fetchJSON('data/barris.4326.geojson')
.then(function(data) {
layers.barris = data;
currentlayer.clearLayers();
currentlayer.addData(data);
});
}
else {
fetchJSON('parceles').then(function(data){
currentlayer.clearLayers();
currentlayer.addData(data);
})
}
});
} else {
fetchParceles().then(function(data) {
currentlayer.clearLayers();
currentlayer.addData(data);
})
}
};
//creem un event que escolti els botons de zoom (es una fucnion propia del leaflet)
myMap.on("zoom", loadData);
myMap.on("moveend", loadData);
</script>
</html>

BIN
client/signal-desktop-keyring.gpg

Binary file not shown.
Loading…
Cancel
Save