MapConductorAð skipta um kortahönnun (flísar)
Útlit kortsins ræðst af einu mapDesignType. Veldu eitt af forstillingunum sem fylgja hverjum þjónustuaðila, eða skilgreindu þína eigin út frá stíl-JSON eða flísaslóð. Skiptin eru ekkert nema úthlutun á eigind — kortið þarf ekki að endurbyggja.
01 · Hönnunargerðin
Hver hönnun þjónustuaðila útfærir MapDesignTypeInterface (MapDesignTypeProtocol á iOS). Lærðu þessa þrjá meðlimi og meðhöndlunin helst eins milli þjónustuaðila.
Auðkennir hönnunina — annaðhvort innbyggða gildi þjónustuaðilans (t.d. mapType-fasti hjá Google) eða strengur.
Gildið sem er rétt vél þjónustuaðilans, þar með talin vefslóð stíl-JSON eða flísaskilgreining.
Reglur sem skipta um heimildatexta eftir aðdrætti og svæði. Nauðsynlegar þegar þú kemur með þínar eigin flísar.
02 · Forstillingar
Hver pakki þjónustuaðila birtir staðalhannanir sínar sem fasta. Sýnisforritin nota þessa lista beint sem valkosti.
iOS · React
React: MapboxDesign
Á React: Streets · Outdoors · Light · Dark · SatelliteStreets, auk stíl-JSON úr OsmBright- og MapTiler-fjölskyldunni
iOS / React: ArcGISMapDesign
React: TomTomDesign
React hefur einnig StandardLight / Dark · DrivingLight / Dark · MonoLight / Dark
React
React
React
React
Aðeins þær línur sem eru ólíkar eftir vettvangi eru merktar; annars staðar eru gerðarheitið og fastaheitin þau sömu á öllum þremur vettvöngunum.
03 · Að skipta
Úthlutaðu á mapDesignType á stöðu kortasýnarinnar. Staðan er vöktuð, svo kortið breytist um leið og þú úthlutar.
// state er MapViewStateInterface<*>; þrengdu það að gerð þjónustuaðilans áður en úthlutað er
when (state) {
is GoogleMapViewStateInterface ->
state.mapDesignType = GoogleMapDesign.Satellite
is MapLibreViewStateInterface ->
state.mapDesignType = MapLibreDesign.OsmBrightJa
is MapTilerViewStateInterface ->
state.mapDesignType = MapTilerDesign.Toner
}// Upphafshönnunin er gefin þegar staðan er búin til
@StateObject private var mapLibreState = MapLibreViewState(
mapDesignType: MapLibreDesign.DemoTiles,
cameraPosition: viewModel.initCameraPosition
)
// Skiptin er aðeins úthlutun á @Published-eigind
mapLibreState.mapDesignType = MapLibreDesign.OsmBrightJaconst [mapViewState, setMapViewState] =
useState<MapViewStateInterface<MapDesignTypeInterface<unknown>> | null>(null);
const handleDesignChange = (designId: string) => {
const option = mapDesignOptions.find(item => item.design.id === designId);
if (!mapViewState || !option) return;
mapViewState.mapDesignType = option.design;
};04 · Að skilgreina eigin hönnun
Forstillingargerðirnar eru líka opinberir smiðir. Gefðu id auk vefslóðar á stíl-JSON (vigur) eða flísaslóðarsniðmáts (raster) og þín eigin hönnun fær nákvæmlega sömu meðferð og forstilling.
// MapLibreDesign er data class: réttu því vefslóð á stíl-JSON og þú átt þína eigin hönnun
val GsiPale =
MapLibreDesign(
id = "gsi-pale",
styleJsonURL = "https://example.com/styles/gsi-pale/style.json",
attributionRules =
listOf(
AttributionRule(attribution = "GSI-flísar"),
AttributionRule(attribution = "GEBCO", minZoom = 5, maxZoom = 8),
),
)private val mapLibreDesigns =
listOf(
MapDesignOption(label = "OsmBright", design = MapLibreDesign.OsmBright),
MapDesignOption(label = "GSI Pale", design = GsiPale),
)// Vefur innbyggðu mapType-fastann óbreyttan og bætir aðeins við heimildinni
val NormalWithNotice =
GoogleMapDesign.Custom(
id = MAP_TYPE_NORMAL,
attributionRules = listOf(AttributionRule(attribution = "Eigin gögn 2026")),
)Þar sem kortategundin er innbyggður fasti — Google Maps — notaðu GoogleMapDesign.Custom, sendu fastann sem id og gefðu þinn eigin heimildatexta. MapTiler, Mapbox og HERE bjóða smiði af sama formi.
// public init(id:styleJsonURL:attributionRules:) er leiðin inn fyrir þína eigin hönnun
let gsiPale = MapLibreDesign(
id: "gsi-pale",
styleJsonURL: "https://example.com/styles/gsi-pale/style.json",
attributionRules: [
AttributionRule(attribution: "GSI-flísar"),
AttributionRule(attribution: "GEBCO", minZoom: 5, maxZoom: 8),
]
)private let mapLibreDesigns = [
MapDesignOption(label: "DemoTiles", design: MapLibreDesign.DemoTiles),
MapDesignOption(label: "GSI Pale", design: gsiPale),
]
// Varpaðu í gerð þjónustuaðilans þegar því er beitt
if let design = option.design as? MapLibreDesign {
mapLibreState.mapDesignType = design
}Þar sem þetta er strúktúra, skilgreindu hana sem let og deildu henni hvar sem er. Valkostur ViewModel-sins geymir design: Any, svo þrengdu hann með as? þegar honum er beitt.
const GSI_STANDARD_DESIGN = new LeafletDesign({
id: 'gsi-standard',
tileUrl: 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
tileOptions: { minZoom: 5, maxZoom: 18, tileSize: 256 },
attributionRules: GSI_STANDARD_ATTRIBUTION_RULES,
});
export const LEAFLET_DESIGNS: MapDesignOption[] = [
{ label: 'OpenStreetMap', design: LeafletDesign.OpenStreetMap },
{ label: 'GSI Standard', design: GSI_STANDARD_DESIGN },
{ label: 'None', design: LeafletDesign.None },
];// new MapLibreDesign(id, styleJsonURL, attributionRules?)
const GSI_PALE = new MapLibreDesign(
'gsi-pale',
'https://example.com/styles/gsi-pale/style.json',
[{ attribution: GSI_ATTRIBUTION }],
);
export const MAPLIBRE_DESIGNS: MapDesignOption[] = [
{ label: 'OsmBrightJa', design: MapLibreDesign.OsmBrightJa },
{ label: 'GSI Pale', design: GSI_PALE },
];Leaflet-hannanir eru rasterflísar, MapLibre-hannanir eru stíl-JSON. Lýsigögn hönnunar búa í sama pakka og þungt keyrslu-SDK hvers þjónustuaðila, svo sýnidæmið flytur þau inn eftir þörfum fyrir hvern þjónustuaðila til að halda einingunum aðskildum.
05 · Reglur um heimildir
Þegar þú kemur með þínar eigin flísar skaltu bera skilyrði flísaveitandans um heimildir sem reglur. Aðeins þær reglur sem eiga við núverandi aðdrátt og sýnarglugga birtast.
06 · Sýnisforrit
Öll þrjú sýnisforritin koma með hönnunarrofa. Viðmótið er hefðbundið á hverjum vettvangi; aðeins úthlutunin er sameiginleg.
val mapViewState = rememberMapLibreMapViewState(
mapDesign = MapLibreDesign.DemoTiles,
cameraPosition = MapCameraPosition(
position = GeoPoint.fromLatLong(21.382314, -157.933097),
zoom = 12.0,
),
)
val designs = listOf(
"Demo" to MapLibreDesign.DemoTiles,
"OSM Bright" to MapLibreDesign.OsmBrightJa,
"Toner" to MapLibreDesign.MapTilerTonerJa,
)
MapLibreMapView(state = mapViewState, modifier = Modifier.weight(1f))
Row {
designs.forEach { (label, design) ->
// Just an assignment. The map is not rebuilt, so the camera stays where it is
Button(onClick = { mapViewState.mapDesignType = design }) { Text(label) }
}
}