bruno_carrion
/
desregistradores
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
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
aff9d08cee
commit
80f94fa3f7
8 changed files with 2997 additions and 155 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

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

55
client/cadastre.html
View File

@ -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
View File

@ -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
View File

File diff suppressed because it is too large

1
client/package.json
View File

@ -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
View File

Binary file not shown.

136
client/public/index.html
View File

@ -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
View File

Binary file not shown.
Write Preview
Loading…
Cancel
Save