CIDWA/front-Censo
13
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

hotmap

Browse Source
This commit is contained in:
Carlos Alberto Flores Reséndiz
2026-03-20 14:47:09 -04:00
parent 7833d38b3e
commit 725bc15f63
2 changed files with 27 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Equipo_Computo/MapaCalor.tsx
+27 -16
View File
@@ -1,13 +1,14 @@
"use client";
import { MapContainer, ImageOverlay, useMap } from "react-leaflet";
import L from "leaflet";
import L, { LatLngBoundsExpression } from "leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet.heat";
import { useEffect } from "react";
// Ajustar vista automáticamente
function AjustarVista({ bounds }) {
function AjustarVista({ bounds }: { bounds: LatLngBoundsExpression }) {
const map = useMap();
useEffect(() => {
@@ -24,7 +25,7 @@ function HeatLayer() {
// A 4768x3368
const edificios = {
A1: [[1400, 3060], [1470, 3060], [1470, 3360], [1400, 3360]],
A1: [[1407, 3054], [1470, 3054], [1470, 3360], [1407, 3360]],
A2: [[1570, 3130], [1570, 3190], [1850, 3190], [1850, 3130]],
A3: [[1640, 2650], [1705, 2650], [1705, 2950], [1640, 2950]],
A4: [[1268, 2765], [1268, 2830], [1540, 2830], [1540, 2765]],
@@ -39,19 +40,29 @@ function HeatLayer() {
A13: [[1780, 810], [1845, 810], [1845, 1020], [1780, 1020]],
A14: [[1505, 775], [1713, 775], [1713, 840], [1505, 840]],
A15: [[2027, 2580], [2087, 2580], [2087, 2900], [2027, 2900]],
CEI: [[1570, 990],[1767,990],[1767,1155],[1570, 1155]],
INVEST:[[1570,1240],[1727, 1240],[1727,1400],[1570, 1400]],
AEROGRAFIA: [[1157, 3308], [1254, 3308], [1254, 3369], [1157, 3369]],
ALMACEN: [[989, 1523], [1027, 1523], [1027, 1749], [989, 1749]],
APOYO_DOC: [[1115, 1222], [1475, 1222], [1475, 1293], [1115, 1293]],
BIBLIOTECA: [[1579, 2373], [1579, 2199], [1900, 2500], [1600, 2500]],
CEI: [[1570, 990], [1767, 990], [1767, 1155], [1570, 1155]],
INVEST: [[1570, 1240], [1727, 1240], [1727, 1400], [1570, 1400]],
CEDTEC: [[885, 2900], [1080, 2900], [1080, 3200], [885, 3200]],
BIBLIOTECA: [[1600, 2200], [1900, 2200], [1900, 2500], [1600, 2500]],
POSGRADO: [[1100, 1525], [860, 1525], [860, 1325], [1100, 1325]],
UNIDAD_SEMINA:[[1145, 2894], [1320, 2894], [1320, 3070], [1145, 3070]],
TALLS_Y_LAB: [ [1085, 3209],[1292, 3209],[1292, 3307],[1085, 3307]],
UNIDAD_DE_TALLERES_MULTIDISC: [[1624, 3244], [1920, 3240], [1954, 3476], [1622, 3477]]
CEMM: [[2167, 863], [2453, 863], [2453, 1458], [2167, 1458]],
CAFETERIA_Y_LIBRERIA: [[2027, 1483], [2158, 1483], [2158, 1600], [2027, 1600]],
CTED: [[1802, 1063], [1908, 1128], [1888, 1179], [1772, 1151]],
POSGRADO: [[857, 1472], [1004, 1471],[1004, 1327],[1086, 1325],[1086, 1512], [860, 1512],],
UNIDAD_SEMINA: [[1145, 2894], [1320, 2894], [1320, 3070], [1145, 3070]],
TALLS_Y_LAB: [[1085, 3209], [1292, 3209], [1292, 3307], [1085, 3307]],
UNIDAD_DE_TALLERES_MULTIDISC: [[1624, 3244], [1920, 3240], [1954, 3476], [1622, 3477]],
USC: [[992, 2656], [1029, 2656], [1029, 2828], [992, 2828]],
UIM: [[294, 3224], [901, 3257], [899, 3358], [312, 3386]],
GOB: [[950, 2068], [1104, 2068], [1104, 2218], [950, 2218]],
SERV_GRALES: [[1024, 882], [1089, 882], [1089, 1138], [1024, 1138]],
SM: [[893, 1789], [935, 1789], [935, 1891], [893, 1891]]
};
const puntos = [];
const puntos: any[] = [];
Object.entries(edificios).forEach(([nombre, poligono]) => {
for (let i = 0; i < 15; i++) {
@@ -66,7 +77,7 @@ function HeatLayer() {
});
const heat = L.heatLayer(puntos, {
const heat = (L as any).heatLayer(puntos, {
radius: 35,
blur: 25,
maxZoom: 2,
@@ -82,8 +93,8 @@ function HeatLayer() {
heat.addTo(map);
Object.entries(edificios).forEach(([nombre, coords]) => {
L.polygon(coords, {
Object.entries(edificios).forEach(([nombre, coords]: any) => {
L.polygon((coords), {
color: "#77ee9f",
weight: 2,
fillOpacity: 0.25
@@ -108,7 +119,7 @@ function HeatLayer() {
export default function MapaCalor() {
const bounds = [
const bounds: LatLngBoundsExpression = [
[0, 0],
[3368, 4768]
];
src/components/Equipo_Computo/hotmap.tsx
-128
View File
@@ -1,128 +0,0 @@
"use client";
import { MapContainer, ImageOverlay, useMap } from "react-leaflet";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet.heat";
import { useEffect } from "react";
function HeatLayer() {
const map = useMap();
useEffect(() => {
const puntos = [
[200,300,3.5],
[210,310,4.0],
[220,320,5.2],
[230,330,6.5],
[240,340,7.0],
[250,350,8.0],
[260,360,6.8],
[270,370,7.5],
[400,500,4.5],
[410,510,6.0],
[420,520,8.0],
[430,530,7.2],
[440,540,6.5],
[450,550,5.8],
[460,560,7.1],
[600,300,4.2],
[610,310,5.4],
[620,320,6.6],
[630,330,7.8],
[640,340,8.5],
[650,350,7.2],
[660,360,6.1],
[670,370,5.3],
[700,200,6.5],
[720,220,7.8],
[740,240,8.9],
[760,260,9.5],
[780,280,8.7],
[800,300,7.6],
[820,320,6.4]
];
const heat = L.heatLayer(puntos, {
radius: 50,
blur: 30,
maxZoom: 2,
gradient: {
0.2: "blue",
0.4: "cyan",
0.6: "yellow",
0.8: "orange",
1.0: "red"
}
});
heat.addTo(map);
return () => {
map.removeLayer(heat);
};
}, [map]);
return null;
}
export default function MapaFES({ cerrar }) {
const bounds = [
[0,0],
[1000,1000]
];
return (
<div style={{
position:"fixed",
top:0,
left:0,
width:"100%",
height:"100%",
background:"#000000cc",
zIndex:999
}}>
<button
onClick={cerrar}
style={{
position:"absolute",
top:20,
right:20,
zIndex:1000,
padding:"20px 40px",
background:"red",
color:"white",
border:"none",
cursor:"pointer"
}}
>
Cerrar
</button>
<MapContainer
crs={L.CRS.Simple}
bounds={bounds}
style={{ height:"100%", width:"100%" }}
>
<ImageOverlay
url="/plano_fes_acatlan.png"
bounds={bounds}
/>
<HeatLayer/>
</MapContainer>
</div>
);
}