Browse Source

commit client. Codi reesctructurat amb vue

main
Pau 1 month ago
parent
commit
5946e0fd5a
  1. 2
      client/index.js
  2. 2902
      client/package-lock.json
  3. 3
      client/package.json
  4. 13
      client/public/index.css
  5. 137
      client/public/index.html
  6. 186
      client/public/index.js
  7. 1
      client/public/vendor/vue.min.js
  8. 3
      package-lock.json

2
client/index.js

@ -29,8 +29,6 @@ app.post('/parceles', function(req, res){
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){
const features = [];
db.each(query, function (err, row) {

2902
client/package-lock.json

File diff suppressed because it is too large

3
client/package.json

@ -13,7 +13,8 @@
"dependencies": {
"express": "^4.17.1",
"socket.io": "^4.1.2",
"spatialite": "^0.1.0"
"spatialite": "^0.1.0",
"vue": "^2.6.14"
},
"devDependencies": {
"body-parser": "^1.19.0",

13
client/public/index.css

@ -0,0 +1,13 @@
#myMap {
height: 1000px;
}
#mapInfo {
position: absolute;
z-index: 1000;
background-color: red;
color: white;
top: 10px;
right: 10px;
font-size: 30px;
}

137
client/public/index.html

@ -6,146 +6,19 @@
<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="index.css">
<script src="vendor/vue.min.js"></script>
<title>Map</title>
</head>
<body>
<div id="myMap"></div>
<div id="app"></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: '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);
/*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();
});
}
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();
});
};
//canvis de color segons el valor d'una variable
function getColor(nom, districte) {
return nom == "Ciutat Vella" ? '#f7fcfd' :
nom == "Eixample" ? '#e5f5f9' :
nom == "Sants-Montjuïc" ? '#ccece6' :
nom == "Les Corts" ? '#99d8c9' :
nom == "Sarrià-Sant Gervasi" ? '#66c2a4' :
nom == "Gràcia" ? '#41ae76' :
nom == "Horta-Guinardó" ? '#238b45' :
nom == "Nou Barris" ? '#006d2c' :
nom == "Sant Andreu" ? '#00441b' :
nom == "Sant Martí" ? '#e0f3db' :
districte == "01" ? '#f7fcfd' :
districte == "02" ? '#e5f5f9' :
districte == "03" ? '#ccece6' :
districte == "04" ? '#99d8c9' :
districte == "05" ? '#66c2a4' :
districte== "06" ? '#41ae76' :
districte == "07" ? '#238b45' :
districte == "08" ? '#006d2c' :
districte == "09" ? '#00441b' :
districte == "10" ? '#e0f3db' :
'grey';
};
//creem una funció per donar estil segons el NOM que tingui el districte
function style(feature) {
return {
fillColor: getColor(feature.properties.NOM, feature.properties.DISTRICTE),
weight: 1.5,
opacity: 1,
color: 'black',
dashArray: '3',
fillOpacity: 0.7
};
}
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);
})
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 {
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>
<script src="index.js"></script>

186
client/public/index.js

@ -0,0 +1,186 @@
function renderLeaflet (el, onClick){
const tilesProvider = 'https://{s}.tile.openstreetmap.de/{z}/{x}/{y}.png';
let myMap = L.map(el).setView([41.41, 2.13], 12);
L.tileLayer(tilesProvider, {
maxzoom: 18,
}).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 */
})
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) {
return fetch(url)
.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();
});
};
//canvis de color segons el valor d'una variable
function getColor(nom, districte) {
return nom == "Ciutat Vella" ? '#f7fcfd' :
nom == "Eixample" ? '#e5f5f9' :
nom == "Sants-Montjuïc" ? '#ccece6' :
nom == "Les Corts" ? '#99d8c9' :
nom == "Sarrià-Sant Gervasi" ? '#66c2a4' :
nom == "Gràcia" ? '#41ae76' :
nom == "Horta-Guinardó" ? '#238b45' :
nom == "Nou Barris" ? '#006d2c' :
nom == "Sant Andreu" ? '#00441b' :
nom == "Sant Martí" ? '#e0f3db' :
districte == "01" ? '#f7fcfd' :
districte == "02" ? '#e5f5f9' :
districte == "03" ? '#ccece6' :
districte == "04" ? '#99d8c9' :
districte == "05" ? '#66c2a4' :
districte== "06" ? '#41ae76' :
districte == "07" ? '#238b45' :
districte == "08" ? '#006d2c' :
districte == "09" ? '#00441b' :
districte == "10" ? '#e0f3db' :
'grey';
};
//creem una funció per donar estil segons el NOM que tingui el districte
function style(feature) {
return {
fillColor: getColor(feature.properties.NOM, feature.properties.DISTRICTE),
weight: 1.5,
opacity: 1,
color: 'black',
dashArray: '3',
fillOpacity: 0.7
};
}
var layers = {
districtes: null,
barris: null
}
var currentlayer = null;//DEclarem una variable fora de la funció fetch perquè sigui accessible
//Here we get access to the layer that was hovered through e.target, set a thick grey border on
//the layer as our highlight effect, also bringing it to the front so that the border doesn’t clash with nearby states (but not for IE, Opera or Edge, since they have problems doing bringToFront on mouseover).
//First we’ll define an event listener for layer mouseover event
function highlightFeature(e) {
var layer = e.target; //creem una varible layer on guardem el troçet de layer pel que passem per sobre
layer.setStyle({
weight: 5,
color: '#000000',
dashArray: '',
fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
};
//Next we’ll define what happens on mouseout
function resetHighlight(e) {
currentlayer.resetStyle(e.target);
};
//As an additional touch, let’s define a click listener that zooms to the state:
function zoomToFeature(e) {
if (typeof onClick === 'function') {
onClick(e)
}
myMap.fitBounds(e.target.getBounds());
}
//Now we’ll use the onEachFeature option to add the listeners on our state layers:
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
};
fetchJSON('data/districtres.geojson').then(function(data) {
layers.districtes = data;
currentlayer = L.geoJSON(data, {
style: style,
onEachFeature: onEachFeature
}).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 {
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);
}
var MapInfo = Vue.component('map-info', {
template: '<div id="mapInfo">{{ message }}</div>',
props: ['message']
})
var myView = new Vue ({
el: "#app",
template: `<div id='app'>
<div id='myMap'></div>
<map-info v-bind:message='nomDistricte'></map-info>
</div>`,
data() {
return {
nomDistricte: null
}
},
mounted: function () {
renderLeaflet (this.$el, function (ev) {
myView.nomDistricte = ev.target.feature.properties.NOM
}) //aquí el this apunta a l'objecte dintre del qual s'ha definit la funció
}
})

1
client/public/vendor/vue.min.js

@ -0,0 +1 @@
/home/pau/leaflet/cadastre/desregistradores/client/node_modules/vue/dist/vue.min.js

3
package-lock.json

@ -1,3 +0,0 @@
{
"lockfileVersion": 1
}
Loading…
Cancel
Save