Este blog tiene como finalidad de compartir conocimientos y aportar un granito más de información. Comparto mis apuntes e información que he encontrado por Internet, teniendo en cuenta que muchas ideas escritas no son propias, en la parte inferior coloco la url de los sitios donde esta la idea original ... espero que les sea de utilidad.
En este ejemplo se consumiran datos de la base de datos postgis que contiene las tablas, las consultas que se utilizaran son :
- SELECT ST_Force2D(ST_Transform(geom, 4326)) as geom FROM public."Casetas_de_Cobro";
- SELECT ST_Force2D(ST_Transform(geom, 4326)) AS geom FROM public."LOCALIDADES";
Estas consultas las ejecutaremos en GEOSERVER para poder utilizar la imformacion como imagen .
- Ingresa a tu GEOSERVER
- vete al apartado DATOS , selecciona la opcion capas.
- Da clic en la opcion Agregar nueva capa.
- En la opcion "agregar capa de " selecciona el origen de tu capa.
- Con las opciones para agregar capa busca : En bases de datos también puede crear un nuevo feature type configurando una sentencia SQL nativa. Configurar nueva vista SQL... y da click en Configurar nueva vista SQL...
- en la ventana "Crear una nueva vista SQL" coloca el nombre de la vista y la sentencia SQL que anteriormente se indicaron.
- click en guardar.
En nuestro codigo react :
import Reactfrom "react";
import {
MapContainer,
LayersControl,
TileLayer,
FeatureGroup,
WMSTileLayer,
useMap,
} from "react-leaflet";
import "leaflet/dist/leaflet.css";
const MapView = () => {
return (
<>
<MapContainer
center={[20.521602, -99.893896]}
zoom={10}
scrollWheelZoom={true}
whenReady={({ target: map }) => handleMapReady(map)}
style={{ height: "100vh", width: "100%" }}
>
<TileLayer url="https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}" />
<LayersControl position="topright">
<LayersControl.Overlay name="CASETAS DE COBRO" key="H">
<WMSTileLayer
layers="casetas_cobro_pais:plaza_cobro"
url="http://qa-geoserver.gn.gob.mx/geoserver/casetas_cobro_pais/wms"
transparent={true}
format="image/png"
/>
</LayersControl.Overlay>
<LayersControl.Overlay name="LOCALIDADES DEL PAIS" key="F">
<WMSTileLayer
layers="localidades_pais:urbrloc10gw"
url="http://qa-geoserver.gn.gob.mx/geoserver/localidades_pais/wms"
transparent={true}
format="image/png"
/>
</LayersControl.Overlay>
</LayersControl>
</MapContainer>
</>
)
}
export default MapView
en el archivo App.js
import './App.css';
import MapView from './MapView';
function App() {
return (
<div>
<p>mapa</p>
<MapView/>
</div>
);
}
export default App;
En el sigiente ejemplo indica la forma de como trabajar con diversas capas que esten en un servidor, en primer lugar creamos un archivo donde esten las especificaciones de las capas .
ejemplo:
Codigo de geoserver_overlay.js
const resource = API
export const arrayGeoserverOverlay = [
{
name: 'TOMAS MAPA DE CALOR',
key: 'TOMAS_CLANDESTINAS',
layers: 'tomas_clandestinas_mapa_calor:mapa_calor_tomas',
url: `${resource}/tomas_clandestinas_mapa_calor/wms`,
transparent: true,
format: 'image/png',
},
{
name: 'TOMAS PUNTOS',
key: 'TOMAS_CLANDESTINAS_PUNTOS',
layers: 'tomas_clandestinas_mapa_calor:tomas_engeneral',
url: `${resource}/tomas_clandestinas_mapa_calor/wms`,
transparent: true,
format: 'image/png',
},
{
name: 'DUCTOS PEMEX',
key: 'DUCTOS',
layers: 'ductos_pemex:oligaspoliductos',
url: `${resource}/ductos_pemex/wms`,
transparent: true,
format: 'image/png',
},
{
name: 'ESTACIONES GN',
key: 'ESTACIONES',
layers: 'coordinaciones_estaciones:coordinaciones_estaciones',
url: `${resource}/coordinaciones_estaciones/wms`,
transparent: true,
format: 'image/png',
},
{
name: 'CODIGO POSTAL',
key: 'CODIGO',
layers: 'codigo_postal:cp_completo',
url: `${resource}/codigo_postal/wms`,
transparent: true,
format: 'image/png',
},
{
name: 'LOCALIDADES DEL PAIS',
key: 'LOCALIDADES',
layers: 'localidades_pais:urbrloc10gw',
url: `${resource}/localidades_pais/wms`,
transparent: true,
format: 'image/png',
},
{
name: 'MUNICIPIOS',
key: 'MUNICIPIOS',
layers: 'municipios_pais:muni_2018gw',
url: `${resource}/municipios_pais/wms`,
transparent: true,
format: 'image/png',
},
{
name: 'CASETAS DE COBRO',
key: 'CASETAS',
layers: 'casetas_cobro_pais:plaza_cobro',
url: `${resource}/casetas_cobro_pais/wms`,
transparent: true,
format: 'image/png',
},
{
name: 'POSTES KILOMETRICOS (CARRETERAS)',
key: 'POSTES',
layers: 'postes_km_pais:postes_km',
url: `${resource}/postes_km_pais/wms`,
transparent: true,
format: 'image/png',
},
{
name: 'PUENTES',
key: 'PUENTES',
layers: 'puentes_pais:puente',
url: `${resource}/puentes_pais/wms`,
transparent: true,
format: 'image/png',
},
{
name: 'RED VIAL Y CAMINOS',
key: 'RED_VIAL',
layers: 'red_vial_caminos_pais:red_vial',
url: `${resource}/red_vial_caminos_pais/wms`,
transparent: true,
format: 'image/png',
},
{
name: 'SITIOS DE INTERES',
key: 'SITIOS_DE_INTERES',
layers: 'sitios_interes_pais:sitio_de_interes',
url: `${resource}/sitios_interes_pais/wms`,
transparent: true,
format: 'image/png',
},
{
name: 'TERMINALES DE FERROCARIL',
key: 'TERMINALES_DE_FERROCARIL',
layers: 'estacion_ferrocaril:estaciones_de_ferrocarril___95',
url: `${resource}/estacion_ferrocaril/wms`,
transparent: true,
format: 'image/png',
},
{
name: 'FERROCARRIL',
key: 'FERROCARRIL',
layers: 'vias_ferreas_pais:lineas_ferrocarril_total',
url: `${resource}/vias_ferreas_pais/wms`,
transparent: true,
format: 'image/png',
},
{
name: 'TRAMOS CARRETEROS',
key: 'TRAMOS_CARRETEROS',
layers: 'tramos_carreteros_gn:tramos_car_fal_06122023',
url: `${resource}/tramos_carreteros_gn/wms`,
transparent: true,
format: 'image/png',
},
]
en el codigo del mapa realiza los sigientes cambios
codigo de leyenda.jsimport React, { useEffect, useRef } from 'react'
import L from 'leaflet'
import { useMap } from 'react-leaflet'
import { parametros } from './leyenda_parametros'
// import { DomEvent } from 'leaflet'
// import { useLeaflet } from 'react-leaflet'
function Legend({ activa, position, objeto }) {
const parentMap = useMap()
const legend = L.control({ position })
useEffect(() => {
if (activa) {
legend.onAdd = () => {
let par = parametros(objeto)
let div = L.DomUtil.create('div', 'info legend')
let getColor = par[0].getColor || []
let classification = par[0].classification || []
let grades = par[0].grades || []
let labelsA = []
let from, clas labelsA.push(par[0].label_element || 'sin dato')
for (let i = 0; i < classification.length; i++) {
from = grades[i]
clas = classification[i]
labelsA.push(
' <i style="background:' +
getColor[i] +
'"></i> ' +
' ' +
clas +
' ' +
' ' +
from
)
}
div.id = 'etiqueta'
div.innerHTML = labelsA.join('<br>')
return div
}
legend.addTo(parentMap)
// Disable dragging when user's cursor enters the element
legend.getContainer().addEventListener('mouseover', function () {
parentMap.scrollWheelZoom.disable()
})
// Re-enable dragging when user's cursor leaves the element
legend.getContainer().addEventListener('mouseout', function () {
parentMap.scrollWheelZoom.enable()
})
} else {
let elements = document.getElementById('etiqueta')
elements && L.DomUtil.remove(elements)
}
}, [activa])
}
export default Legend;
Codigo de leyenda_parametros
const arrayLegendParameters = [
{
id: 'TOMAS_MAPA_DE_CALOR_A',
legend: 'TOMAS MAPA DE CALOR',
getColor: ['#ffffff', '#ffbfbf', '#ff8080', '#ff4040', '#ff0000'],
classification: ['', '', '', '', ''],
grades: ['1 - 2', '2 - 7', '7 - 24', '24 - 68', '68 - 624'],
label_element: ['<center><br>Mapa de calor tomas clandestinas <br> (Pemex 2008-2015)</center>'],
},
{
id: 'TOMAS_PUNTOS_A',
legend: 'TOMAS PUNTOS',
getColor: ['#a47158'],
classification: ['Toma clandestina'],
grades: [''],
label_element: ['<center><br>Tomas clandestinas<br>Pemex 2008-2015)</center>'],
},
{
id: 'DUCTOS_PEMEX_A',
legend: 'DUCTOS PEMEX',
getColor: ['#62e8c9', '#6cde87', '#d76b65', '#7dcb58', '#5f6ecf', '#da6ade', '#61b1d6', '#6620c9', '#cfa86e', '#e0ef8d', '#ec77b0'],
classification: ['Ductos de importación EUA', 'Gasoductos en Proyecto', 'Sistrangas', 'Tratamiento y Logística Primaria', 'Sistema Norte', 'Sistema Rosarito', 'Sistema Topolobampo', 'Sistemas Guaymas', 'Tratamiento y logistica primaria', 'Zona Sur Golfo Centro Occidente', 'Sin dato'],
grades: ['', '', '', '', '', '', '', '', '', '', ''],
label_element: ['<center><br>Ductos de pemex</center>'],
},
{
id: 'ESTACIONES_GN_A',
legend: 'ESTACIONES GN',
getColor: ['#53e012', '#253ede', '#db2016', '#b77cde', '#adea70', '#d85d9b', '#7cb6d1', '#cf4f77', '#3d8ddd', '#3d8ddd', '#9ad51a', '#3dcc23', '#ca816b', '#6acda5', '#3a30e5', '#0ef016', '#c7d953', '#b728e2', '#6adb82', '#819fdf', '#4de0db', '#ece782', '#d127da', '#13d8ad', '#dd2a42', '#ea7f38', '#57d6ec','#ed50bb', '#4ad584', '#e0b731', '#d0a468', '#db74cd', '#4f2acc', '#915dd9'],
classification: ['Aguascalientes', 'Baja California', 'Baja California Sur', 'Campeche', 'CDMX', 'Chiapas', 'Chihuahua', 'Coahuila', 'Colima', 'Durango', 'Estado de México', 'Guanajuato', 'Guerrero', 'Hidalgo', 'Jalisco', 'Michoacán', 'Morelos', 'Nayarit', 'Nuevo León', 'Oaxaca', 'Puebla', 'Querótaro', 'Quintana Roo', 'San Luís Potosí', 'Sinaloa','Sonora', 'Tabasco', 'Tamaulipas', 'Tlaxcala', 'Veracruz', 'Yucatán', 'Zacatecas', 'Sin dato'],
grades: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
label_element: ['<center><br> Estaciones GN</center>'],
},
{
id: 'CODIGO_POSTAL_A',
legend: 'CODIGO POSTAL',
getColor: ['#dda86b','#c7d04f','#e38897','#ee5532','#cf2762','#ed322e','#547bd6','#e276c2','#6c4ada','#d2c248','#7dda78','#2097d7','#c81471','#47e459','#b3e968','#b4d742','#e34bcf','#de58e5','#e4b12e','#5992d3','#9f5dca','#6ad2bf','#37b9d6','#d178ea','#de7437','#42e071','#81cd4e','#4ce0e0','#1d14c8','#818cde','#71e2bb','#65eda5','#6dd94d','#6619d1'],
classification: ['Aguascalientes','Baja California','Baja California Sur','Campeche','Coahuila','Colima','Chiapas','Chihuahua','CDMX','Durango','Guanajuato','Guerrero','Hidalgo','Jalisco','México','','Michoacan','Morelos','Nayarit','Nuevo Leon','Oaxaca','Puebla','Queretaro','Quintana Roo','San Luis Potosi','Sinaloa','Sonora','Tabasco','Tamaulipas','Tlaxcala','Varacruuz','Yucatan','Zacatecas','Sin dato'],
grades: ['','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','',''],
label_element: ['<center><br>Codigo postal</center>'],
},
{
id: 'LOCALIDADES_DEL_PAIS',
legend: 'LOCALIDADES DEL PAIS',
getColor: ['#625ee0','#6d53ca','#ca984c','#de6540','#5be394','#57e2c2','#5be394','#c36ade','#1ed549','#27f0e6','#4e81f0','#e0c14f','#d2e363','#dd2da2','#44cd4a','#e31e38','#2086ec','#bee569','#53d8a1','#c728cf','#7ab8d5','#df59cb','#a77aea','#e6843d','#132fe2','#a84de9','#30d317','#15b3cb','#6be433','#de619f','#87d23b','#d27d98','#d8d041'],
classification: ['Aguascalientes','Baja California','Baja California Sur','Campeche','Coahuila','Colima','Chiapas','Chihuahua','CDMX','Durango','Guanajuato','Guerrero','Hidalgo','Jalisco','Michoacan','Morelos','México','Nayarit','Nuevo Leon','Oaxaca','Puebla','Queretaro','Quintana Roo','San Luis Potosi','Sinaloa','Sonora','Tabasco','Tamaulipas','Tlaxcala','Varacruuz','Yucatan','Zacatecas','Sin dato'],
grades: ['','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','',''],
label_element: ['<center>Localidades</center>'],
},
{
id: 'MUNICIPIOS_A',
legend: 'MUNICIPIOS',
getColor: ['#837dd8','#e31a1c','#1f78b4','#b949d5','#74cab7','#df635a','#ce2457','#81d830','#edc01d','#5cdcd8','#3eabe2','#2db3cb','#16d242','#d53a85','#9acd34','#7c58eb','#63e69a','#db27e1','#2862e0','#efbf76','#122bcf','#d760c5','#e65667','#c88aef','#82d161','#d2c54d','#8e5ecc','#39d941','#d21994','#4594e3','#c6d85d','#4fcd3b','#e76438'],
classification: ['Aguascalientes','Baja California','Baja California Sur','Campeche','Chiapas','Chihuahua','CDMX','Coahuila','Colima','Durango','Guanajuato','Guerrero','Hidalgo','Jalisco','México','Michoacan','Morelos','Nayarit','Nuevo Leon','Oaxaca','Puebla','Queretaro','Quintana Roo','San Luis Potosi','Sinaloa','Sonora','Tabasco','Tamaulipas','Tlaxcala','Varacruuz','Yucatan','Zacatecas','Sin dato'],
grades: ['','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','',''],
label_element: ['<center>Municipios</center>'],
},
{
id: 'CASETAS_DE_COBRO_A',
legend: 'CASETAS DE COBRO',
getColor: ['#838ee1','#49cf37','#ff7f00','#db0e29','#c855da','#e2cb20'],
classification: ['CAPUFE','Concesionado','Estatal','Municipal','N/D','sin dato'],
grades: ['','','','','',''],
label_element: ['<center>Casetas de peaje</center>'],
},
{
id:'POSTES_KILOMETRICOS_CARRETERAS_A',
legend:'POSTES KILOMETRICOS (CARRETERAS)',
getColor: ['#8d50d2','#c95171','#d59a33','#7ab1d3','#43d0d2','#756bcb','#dbbb2e','#dc5242','#9fd246','#c17dce','#d064a9','#5864ea','#d69661','#db19db','#f09069','#7655ca','#60e584','#23e00e','#ea7680','#a417ef','#16dd26','#e57ed2','#d16a98','#d3e582','#1d51df','#568bcc','#0cacd4','#75e31b','#34c8af','#dfdf1e','#70dda3','#1ada97','#4ed71c'],
classification: ['Aguascalientes','Baja California','Baja California Sur','Campeche','Chiapas','Chihuahua','Coahuila de Zaragoza','Colima','CDMX','Durango','Guanajuato','Guerrero','Hidalgo','Jalisco','México','Michoacán','Morelos','Nayarit','Nuevo León','Oaxaca','Puebla','Querótaro','Quintana Roo','San Luis Potosí','Sinaloa','Sonora','Tabasco','Tamaulipas','Tlaxcala','Veracruz','Yucatán','Zacatecas','Sin dato'],
grades: ['','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','',''],
label_element: ['<center>hito <br> kilometrico</center>'],
},
{
id: 'PUENTES_A',
legend: 'PUENTES',
getColor: ['#7d78df', '#70d838', '#50cab8', '#ca7f43', '#cf28a8'],
classification: ['chico', 'Mediano', 'Grande', 'Sin clasificar', 'Sin dato'],
grades: ['(6-30 metros)', '(31-60 metros)', '(más de 100 metros)', '', ''],
label_element: ['<center><br>Puentes</center>'],
},
{
id:'RED_VIAL_Y_CAMINOS_A',
legend:'RED VIAL Y CAMINOS',
getColor: ['#6bd9b1','#c8527d','#b9ca3a','#dc8c5b','#6fb5e1','#3fd12c','#bb12d1','#5847ca'],
classification: ['Estatal','Federal','Municipal','N/A','N/D','Otro','Particular','Sin dato'],
grades: ['','','','','','','',''],
label_element: ['<center>Red Vial</center>'],
},
{
id:'SITIOS_DE_INTERES_A',
legend:'SITIOS DE INTERES',
getColor: ['#30123b','#341b51','#38276d','#3c3286','#3f3e9c','#4249b1','#4454c3','#455ed3','#4669e0','#4773eb','#467df4','#4687fb','#4391fe','#3e9bfe','#3aa3fc','#33adf7','#2cb7f0','#25c0e7','#1fc9dd','#1ad2d2','#18d9c8','#18e0bd','#1ce6b4','#22ebaa','#2cf09e','#38f491','#46f884','#52fa7a','#61fc6c','#71fe5f','#80ff53','#8fff49','#9cfe40','#a7fc3a','#b1f936','#bcf534','#c6f034','#d0ea34','#d9e436','#e1dd37','#e7d739','#eecf3a','#f4c73a','#f8be39','#fbb637','#fdac34','#fea130','#fe962b','#fd8a26','#fb7e21','#f8721c','#f46617','#f05b12','#ec530f','#e7490c','#e14109','#da3907','#d23105','#ca2a04','#c12302','#b71d02','#ac1701','#a11201','#950d01','#880802','#7a0403'],
classification: ['Actividades de Campo','Aduana','Aeropuerto','Almacén','Área de Descanso','Atractivo Turístico','Banco','Biblioteca','Cajero Automático','Campo de Golf','Caseta de Inspección','Cementerio','Central Camionera','Centro Cívico','Centro Comercial','Centro Comunitario','Centro Cultural','Centro de Convenciones','Centro de Investigación','Centro Deportivo','Cine','Destilería y Degustación de Vinos','Escuela','Escuela de Educación Media','Escuela de Educación Preescolar','Estación de Abastecimiento de Combustible','Estación de Bomberos','Estación de Ferrocarril','Estación de LLamado de Emergencia','Estación de Pesaje','Estación de Policía','Estación de Primeros Auxilios','Estacionamiento Abierto','Estacionamiento para Caravanas','Fonda o Comedor','Hospital','Hotel o Motel','Instalaciones de Entretenimiento','Lugar de Culto','Lugar de Esparcimiento','Mirador','Monumento Histórico','Muelle o Embarcadero','Museo','Oficina de Gobierno','Oficina Postal','Palacio de Gobierno','Palacio de Justicia','Parque Animal','Parque de Diversiones','Piscina','Pista Aérea','Pista de Patinaje en Hielo','Puerto','Puerto Fronterizo','Restaurante','Servicio Médico de Emergencia','Teatro','Terminal de Carga Multimodal','Terminal de Transbordador','Tienda Departamental','Universidad','Zona Industrial','Zona Libre','Sin dato'],
grades: ['','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','',''],
label_element: ['<center>Sitios</center>'],
},
{
id:'TERMINALES_DE_FERROCARIL_A',
legend:'TERMINALES DE FERROCARIL',
getColor: ['#48e2ed','#65cf70','#2068e4','#95cf18','#9d23ef','#3bca2c','#e27fbc','#ea67d0','#72d8ca','#5fc97d','#c930ef','#dc729e','#d9151c','#8987ee','#aae771','#576bd0','#8e57dc','#8acde4','#88beea','#7ae9c4','#d0e355','#d47460','#cfc865','#4a25d0','#67d89e','#e39c45','#c84a65','#d4a927','#ed712e','#71d147','#ce78ce'],
classification: ['Aguascalientes','Baja California','Campeche','Chiapas','Chihuahua','Coahuila de Zaragoza','Colima','Distrito Federal','Durango','Guanajuato','Guerrero','Hidalgo','Jalisco','Michoac�n de Ocampo','Morelos','M�xico','Nayarit','Nuevo Le�n','Oaxaca','Puebla','Quer�taro','San Luis Potos�','Sinaloa','Sonora','Tabasco','Tamaulipas','Tlaxcala','Veracruz de Ignacio de la Llave','Yucat�n','Zacatecas','sin dato'],
grades: ['','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','',''],
label_element: ['<center>Terminales de <br> ferrocaril</center>'],
},
{
id:'FERROCARRIL_A',
legend:'FERROCARRIL',
getColor: ['#8a5ec9','#d99f2a','#ec717b','#7acf88','#1153d6','#a3da57','#e322c0','#76e3da'],
classification: ['FC Tijuana - Tecate','FERROMEX','FERROSUR','KCS de México','FC Coahuila - Durango','FC del Itsmo','FC del Mayab','Otros valores'],
grades: ['','','','','','','',''],
label_element: ['<center>Vias Ferreas</center>'],
},
{
id:'TRAMOS_CARRETEROS',
legend:'TRAMOS CARRETEROS',
getColor: ['#88ef90','#9b18cb','#1857e0','#6ae39e','#88b5e5','#1933e1','#95ce66','#e352a2','#c4c93d','#8a60ce','#58d0e3','#a2e03f','#7572cf','#c9678d','#4ecbc7','#9a2eed','#d67160','#5ddf2d','#ec6cdf','#e07b4c','#30123b','#dea11d','#de82c5','#77d06d','#c8b12d','#de8a35','#e62d52','#e142f0','#4921dc','#7d9323','#59cb78','#db484d','#19acf0','#84e6d1'],
classification: ['Aguascalientes','Baja California','Baja California Sur','Campeche','Chiapas','Chihuahua','Ciudad de México','Coahuila','Colima','Durango','Estado de México','Guanajuato','Guerrero','Hidalgo','Jalisco','Michoacán','Morelos','Nayarit','Nuevo León','Oaxaca','Puebla','Querétaro','Quintana Roo','San Luis Potosí','Sinaloa','Sonora','Tabasco','Tamaulipas','Tlaxcala','Veracruz','Yucatán','Zacatecas','Otros valores'],
grades: ['','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','',''],
label_element: ['<center>Tramos <br> carreteros</center>'],
},
/* {
id:'',
legend:'',
getColor: ['','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','',''],
classification: ['','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','',''],
grades: ['','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','',''],
label_element: ['<center><br>Leyenda de datos <br> (---)<br></center>'],
}, */
];
export const parametros = ({ name }) => {
let valor = arrayLegendParameters.filter(iteration => iteration.legend == name);
return valor;
}