Skjölun / Uppsetning / React / OpenLayers

Uppsetning á OpenLayers

Hvernig nota má OpenLayers á vefnum gegnum MapConductor. Enginn lykill, og rétti kosturinn þegar þú þarft fínstýringu á vörpunum og flísauppsprettum.

PACKAGE

react-for-openlayers

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

ol fylgir pakkanum.

terminalnpm

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

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

STEP 03

Veldu flísauppsprettu

Hvert OpenLayersDesign vefur TileSource úr OpenLayers. Sjálfgefna OpenStreetMap notar OSM-uppsprettu ol og ber heimildatilvísunina.

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.

OpenLayersMap.tsxTypeScript · React

import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { OpenLayersDesign, OpenLayersMapView, useOpenLayersMapViewState } from '@mapconductor/react-for-openlayers';
import '@mapconductor/react-for-openlayers/style.css';

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

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

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

Kortahönnun

Hvert OpenLayersDesign vefur TileSource úr ol.

OpenLayersDesign

Notes

OpenStreetMap

OSM-uppspretta ol, heimild innifalin

None

Engar grunnflísar

Bilanaleit

Halli og snúningur virka ekki

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

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

Þegar þú þarft eitthvað sem aðeins OpenLayers ræður við geturðu dregið Map-tilvik ol út úr MapViewHolder og stýrt því beint.