Doku / Einrichtung / React / OpenLayers

OpenLayers einrichten

Schritte zur Verwendung von OpenLayers im Web über MapConductor. Es ist kein Schlüssel erforderlich und eignet sich, wenn Sie die Projektion und Kachelquellen detailliert steuern möchten.

PACKAGE

react-for-openlayers

API KEY

Nicht erforderlich

CSS

Erforderlich

3D CAMERA

Pseudo

Demo ansehenFilialkarte · React ↗

Bevor Sie beginnen

Node.js 18 oder höher

React 18 oder 19

STEP 01

Installieren

ol ist im Paket enthalten.

terminalnpm

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

STEP 02

Stylesheet laden

Wird nur einmal im Einstiegspunkt der App geladen. Wenn Sie dies vergessen, gehen die Position der Karte und das Aussehen der Steuerelemente verloren.

main.tsxTypeScript

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

STEP 03

TileSource festlegen

OpenLayersDesign ist eine Konstante, die die TileSource von OpenLayers umschließt. Die Standard-OpenStreetMap verwendet die OSM-Quelle von ol und verfügt auch über eine Namensnennung.

ACHTUNG

Der öffentliche Kachelserver von OpenStreetMap hat eine Nutzungspolicy. Wenn Sie Produktionsverkehr senden, verwenden Sie bitte Ihren eigenen Kacheldienst oder einen kommerziellen Dienst.

PRÜFEN

Was Sie sehen sollten

Es ist fertig, wenn die Karte angezeigt wird.

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>
  );
}

Kartendesigns

OpenLayersDesign ist eine Konstante, die die TileSource von ol umschließt.

OpenLayersDesign

Notes

OpenStreetMap

OSM-Quelle von ol. Mit Namensnennung

None

Keine Basiskacheln

Fehlerbehebung

Neigung und Drehung funktionieren nicht

OpenLayers hat keine native 3D-Kamera. MapConductor nähert sich Neigung und Peilung mit CSS-3D-Transformationen an. Es ist nur ein visueller Effekt.

Die Position der Karte geht verloren

Überprüfen Sie, ob style.css geladen ist.

Die Karte wird nur während der Entwicklung doppelt initialisiert

React StrictMode führt den Effekt zweimal aus. Jeder Anbieter erkennt dies und verwirft einen von ihnen, sodass es nicht notwendig ist, StrictMode zu entfernen.

Weiter

Wenn Sie die native Funktion von OpenLayers benötigen, können Sie die Map-Instanz von ol aus MapViewHolder extrahieren und direkt bearbeiten.