MapConductorVektorflísarlag
Pakki sem teiknar vektorstíl á MapLibre-sniði (style.json) sem rasterflísar í vafranum svo hægt sé að leggja hann ofan á hvaða kortaveitu sem er. Með kortum sem sjálft lesur ekki vektorstíl, svo sem Google Maps, MapKit, HERE, ArcGIS og Cesium, verður útlitið það sama.
01 · Yfirlit
Teiknin fer fram íRenderer skrifaður í Rust og settur saman sem wasm, og keyrir í Web Worker. Teiknuðu flísarnir eru afhentir gegnum staðbundna flísaþjón SDK-ins (Service Worker) og birtast á kortinu sem venjulegt RasterLayer. Frá sjónarhorni kortsins er þetta bara venjulegt rasterlag. Þess vegna skiptir veitan engu máli.
Lagið er lagt inn í tveimur hlutum: „grunninn“ með fyllingum, línum og hringjum, og gagnsæi „merkjalagið“ ofan á. Þegar leturmálin berast er aðeins merkjalagið teiknað aftur, svo kortið hverfur ekki þegar textinn birtist. Tilvísun í uppruna stílsins (t.d. OpenStreetMap) bætist einnig sjálfkrafa við.
02 · Uppsetning
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-vectortile@mapconductor/js-vectorstyle er sett inn samhliða sem ósjálfseign. Pakkinn er aðeins ESM.
Setja upp Service Worker fyrir flísarnar
Flísarnir eru afhentir frá /tile-sw.js. Söm skilyrði gilda og um hitakort. Afritaðu skrána úr @mapconductor/js-sdk-core í opinbera möppu forritsins.
{
"scripts": {
"postinstall": "cp node_modules/@mapconductor/js-sdk-core/dist/tile-sw.js public/tile-sw.js"
}
}Í framleiðsluútgáfum Vite þarf stillingu sem skrifar worker sem ES-einingu (það þarf ekki í dev-þjóninum).
import { defineConfig } from 'vite';
export default defineConfig({
worker: { format: 'es' },
});localhost er HTTP nógu gott, en ef opnað er frá öðrum tæki á LAN þarf HTTPS.03 · Grunnnotkun
Það má setja þetta inn í hvaða *MapView sem er. Í style má senda slóð á style.json, strenginn sjálfan eða tooðna hlut. Dæmið hér að neðan felur Google Maps kortið sjálft (GoogleMapDesign.None) og teiknar vektorstíl ofan á það.
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 er borinn saman eftir innihaldi. Ef innihaldið er sama er engin endurteiknun, jafnvel þótt nýr hlutur sé búinn til og sendur í hvert skipti.
04 · Breyta útlitinu
rules þarf reglurnar sem lýst er í að breyta útliti kortsins, og kortið er þá teiknað með þeim breytingum, svo sem að breyta litum eða fela lög. Faldaðir hlutverk (eins og byggingar og merki) eru ekki teiknaðir í fyrsta lagi.
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} />Þegar reglum eða stíl er breytt er aðeins endurteiknað úr vektortílum í minni, ekkert er sótt af netinu. Formið hefur ekki breyst, aðeins litunin. Þessi notkun, eins og að færa lit með sleða, eykur enga umferð. Ef rules er sleppt er regluvinnslan (wasm) ekki hlaðin inn.
05 · Nota sem grunnkort
Með asBasemap er í MapLibre, Mapbox og MapTiler ekki búið til rasterversion, heldur er stílnum sent beint á kortið og skipt út fyrir hönnun kortsins. Þessir þrír geta sjálfir teiknað vektorstíl, það er hraðara og fallegri. Þá virkar opacity ekki.
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>Hjá öðrum veitum breytir asBasemap engu. Felið kort veitunnar sjálfs með því að stilla hönnunina á None í forritinu.
06 · Mikilvægustu eiginleikarnir
Nota tílur sem krefjast lykils
<VectorTileLayer
style="https://tiles.example.com/styles/basic/style.json"
headers={{ Authorization: `Bearer ${token}` }}
/>07 · Núverandi takmarkanir
imports og sumar lagagerðir eru ekki teiknaðar. Það birtist í onDiagnostics.*MapView. Virkar ekki utan kortsins.