MapConductor React SDK Samples

Capa de teselas vectoriales | MapLibre | MapConductor React SDK

Ejemplo de Capa de teselas vectoriales de MapConductor React SDK con MapLibre.

Este ejemplo interactivo muestra Capa de teselas vectoriales mediante la abstracción de MapConductor sobre MapLibre.

Ejemplo de código

import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition } from '@mapconductor/js-sdk-core';
import { MapLibreDesign, MapLibreMapView2D, useMapLibreViewState } from '@mapconductor/react-for-maplibre';


// (1) Crear el mapa


const initialCamera = createMapCameraPosition({
  position: createGeoPoint({ latitude: 35.6812, longitude: 139.7671 }),
  zoom: 12,
});


const mapViewState = useMapLibreViewState({
  mapDesignType: MapLibreDesign.OsmBrightJa,
  cameraPosition: initialCamera,
});


// (2) Preparar los datos y el estado de interacción
const [palette, setPalette] = useState({
  water: '#3a7ca5',
  land: '#f2efe6',
  street: '#ffffff',
  building: '#d9d0c9',
});
// A rule reaches layers by role, so the same words work in someone
// else's style. mix blends each layer's own colour toward the picked
// one; visible: false leaves the layers out of the document, so they
// are not drawn at all.
const rules = buildStyleRules((r) => {
  r.role(LayerRole.water, { colorFilter: { mix: { color: palette.water, amount: strength } } });
  r.role(LayerRole.building, { visible: false });
});


// (3) Renderizar el mapa y sus capas


<MapLibreMapView2D state={mapViewState}>
  <VectorTileLayer style={style} rules={rules} opacity={opacity} />
</MapLibreMapView2D>

Cómo funciona el código

Dibuja un estilo vectorial de MapLibre en cualquier backend rasterizándolo en el navegador y sirviéndolo como teselas ráster comunes.

El backend nunca ve un estilo vectorial, y por eso esto funciona en Google Maps, MapKit, Cesium y los demás, que no pueden leerlo.

Cambiar un color reemplaza el estilo y vuelve a rasterizar las teselas vectoriales que ya están en memoria. No se descarga nada de nuevo: la geometría no cambió, solo el pintado. Las capas de símbolos no se dibujan, porque colocar etiquetas sin colisiones exige ver las teselas vecinas.