MapConductorDen Kartenstil ändern
Ein Paket, das Anpassungen wie „Straßen weiß machen“, „Beschriftungen ausblenden“, „Wasserflächen abdunkeln“ am Vektorstil der Karte deklarativ als Regeln anwendet. Dieselben Regeln funktionieren unverändert auch unter Android und iOS.
01 · Überblick
Regeln sind eine Folge von Paaren aus „welcher Layer (Selektor)“ und „was zu tun ist (Patch)“. Selektoren können nicht über Layer-IDs, sondern über Rollen (Straßen, Wasserflächen, Beschriftungen …) geschrieben werden. Die Schemata von OpenMapTiles, Shortbread und Mapbox Streets werden automatisch erkannt, sodass Sie für jeden Stil keine unterschiedlichen Layer-IDs nachschlagen müssen.
Den von createVectorStyle() zurückgegebenen Wert übergeben Sie an jede beliebige *MapView als mapStyle. In React heißt er mapStyle, weil style das CSS des Elements selbst ist (unter Android und iOS: style).
rasteriser mit einem VectorTileRasteriserÜbergibt man den Stil ohne Rasterizer an eine Karte ohne Vektorunterstützung, erscheint nicht stumm nichts, sondern in der Diagnose der Hinweis „Dieser Stil ist nicht verwendbar“.
02 · Installation
npm install @mapconductor/js-sdk-core @mapconductor/js-vectorstyle
Wenn Sie ihn auch auf Karten ohne Vektorunterstützung verwenden möchten, installieren Sie zusätzlich react-vectortile mit dem Rasterizer (auch die Vorbereitung des Service Workers des Vektorkachel-Layers ist erforderlich).
npm install @mapconductor/react-vectortile
Nur ESM. Der Regel-Compiler ist ein wasm (ca. 190 KB) und wird relativ zu import.meta.url geladen. Mit Vite funktioniert es ohne weiteres. Wird er von einem anderen Ort ausgeliefert, geben Sie dies mit wasmUrl an.
03 · Grundlegende Verwendung
Lässt man document weg, wird der Stil angepasst, den die Karte gerade zeichnet ('currentDesign'). Das folgende Beispiel macht das Standarddesign von MapLibre zu einer schwarz-weißen Karte, auf der nur Straßen sichtbar sind.
import { useMemo } from 'react';
import { buildStyleRules, createVectorStyle, LayerRole } from '@mapconductor/js-vectorstyle';
import { MapLibreMapView2D, useMapLibreViewState } from '@mapconductor/react-for-maplibre';
export function RoadsOnlyMap() {
const state = useMapLibreViewState();
const mapStyle = useMemo(
() => createVectorStyle({
rules: buildStyleRules((r) => {
r.all({ color: '#000000' });
r.role(LayerRole.label, { visible: false });
r.role(LayerRole.roadCasing, { color: '#303030' });
r.role(LayerRole.road, { color: '#ffffff', widthScale: 1.4 });
}),
}),
[],
);
return (
<MapLibreMapView2D
state={state}
mapStyle={mapStyle}
onStyleDiagnostics={(messages) => console.warn(messages)}
/>
);
}Bei Verwendung eines eigenen Stils übergeben Sie { url } oder { text } an document.
04 · Regeln schreiben
Regeln werden von oben nach unten angewendet; wie bei CSS gewinnt bei jedem Punkt die spätere Regel. Grundprinzip: Zuerst mit all das Gesamte festlegen und dann rollenweise überschreiben.
buildStyleRules((r) => {
r.all({ colorFilter: { darken: 0.55 } });
r.role(LayerRole.water, { color: 'rgb(10,28,43)' });
r.role(LayerRole.road, { color: '#d0d0d0' });
r.layerId('poi-*', { visible: false });
r.kind('symbol', { opacity: 0.8 });
});* und ? können verwendet werden.Regeln als JSON halten
Regeln sind auch ein JSON-Dokument. Wenn Sie sie vom Server ausliefern oder über App-Versionen hinweg speichern wollen, halten Sie sie in dieser Form und lesen sie mit parseStyleRules() ein. Dasselbe Dokument lässt sich auch unter Android und iOS lesen.
{
"schemaVersion": 1,
"rules": [
{ "selector": "all", "patch": { "colorFilter": { "darken": 0.55 } } },
{ "selector": { "role": "water" }, "patch": { "color": "rgb(10,28,43)" } }
]
}import { createVectorStyle, parseStyleRules } from '@mapconductor/js-vectorstyle';
const rules = parseStyleRules(await (await fetch('/night.rules.json')).text());
const mapStyle = createVectorStyle({ rules });05 · Verwendung mit Karten ohne Vektorunterstützung
Übergibt man einen VectorTileRasteriser an rasteriser, wird der Stil auf Rasterkacheln gezeichnet und darübergelegt. Die eigene Karte des Providers wird auf das Design None gesetzt und damit ausgeblendet.
import { useMemo } from 'react';
import { createVectorStyle } from '@mapconductor/js-vectorstyle';
import { VectorTileRasteriser } from '@mapconductor/react-vectortile';
import { GoogleMapDesign, GoogleMapView2D, useGoogleMapViewState } from '@mapconductor/react-for-googlemaps';
const state = useGoogleMapViewState({
apiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
mapDesignType: GoogleMapDesign.None,
});
const rasteriser = useMemo(() => new VectorTileRasteriser(), []);
const mapStyle = useMemo(
() => createVectorStyle({
document: { url: 'https://tiles.versatiles.org/assets/styles/colorful/style.json' },
rules,
rasteriser,
}),
[rules, rasteriser],
);
<GoogleMapView2D state={state} mapStyle={mapStyle} style={{ height: 480 }} />new aufzurufen gilt als anderer Stil, und die Karte wird jedes Mal neu erstellt. Halten Sie eine Instanz z. B. mit useMemo erhalten.06 · Wichtige Optionen
{ url, headers? }・{ text }・'currentDesign'.NO_STYLE_RULES bleibt das Original unverändert.'reload' wird das angepasste Dokument als Ganzes übergeben (korrekt, aber schwer).Diagnosen können auch über onStyleDiagnostics der *MapView empfangen werden. Fehlt dies, erscheinen sie in der Konsole. Bei „Regeln, die auf nichts trafen“ sieht man am Endergebnis nur, dass „fast alles wirkt“, deshalb empfiehlt es sich, sie während der Entwicklung sichtbar auszugeben.