MapConductor React SDK Samples

Codebeispiel

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


// (1) Die Karte erzeugen


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


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


// (2) Daten und Interaktionszustand vorbereiten
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) Die Karte und ihre Overlays rendern


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

Wie der Code funktioniert

Zeichnet einen MapLibre-Vektorstil auf jedem Backend, indem er im Browser gerastert und als gewöhnliche Rasterkacheln ausgeliefert wird.

Das Backend sieht nie einen Vektorstil — deshalb funktioniert das auch mit Google Maps, MapKit, Cesium und allen anderen, die keinen lesen können.

Eine Farbänderung ersetzt den Stil und rastert die bereits geladenen Vektorkacheln neu. Nichts wird erneut geladen: die Geometrie blieb gleich, nur die Farbgebung änderte sich. Symbolebenen werden nicht gezeichnet, da kollisionsfreie Beschriftung die Nachbarkacheln kennen müsste.