bruno_carrion
/
desregistradores
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
main
Lucas García 1 year ago
parent aff9d08cee
commit 80f94fa3f7
8 changed files with 2997 additions and 155 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
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 vendored
Unescape View File

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

55
client/cadastre.html
Unescape 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
Unescape 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 generated
View File

File diff suppressed because it is too large Load Diff

1
client/package.json
Unescape 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
Unescape 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