Skjölun / Uppsetning / React / Leaflet

Uppsetning á Leaflet

Hvernig nota má Leaflet á vefnum gegnum MapConductor. Enginn lykill, og góður kostur þegar þig langar bara að teikna rasterflísar á léttan hátt.

PACKAGE

react-for-leaflet

API KEY

Enginn

CSS

Nauðsynlegt

3D CAMERA

Eftirlíkt

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

leaflet fylgir pakkanum.

terminalnpm

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

STEP 02

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-leaflet/style.css';

STEP 03

Ákveddu hvaðan flísarnar koma

Sjálfgefna LeafletDesign.OpenStreetMap notar opinberar flísar OpenStreetMap og ber heimildatilvísunina með sér.

VARÚÐ

Opinberu flísaþjónar OpenStreetMap hafa notkunarskilmála — fyrir raunumferð skaltu nota þínar eigin flísar eða viðskiptalega þjónustu.

STAÐFESTA

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

Uppsetningunni er lokið þegar kortið teiknast.

LeafletMap.tsxTypeScript · React

import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { LeafletDesign, LeafletMapView, useLeafletMapViewState } from '@mapconductor/react-for-leaflet';
import '@mapconductor/react-for-leaflet/style.css';

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

export function LeafletMap() {
  const state = useLeafletMapViewState({
    mapDesignType: LeafletDesign.OpenStreetMap,
    cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
  });
  const [markerState] = useState(() => createMarkerState({ id: 'tokyo', position: TOKYO }));

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

Kortahönnun

Hvert LeafletDesign vefur flísaslóðarsniðmát — smíðaðu gerðina sjálf/ur til að benda á þínar eigin flísar.

LeafletDesign

Notes

OpenStreetMap

Staðlaðar OSM-flísar, heimild innifalin, hámarksaðdráttur 19

None

Engar grunnflísar — fyrir þegar þú vilt aðeins yfirlögin þín

Bilanaleit

Halli og snúningur virka ekki

Leaflet hefur enga innbyggða þrívíða myndavél. MapConductor nálgar halla og stefnu með 3D-ummyndun í CSS — sjónræn brella, ekki raunveruleg þrívíð myndavél.

Umbrot kortsins lítur brotið ú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

Þarftu raunverulegt 3D? Skoðaðu MapLibre eða Cesium. Þarftu nákvæma stjórn á vörpunum? Skoðaðu OpenLayers.