MapConductorBreyta stíl korts
Pakki sem beitir lýsandi reglum á vegstíl kortsins, svo sem „gera vegi hvíta“, „fela merkingar“ og „gera vatnsför dökk“. Sömu reglur virka óbreyttar á Android og iOS.
01 · Yfirlit
Reglur eru runa af pörum: „á hvaða lag (val“ og „hvað skal gera (bót“. Valið er skrifað eftir hlutverki (vegur, vatnsför, merkingar …), ekki eftir lagakenni. Skemurnar OpenMapTiles, Shortbread og Mapbox Streets greinast sjálfkrafa, svo þú þarft ekki að rannsaka ólík lagakenni fyrir hvern stíl.
Gildið sem createVectorStyle() skilar er sent sem mapStyle til hvaða *MapView sem er. Í React heitir eiginleikinn mapStyle því style er CSS á eiginlega hlutnum (á Android og iOS heitir hann style).
VectorTileRasteriser fyrir rasteriserEf þú sendir stílinn til korts sem styður ekki vektora án þess að gefa upp rasteriser birtist greiningarathugasemd „þennan stíl er ekki hægt að nota“ í stað þess að það gerist ekkert og ekki er teiknað neitt.
02 · Uppsetning
npm install @mapconductor/js-sdk-core @mapconductor/js-vectorstyle
Ef þú vilt nota þetta líka á kort sem styður ekki vektora skaltu einnig setja upp react-vectortile sem inniheldur rasteriserinn (þá þarf líka að undirbúa Service Worker fyrir vektorflíslagið).
npm install @mapconductor/react-vectortile
Aðeins ESM. Regluvinnslan er wasm (um 190 KB) og er lesin afstætt við import.meta.url. Hún virkar óbreytt með Vite. Ef þú dreifir henni frá öðrum stað skaltu tilgreina slóðina með wasmUrl.
03 · Grunnotaðin
Ef document er sleppt, er stílinum sem kortið teiknar núna ('currentDesign') stillt. Dæmið hér að neðan gerir sjálfgefna hönnun MapLibre að svarthvítu korti þar sem aðeins vegir eru sýnilegir.
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)}
/>
);
}Þegar þitt eigið stíll er notaður, skal senda { url } eða { text } í document.
04 · Hvernig reglur eru skrifaðar
Reglur eru metnar ofan frá og niður, og eins og í CSS vinnur sá síðari í hverju atriði. Það er best að byrja á að setja allt með all og svo yfirskrifa eftir hlutverki.
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 });
});* og ? má nota.Halda reglum í JSON
Reglurnar eru einnig JSON-skjal. Þegar þær eru sendar frá þjóni eða geymdar yfir útgáfur forritsins, skal halda þeim á þessu formi og lesa með parseStyleRules(). Sama skjal er lesanlegt á Android og iOS.
{
"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 · Nota á kortum án stuðnings við vigrar
Ef VectorTileRasteriser er sent sem rasteriser, er stíllinn teiknaður á raster-flísar og lagður ofan á. Kortið frá veitanum sjálfum er fjarlægt með því að stilla á None hönnunina.
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 er notað við hverja teikningu er það talið annar stíll og kortið er endurgerð í hvert skipti. Haldið einu eintaki til, til dæmis með useMemo.06 · Helstu valkostir
{ url, headers? }・{ text }・'currentDesign'.NO_STYLE_RULES verður sú upprunalega óbreytt.'reload' er gefið er heildarstjórnaða skjalið sent (rétt en þungt).Greiningar er einnig hægt að fá í gegnum onStyleDiagnostics í *MapView. Ef það er sleppt birtast þær í stjórnborðinu. „Reglur sem ekku áttu við“ sést varla í útlitinu — þar á himni virðist allt „virka að mestu“ — svo það er mælt með því að hafa þær sýnilegar meðan þú þróar.