Skjölun / Uppsetning / React / MapLibre

Uppsetning á MapLibre

Hvernig nota má MapLibre á vefnum gegnum MapConductor — enginn lykill, stysta leiðin að virku korti. maplibre-gl fylgir pakkanum.

PACKAGE

react-for-maplibre

API KEY

Enginn

CSS

Nauðsynlegt

REACT NATIVE

Í boði

Sami þjónustuaðili, aðrir vettvangarAndroid iOS

Skoða sýnidæmiVerslanakort · React ↗

Áður en þú byrjar

Node.js 18 eða nýrra

React 18 eða 19

STEP 01

Settu upp

maplibre-gl fylgir pakkanum — engin sérstök uppsetning.

terminalnpm

npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
            @mapconductor/react-for-maplibre

STEP 02

Undanskildu það forpökkun Vite

Í Vite skaltu bæta þjónustuaðilanum við optimizeDeps.exclude. maplibre-gl v6 hleður verkamanni sínum eftir vefslóð, og forpökkunin skilar þeirri skrá ekki inn í .vite/deps, svo beiðnin misheppnast.

vite.config.tsTypeScript · Vite

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
    optimizeDeps: {
        exclude: ["@mapconductor/react-for-maplibre", "@mapconductor/js-sdk-core"],
    },
    plugins: [react()],
});

STEP 03

Fluttu inn stílblaðið

Fluttu hana inn einu sinni úr inngangsskrá forritsins. Gleymist það kemur umbrot kortsins og stýringar rangt út.

main.tsxTypeScript

import '@mapconductor/react-for-maplibre/style.css';

STEP 04

Veldu stíl

MapLibre hefur engan lykil, en þú velur hvaðan flísarnar koma. Sjálfgefna DemoTiles er til prófunar.

VARÚÐ

OsmBright-, MapTiler- og OpenMapTiles-stílarnir eru bornir fram af opinberum kynningarflísahýsli sem miðar við Japan (tile.openstreetmap.jp). Það er fínt á meðan þú þróar — fyrir raunumferð og til að fara að leyfisskilmálum skaltu beina mapDesignType á þitt eigið hýsta stíl-JSON.

STAÐFESTA

Það sem þú ættir að sjá

Kort miðað á Tókýó með einu merki þýðir að þú ert búin/n.

HelloMap.tsxTypeScript · React

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

const TOKYO = createGeoPoint({ latitude: 35.6812, longitude: 139.7671 });

export function HelloMap() {
  const mapState = useMapLibreViewState({
    id: 'maplibre-map',
    mapDesignType: MapLibreDesign.DemoTiles,
    cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
  });
  const [markerState] = useState(() => createMarkerState({ id: 'tokyo', position: TOKYO }));

  return (
    <MapLibreMapView2D state={mapState} style={{ height: 480 }}>
      <Marker state={markerState} />
    </MapLibreMapView2D>
  );
}

Stöðuhlutur

Það sem useMapLibreViewState tekur við. MapLibreMapView er þrívíða sýnin og MapLibreMapView2D sú tvívíða; þær deila stöðunni.

signatureTypeScript

useMapLibreViewState({
  id?: string;
  mapDesignType?: MapLibreMapDesignType; // default MapLibreDesign.OsmBright
  cameraPosition?: MapCameraPosition;    // default MapCameraPosition.Default
})

// View props, on top of the shared MapViewBaseProps
{
  maxZoom?: number;
  minZoom?: number;
  projection?: 'mercator' | 'globe';   // a component prop, not part of state
  containerStyle?: React.CSSProperties;
  markerTilingOptions?: MarkerTilingOptions;
  onError?: (error: Error) => void;
}

Kortahönnun

Hvert MapLibreDesign vefur vefslóð á stíl-JSON.

MapLibreDesign

Notes

DemoTiles

demotiles.maplibre.org — engar stillingar

OsmBright / OsmBrightEn / OsmBrightJa

OSM Bright, með sjálfgefnum, enskum og japönskum merkingum

MapTilerTonerEn / MapTilerTonerJa

Toner-stíllinn með mikilli birtuskilum

MapTilerBasicEn / MapTilerBasicJa

Einfaldaði Basic-stíllinn

OpenMapTiles

Almenni OpenMapTiles-stíllinn

Bilanaleit

Kortið verður autt andartak þegar stílnum er breytt

Að breyta mapDesignType frumstillir kortið upp á nýtt fremur en að kalla á setStyle — stílskipti eru ekki ódýr. Forðastu viðmót sem víxlar þeim í sífellu.

Umbrot kortsins eða stýringar líta brotnar út

Athugaðu að þú hafir flutt inn style.css.

Kortið frumstillist tvisvar í þróun

React StrictMode keyrir effect tvisvar. Hver þjónustuaðili greinir það og hendir keyrslunni sem var hætt við, svo þú þarft ekki að slökkva á StrictMode.

Næst

Sendu projection="globe" fyrir hnattsýn. Þetta er eigind einingarinnar, ekki hluti af stöðuhlutnum.