- aggiunto note 'note_ordine_gas'
- corretto bug
This commit is contained in:
145
src/components/CMapComuni/CMapComuni.ts
Executable file
145
src/components/CMapComuni/CMapComuni.ts
Executable file
@@ -0,0 +1,145 @@
|
||||
import { tools } from '@store/Modules/tools'
|
||||
import { useQuasar } from 'quasar'
|
||||
import { PropType, defineComponent, onMounted, ref, computed } 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 comuniData from './comuni-data.geojson';
|
||||
|
||||
import { useUserStore } from '@src/store/UserStore'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CMapComuni',
|
||||
setup(props, { emit }) {
|
||||
const $q = useQuasar()
|
||||
const userStore = useUserStore()
|
||||
|
||||
const iconWidth = ref(25)
|
||||
const iconHeight = ref(40)
|
||||
const map = ref(<any>null)
|
||||
const zoom = ref(6)
|
||||
const arrprovince = ref(<any>[])
|
||||
|
||||
const comuniData = ref('')
|
||||
|
||||
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 > 1000 ? '#800026' :
|
||||
d > 500 ? '#BD0026' :
|
||||
d > 200 ? '#E31A1C' :
|
||||
d > 100 ? '#FC4E2A' :
|
||||
d > 50 ? '#FD8D3C' :
|
||||
d > 20 ? '#FEB24C' :
|
||||
d > 10 ? '#FED976' :
|
||||
'#FFEDA0';
|
||||
}
|
||||
|
||||
function styleFunction(feature: any) {
|
||||
// Qui verrà implementata la logica per determinare il colore basato sul numero di utenti
|
||||
// esempio semplice:
|
||||
const userCount = getUserCountForComune(feature.properties.NOME_COM); // 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
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
// Ottengo la lista degli utenti con i lat e long
|
||||
arrprovince.value = await userStore.getProvincesForMap()
|
||||
|
||||
initialMap.value = L.map('map',
|
||||
{
|
||||
zoomControl: true, zoom: zoom.value, zoomAnimation: false,
|
||||
fadeAnimation: true, markerZoomAnimation: true,
|
||||
center: [42.71, 12.934],
|
||||
}
|
||||
);
|
||||
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
maxZoom: 13,
|
||||
attribution: ''
|
||||
}).addTo(initialMap.value);
|
||||
|
||||
});
|
||||
|
||||
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}`)
|
||||
}
|
||||
|
||||
return {
|
||||
mywidth,
|
||||
myheight,
|
||||
map,
|
||||
iconWidth,
|
||||
iconHeight,
|
||||
iconSize,
|
||||
changeIcon,
|
||||
zoom,
|
||||
log,
|
||||
styleFunction,
|
||||
getCoordinates,
|
||||
arrprovince,
|
||||
comuniData,
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user