MapConductorCapa de teselas vectoriales
Es un paquete que dibuja un estilo vectorial en formato MapLibre (style.json) como teselas raster dentro del navegador, de modo que pueda superponerse a cualquier proveedor de mapas. Incluso en mapas que no pueden leer estilos vectoriales por sí mismos, como Google Maps, MapKit, HERE, ArcGIS o Cesium, se ve exactamente igual.
01 · Descripción general
El dibujo lo realiza un renderizador escrito en Rust compilado a wasm, que se ejecuta dentro de un Web Worker. Las teselas dibujadas se sirven desde el servidor local de teselas del SDK (Service Worker) y se montan en el mapa como un RasterLayer normal. Desde el punto de vista del mapa, es simplemente una capa raster. Por eso no depende del proveedor.
La capa se monta dividida en dos: un "suelo" de rellenos, líneas y círculos, y una capa transparente de "etiquetas" encima. Cuando llegan las fuentes, solo se vuelve a dibujar la parte de las etiquetas, por lo que no ocurre que el mapa desaparezca un instante en cuanto aparece el texto. La atribución de la procedencia del estilo (OpenStreetMap, etc.) también se añade automáticamente.
02 · Instalación
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-vectortile@mapconductor/js-vectorstyle también se instala junto como dependencia. El paquete es solo ESM.
Colocar el Service Worker para las teselas
Las teselas se sirven desde /tile-sw.js. Tiene los mismos requisitos que el mapa de calor. Copie el archivo incluido en @mapconductor/js-sdk-core al directorio público de su aplicación.
{
"scripts": {
"postinstall": "cp node_modules/@mapconductor/js-sdk-core/dist/tile-sw.js public/tile-sw.js"
}
}En la compilación de producción con Vite se necesita una configuración que genere los workers como módulos ES (el servidor de desarrollo no la necesita).
import { defineConfig } from 'vite';
export default defineConfig({
worker: { format: 'es' },
});localhost puede mantenerse HTTP, pero para abrirlo desde otro dispositivo en la LAN se necesita HTTPS.03 · Uso básico
Se puede colocar dentro de cualquier *MapView. En style se puede pasar la URL de un style.json, su cadena de texto o un objeto ya analizado. El ejemplo de abajo apaga el mapa propio de Google Maps (GoogleMapDesign.None) y dibuja un estilo vectorial encima.
import { createGeoPoint, createMapCameraPosition } from '@mapconductor/js-sdk-core';
import { GoogleMapDesign, GoogleMapView2D, useGoogleMapViewState } from '@mapconductor/react-for-googlemaps';
import { VectorTileLayer } from '@mapconductor/react-vectortile';
const TOKYO = createGeoPoint({ latitude: 35.6812, longitude: 139.7671 });
const STYLE_URL = 'https://tiles.versatiles.org/assets/styles/colorful/style.json';
export function VectorTileMap() {
const state = useGoogleMapViewState({
apiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
mapDesignType: GoogleMapDesign.None,
cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});
return (
<GoogleMapView2D state={state} style={{ height: 480 }}>
<VectorTileLayer style={STYLE_URL} onDiagnostics={(messages) => console.warn(messages)} />
</GoogleMapView2D>
);
}style se compara por contenido. Si el contenido es el mismo, pasar un objeto nuevo en cada ocasión no provoca un redibujado.
04 · Cambiar la apariencia
Si pasas a rules las reglas escritas en cambiar el estilo del mapa, se dibuja con ajustes aplicados como cambiar colores u ocultar capas. Los elementos ocultos (edificios, etiquetas, etc.) no se dibujan en absoluto.
import { useMemo } from 'react';
import { buildStyleRules, LayerRole } from '@mapconductor/js-vectorstyle';
import { VectorTileLayer } from '@mapconductor/react-vectortile';
const rules = useMemo(
() => buildStyleRules((r) => {
r.role(LayerRole.building, { visible: false });
r.role(LayerRole.water, { colorFilter: { mix: { color: '#3a7ca5', amount: 0.6 } } });
r.role(LayerRole.label, { opacity: 0.6 });
}),
[],
);
<VectorTileLayer style={STYLE_URL} rules={rules} />Al cambiar reglas o estilos, solo se vuelven a dibujar los tiles vectoriales en memoria; no se vuelve a la red. Las formas no cambian, solo la forma de pintarlas. Incluso moviendo colores con un deslizador no aumenta el tráfico. Si se omite rules, el compilador de reglas (wasm) no se carga.
05 · Usar como mapa base
Con asBasemap, en MapLibre, Mapbox y MapTiler no se convierte a raster; el estilo se pasa directamente al mapa y reemplaza el diseño del mapa. Estos tres pueden dibujar estilos vectoriales por sí mismos, así que es más rápido y se ve mejor. En ese caso opacity no tiene efecto.
import { MapLibreMapView2D, useMapLibreViewState } from '@mapconductor/react-for-maplibre';
import { VectorTileLayer } from '@mapconductor/react-vectortile';
<MapLibreMapView2D state={state}>
<VectorTileLayer style={STYLE_URL} rules={rules} asBasemap />
</MapLibreMapView2D>En los demás proveedores, asBasemap no cambia nada. El mapa propio del proveedor debe apagarse desde la aplicación usando el diseño None.
06 · Propiedades principales
Usar tiles que requieren clave
<VectorTileLayer
style="https://tiles.example.com/styles/basic/style.json"
headers={{ Authorization: `Bearer ${token}` }}
/>07 · Limitaciones actuales
imports de Mapbox y algunos tipos de capa no se dibujan. Aparecen en onDiagnostics.*MapView. No funciona fuera del mapa.