314 lines
17 KiB
TypeScript
Executable File
314 lines
17 KiB
TypeScript
Executable File
import { tools } from '@tools'
|
|
import { useQuasar } from 'quasar'
|
|
import { PropType, defineComponent, onMounted, ref, computed, nextTick, shallowRef } from 'vue'
|
|
|
|
import 'leaflet/dist/leaflet.css'
|
|
// @ts-ignore
|
|
import * as L from 'leaflet'
|
|
import 'leaflet.markercluster/dist/MarkerCluster.css'
|
|
import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
|
|
import 'leaflet.markercluster'
|
|
import '../../utils/leaflet-extensions'; // Importa le estensioni
|
|
|
|
import { useUserStore } from '@src/store/UserStore'
|
|
import { useGlobalStore } from '@src/store/globalStore'
|
|
import { setCookie } from '@src/utils/auth'
|
|
|
|
export default defineComponent({
|
|
name: 'CMapComuni',
|
|
setup(props, { emit }) {
|
|
const $q = useQuasar()
|
|
const userStore = useUserStore()
|
|
const globalStore = useGlobalStore()
|
|
|
|
const iconWidth = ref(25)
|
|
const iconHeight = ref(40)
|
|
const map = shallowRef(<any>null)
|
|
const zoom = ref(6)
|
|
const center = ref(<any>[42.71, 12.934])
|
|
const arrprovince = ref(<any>[])
|
|
|
|
const visumappa = ref(true)
|
|
|
|
const comuniData = ref(<any>{})
|
|
const mappacaricata = ref(false)
|
|
|
|
const initialMap = ref(<any>null);
|
|
|
|
const myIcon = L.icon({
|
|
iconUrl: 'images/icon.png',
|
|
iconSize: [30, 30],
|
|
iconAnchor: [22, 35],
|
|
popupAnchor: [-6, -36],
|
|
shadowUrl: 'images/marker-shadow.png',
|
|
shadowSize: [60, 30],
|
|
shadowAnchor: [22, 35]
|
|
});
|
|
|
|
function mywidth() {
|
|
return tools.getwidth($q) - 20
|
|
}
|
|
|
|
function myheight() {
|
|
return $q.screen.height - 50
|
|
}
|
|
|
|
const iconSize = computed(() => {
|
|
return [iconWidth.value, iconHeight.value];
|
|
})
|
|
|
|
function changeIcon() {
|
|
iconWidth.value += 2;
|
|
if (iconWidth.value > iconHeight.value) {
|
|
iconWidth.value = Math.floor(iconHeight.value / 2);
|
|
}
|
|
}
|
|
|
|
function getColor(d: any) {
|
|
return d > 500 ? '#800026' :
|
|
d > 200 ? '#BD0026' :
|
|
d > 100 ? '#E31A1C' :
|
|
d > 50 ? '#FC4E2A' :
|
|
d > 20 ? '#FD8D3C' :
|
|
d > 10 ? '#FEB24C' :
|
|
d > 0 ? '#FED976' :
|
|
'#FFEDA0';
|
|
}
|
|
|
|
function styleFunctionBasic(feature: any) {
|
|
return {
|
|
fillColor: 'blue',
|
|
color: 'black',
|
|
weight: 1,
|
|
opacity: 0.7,
|
|
fillOpacity: 0.5
|
|
};
|
|
}
|
|
|
|
function styleFunction(feature: any) {
|
|
// Qui verrà implementata la logica per determinare il colore basato sul numero di utenti
|
|
// esempio semplice:
|
|
const userCount = getUserCountForProv(feature.properties.prov); // Assicurati di implementare getUserCountForComune
|
|
const density = userCount / feature.properties.area; // supponendo che 'area' sia un campo esistente
|
|
return {
|
|
fillColor: getColor(density),
|
|
weight: 2,
|
|
opacity: 1,
|
|
color: 'white',
|
|
fillOpacity: 0.7
|
|
};
|
|
}
|
|
|
|
function getUserCountForComune(comuneName: string) {
|
|
// Implementa questa funzione per ottenere il numero di utenti per il dato comune
|
|
// Si può utilizzare una richiesta a un API o una mappa locale, a seconda di come sono archiviati i dati
|
|
const trovataprov = arrprovince.value.find((prov: any) => prov.descr === comuneName)
|
|
if (trovataprov) {
|
|
return trovataprov.userCount
|
|
}
|
|
|
|
return 0; // stub, implementazione di esempio
|
|
}
|
|
function getUserCountForProv(prov: string) {
|
|
// Implementa questa funzione per ottenere il numero di utenti per il dato comune
|
|
// Si può utilizzare una richiesta a un API o una mappa locale, a seconda di come sono archiviati i dati
|
|
const trovataprov = arrprovince.value.find((prov: any) => prov.prov === prov)
|
|
if (trovataprov) {
|
|
return trovataprov.userCount
|
|
}
|
|
|
|
return 0; // stub, implementazione di esempio
|
|
}
|
|
|
|
onMounted(async () => {
|
|
// Ottengo la lista degli utenti con i lat e long
|
|
arrprovince.value = await userStore.getProvincesForMap()
|
|
|
|
comuniData.value = await globalStore.getGeoJsonByProvince('RN')
|
|
|
|
/*
|
|
comuniData.value = [{
|
|
"type": "Feature", "properties":
|
|
{
|
|
"cartodb_id": 7668,
|
|
"comune": "Bellaria-Igea Marina",
|
|
"ISTAT": 99001
|
|
},
|
|
"geometry": {
|
|
"type": "MultiPolygon",
|
|
"coordinates":
|
|
[
|
|
[[
|
|
[12.44976, 44.162465], [12.450616, 44.162224],
|
|
[12.458681, 44.155807], [12.478901, 44.138932],
|
|
[12.483937, 44.134279], [12.488855, 44.129281],
|
|
[12.491881, 44.126121], [12.494282, 44.123739],
|
|
[12.501596, 44.117209], [12.503714, 44.115562],
|
|
[12.49573, 44.110561], [12.489229, 44.108419],
|
|
[12.484759, 44.108458], [12.483431, 44.109019],
|
|
[12.476477, 44.109618], [12.468653, 44.109789],
|
|
[12.460359, 44.108605], [12.455907, 44.108502],
|
|
[12.452866, 44.108595], [12.45264, 44.108666],
|
|
[12.45259, 44.108682], [12.452496, 44.109073],
|
|
[12.452396, 44.109587], [12.453329, 44.110754],
|
|
[12.453329, 44.112248], [12.45229, 44.114656],
|
|
[12.449993, 44.118642], [12.44721, 44.122138],
|
|
[12.44525, 44.12389], [12.444805, 44.123336],
|
|
[12.444356, 44.123143], [12.443879, 44.12331],
|
|
[12.443467, 44.12353], [12.441217, 44.125029],
|
|
[12.439389, 44.127569], [12.439426, 44.12971],
|
|
[12.439538, 44.131422], [12.439637, 44.132472],
|
|
[12.439961, 44.135892], [12.440291, 44.136846],
|
|
[12.441244, 44.138402], [12.441893, 44.139246],
|
|
[12.442357, 44.139916], [12.442546, 44.140199],
|
|
[12.442645, 44.140349], [12.442018, 44.140746],
|
|
[12.437704, 44.142884], [12.435929, 44.143756],
|
|
[12.433716, 44.144822], [12.429921, 44.146674],
|
|
[12.42872, 44.147345], [12.428912, 44.147595],
|
|
[12.43948, 44.158162]
|
|
]
|
|
]]
|
|
}
|
|
}]*/
|
|
|
|
|
|
/*
|
|
comuniData.value = [{ "type": "Feature", "properties": { "cartodb_id": 7668, "comune": "Bellaria-Igea Marina", "ISTAT": 99001 }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[12.44976, 44.162465], [12.450616, 44.162224], [12.458681, 44.155807], [12.478901, 44.138932], [12.483937, 44.134279], [12.488855, 44.129281], [12.491881, 44.126121], [12.494282, 44.123739], [12.501596, 44.117209], [12.503714, 44.115562], [12.49573, 44.110561], [12.489229, 44.108419], [12.484759, 44.108458], [12.483431, 44.109019], [12.476477, 44.109618], [12.468653, 44.109789], [12.460359, 44.108605], [12.455907, 44.108502], [12.452866, 44.108595], [12.45264, 44.108666], [12.45259, 44.108682], [12.452496, 44.109073], [12.452396, 44.109587], [12.453329, 44.110754], [12.453329, 44.112248], [12.45229, 44.114656], [12.449993, 44.118642], [12.44721, 44.122138], [12.44525, 44.12389], [12.444805, 44.123336], [12.444356, 44.123143], [12.443879, 44.12331], [12.443467, 44.12353], [12.441217, 44.125029], [12.439389, 44.127569], [12.439426, 44.12971], [12.439538, 44.131422], [12.439637, 44.132472], [12.439961, 44.135892], [12.440291, 44.136846], [12.441244, 44.138402], [12.441893, 44.139246], [12.442357, 44.139916], [12.442546, 44.140199], [12.442645, 44.140349], [12.442018, 44.140746], [12.437704, 44.142884], [12.435929, 44.143756], [12.433716, 44.144822], [12.429921, 44.146674], [12.42872, 44.147345], [12.428912, 44.147595], [12.43948, 44.158162], [12.441116, 44.159625], [12.441631, 44.159888], [12.447979, 44.161947], [12.44976, 44.162465]]]] }, "id": '1' },
|
|
{ "type": "Feature", "properties": { "cartodb_id": 7686, "comune": "Casteldelci", "ISTAT": 99021 }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[12.151102, 43.832151], [12.154073, 43.832875], [12.154686, 43.832948], [12.155309, 43.832967], [12.155892, 43.832942], [12.156276, 43.832904], [12.156644, 43.832822], [12.157147, 43.832691], [12.157548, 43.832567], [12.15784, 43.832383], [12.158036, 43.831905], [12.15809, 43.831472], [12.158096, 43.831156], [12.158054, 43.830847], [12.157944, 43.830643], [12.157706, 43.83037], [12.157421, 43.83009], [12.157035, 43.829619], [12.156791, 43.829288], [12.156815, 43.828991], [12.157038, 43.828548], [12.16088, 43.82412], [12.161093, 43.82393], [12.161407, 43.823736], [12.162315, 43.823333], [12.162915, 43.823163], [12.165225, 43.822874], [12.165858, 43.822906], [12.166489, 43.823028], [12.167551, 43.82317], [12.167967, 43.823221], [12.168638, 43.823221], [12.169137, 43.823063], [12.169238, 43.822983], [12.169769, 43.822568], [12.170123, 43.822203], [12.171574, 43.820065], [12.172195, 43.819125], [12.172841, 43.817936], [12.174926, 43.813935], [12.176541, 43.810541], [12.175856, 43.81029], [12.174987, 43.809864], [12.171146, 43.80794], [12.170915, 43.807749], [12.1707, 43.807502], [12.170534, 43.807267], [12.17046, 43.807159], [12.1703, 43.806923], [12.170233, 43.806808], [12.170052, 43.806427], [12.169935, 43.805975], [12.169796, 43.805344], [12.169755, 43.804625], [12.172752, 43.79566], [12.17834, 43.787434], [12.183274, 43.782515], [12.184189, 43.7815], [12.184524, 43.780797], [12.184576, 43.780363], [12.184575, 43.779643], [12.184589, 43.778508], [12.18466, 43.776044], [12.184691, 43.775579], [12.184772, 43.775444], [12.18493, 43.775195], [12.185221, 43.774817], [12.185565, 43.774515], [12.18614, 43.77413], [12.186764, 43.773924], [12.197778, 43.770631], [12.198509, 43.770476], [12.199348, 43.770376], [12.19938, 43.77026], [12.199458, 43.76992], [12.199452, 43.769868], [12.199278, 43.769396], [12.199017, 43.768701], [12.198418, 43.767255], [12.198333, 43.76705], [12.198195, 43.766789], [12.198043, 43.766559], [12.197909, 43.766378], [12.197748, 43.766166], [12.197571, 43.765874], [12.197474, 43.765688], [12.19743, 43.765491], [12.197421, 43.76532], [12.197444, 43.765121], [12.197641, 43.764625], [12.197858, 43.764025], [12.19787, 43.763962], [12.197935, 43.763555], [12.198007, 43.763148], [12.198076, 43.762754], [12.198137, 43.762509], [12.19816, 43.762229], [12.198245, 43.761975], [12.198311, 43.76164], [12.198337, 43.761356], [12.198236, 43.761097], [12.198112, 43.760871], [12.197873, 43.760635], [12.197615, 43.760462], [12.196151, 43.759747], [12.194993, 43.759216], [12.194614, 43.759092], [12.194329, 43.758875], [12.194213, 43.758626], [12.195958, 43.747895], [12.196035, 43.747708], [12.196945, 43.745909], [12.197137, 43.745557], [12.197488, 43.745025], [12.197665, 43.744811], [12.200649, 43.74129], [12.200584, 43.740527], [12.200559, 43.74032], [12.200472, 43.74008], [12.200352, 43.73975], [12.199463, 43.73765], [12.199243, 43.737355], [12.194633, 43.731924], [12.191569, 43.734783], [12.184892, 43.741861], [12.184642, 43.742075], [12.184245, 43.742289], [12.178433, 43.744999], [12.171172, 43.751661], [12.171077, 43.751825], [12.170872, 43.752178], [12.16949, 43.754435], [12.164582, 43.761562], [12.164048, 43.762261], [12.16367, 43.762362], [12.162664, 43.762408], [12.16166, 43.762355], [12.160619, 43.761956], [12.152521, 43.758718], [12.148546, 43.75592], [12.148184, 43.755538], [12.147547, 43.754993], [12.146919, 43.754564], [12.145876, 43.754035], [12.142992, 43.752926], [12.142081, 43.752604], [12.141148, 43.752414], [12.126008, 43.749426], [12.125209, 43.749291], [12.124725, 43.749223], [12.124203, 43.749183], [12.123578, 43.749151], [12.122792, 43.749334], [12.110378, 43.752563], [12.108554, 43.753063], [12.107446, 43.753771], [12.105919, 43.755908], [12.105292, 43.756762], [12.104674, 43.757544], [12.104521, 43.757701], [12.104166, 43.758044], [12.104044, 43.758142], [12.103736, 43.758371], [12.102252, 43.759456], [12.101239, 43.76005], [12.10081, 43.760395], [12.099288, 43.761958], [12.096191, 43.765304], [12.096175, 43.765881], [12.096203, 43.766202], [12.096285, 43.76655], [12.096518, 43.767208], [12.100138, 43.775179], [12.100589, 43.776157], [12.102859, 43.788276], [12.102676, 43.788653], [12.102595, 43.78913], [12.102488, 43.790285], [12.102469, 43.790493], [12.102677, 43.791649], [12.102893, 43.792271], [12.103632, 43.793558], [12.10409, 43.794117], [12.105007, 43.795071], [12.107692, 43.796126], [12.108094, 43.796244], [12.112737, 43.796434], [12.117102, 43.803822], [12.116581, 43.804302], [12.116208, 43.804796], [12.116133, 43.805361], [12.120222, 43.812821], [12.120593, 43.813486], [12.120899, 43.813883], [12.121089, 43.814129], [12.121457, 43.814558], [12.12167, 43.814791], [12.130804, 43.824759], [12.139978, 43.827569], [12.140643, 43.827686], [12.144574, 43.828613], [12.145285, 43.828818], [12.145698, 43.828952], [12.146209, 43.829216], [12.147071, 43.829769], [12.147723, 43.830364], [12.148316, 43.830995], [12.148521, 43.831349], [12.148855, 43.831968], [12.149468, 43.833295], [12.151102, 43.832151]]]] }, "id": '2' }
|
|
]*/
|
|
|
|
console.log(comuniData.value)
|
|
|
|
await nextTick(); // Wait for the next DOM update cycle
|
|
|
|
let lat = tools.getCookie(tools.COOK_MAP_CENTER_LAT, 42.71)
|
|
let lng = tools.getCookie(tools.COOK_MAP_CENTER_LONG, 12.934)
|
|
center.value = { lat, lng }
|
|
zoom.value = tools.getCookie(tools.COOK_MAP_ZOOM, zoom.value)
|
|
|
|
initialMap.value = L.map('map',
|
|
{
|
|
zoomControl: true, zoom: zoom.value, zoomAnimation: true,
|
|
fadeAnimation: true, markerZoomAnimation: true,
|
|
center: center.value,
|
|
}
|
|
);
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 15,
|
|
attribution: ''
|
|
}).addTo(initialMap.value);
|
|
|
|
let crownHill = L.marker([43.87364, 12.472438]).bindPopup('This is Crown Hill Park.'),
|
|
rubyHill = L.marker([43.87364, 12.482438]).bindPopup('This is Ruby Hill Park.');
|
|
|
|
let parks = L.layerGroup([crownHill, rubyHill]);
|
|
|
|
let layerControl = L.control.layers().addTo(initialMap.value);
|
|
|
|
const MyCustomControl = L.Control.extend({
|
|
options: {
|
|
position: 'topright', // default
|
|
// Puoi aggiungere qui altre opzioni se necessario
|
|
},
|
|
|
|
onAdd: function (map: any) {
|
|
// Crea un container DOM per il tuo controllo
|
|
const container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');
|
|
|
|
// Puoi configurare il tuo container come preferisci, incluso il suo aspetto
|
|
container.style.backgroundColor = 'white';
|
|
// container.style.backgroundImage = 'url('path_to_your_icon.png')"; // Optional: uso di un'icona personalizzata
|
|
container.style.backgroundSize = '100px 30px';
|
|
container.style.width = '100px';
|
|
container.style.height = '30px';
|
|
|
|
// Crea un elemento di testo e personalizza il suo stile
|
|
const buttonText = L.DomUtil.create('div', 'button-text', container);
|
|
buttonText.innerText = 'Torna alla Lista';
|
|
buttonText.style.margin = '4px'; // Esempio di stile aggiuntivo
|
|
|
|
|
|
// Gestione del click sul bottone
|
|
container.onclick = function () {
|
|
console.log('Il bottone è stato cliccato!');
|
|
visumappa.value = !visumappa.value
|
|
// Qui puoi inserire la tua logica da eseguire al click del bottone
|
|
}
|
|
|
|
return container;
|
|
}
|
|
});
|
|
|
|
initialMap.value.addControl(new MyCustomControl());
|
|
|
|
layerControl.addOverlay(parks, 'Parks');
|
|
|
|
// Gestione dell'evento moveend
|
|
initialMap.value.on('moveend', () => {
|
|
center.value = initialMap.value.getCenter();
|
|
zoom.value = initialMap.value.getZoom();
|
|
console.log(`Nuovo centro della mappa: ${center.value.lat}, ${center.value.lng}`);
|
|
|
|
// Puoi fare altre operazioni qui, come aggiornare lo stato della tua app con il nuovo centro
|
|
aggiornaStatoMappa()
|
|
});
|
|
|
|
const geojsonLayer = L.geoJSON(comuniData.value, {
|
|
style: styleFunction,
|
|
pointToLayer: function (feature, latlng) {
|
|
return L.circleMarker(latlng, { radius: 8 });
|
|
}
|
|
}).addTo(initialMap.value);
|
|
|
|
|
|
});
|
|
|
|
function aggiornaStatoMappa() {
|
|
console.log('center.value', center.value)
|
|
tools.setCookie(tools.COOK_MAP_CENTER_LAT, center.value.lat.toString())
|
|
tools.setCookie(tools.COOK_MAP_CENTER_LONG, center.value.lng.toString())
|
|
tools.setCookie(tools.COOK_MAP_ZOOM, zoom.value.toString())
|
|
}
|
|
|
|
|
|
function log(str: string) {
|
|
console.log(str)
|
|
}
|
|
|
|
function getCoordinates(e: any) {
|
|
// Ottieni la latitudine e la longitudine dal click
|
|
const lat = e.latlng.lat
|
|
const lng = e.latlng.lng
|
|
|
|
// Fai qualcosa con le coordinate, ad esempio stamparle in console
|
|
console.log(`Latitudine: ${lat}, Longitudine: ${lng}`)
|
|
}
|
|
|
|
function tornaALista() {
|
|
|
|
}
|
|
|
|
return {
|
|
mywidth,
|
|
myheight,
|
|
map,
|
|
iconWidth,
|
|
iconHeight,
|
|
iconSize,
|
|
changeIcon,
|
|
zoom,
|
|
center,
|
|
log,
|
|
styleFunction,
|
|
styleFunctionBasic,
|
|
getCoordinates,
|
|
arrprovince,
|
|
comuniData,
|
|
initialMap,
|
|
mappacaricata,
|
|
tornaALista,
|
|
visumappa,
|
|
}
|
|
}
|
|
})
|