MapConductor React SDK Samples

コード例

import { useMemo } from 'react';
import { createGeoPoint, createMapCameraPosition, createPolygonState } from '@mapconductor/js-sdk-core';
import { Polygon } from '@mapconductor/js-sdk-react';
import { MapLibreDesign, MapLibreMapView, useMapLibreViewState } from '@mapconductor/react-for-maplibre';


// (1) 地図の作成


const initialCamera = createMapCameraPosition({
  position: createGeoPoint({ latitude: 35.6812, longitude: 139.7671 }),
  zoom: 12,
});


const mapViewState = useMapLibreViewState({
  mapDesignType: MapLibreDesign.OsmBrightJa,
  cameraPosition: initialCamera,
});


// (2) データと操作用Stateの準備
const geodesicPolygon = useMemo(() => createPolygonState({
  id: 'geodesic', points: longDistancePoints, geodesic: true,
}), [longDistancePoints]);
const straightPolygon = useMemo(() => geodesicPolygon.copy({
  id: 'straight', geodesic: false,
}), [geodesicPolygon]);
const polygons = [geodesicPolygon, straightPolygon];


// (3) 地図とオーバーレイの描画


<MapLibreMapView state={mapViewState}>
  {polygons.map(polygon => (
    <Polygon key={polygon.id} state={polygon} />
  ))}
</MapLibreMapView>

コードの読み方

長距離や日付変更線をまたぐ形状で、測地線と非測地線のポリゴン辺を比較します。

geodesicPolygon は geodesic:true で作成し、straightPolygon は同じ longDistancePoints に対して geodesic:false を指定した .copy です。

両方を描画すると、測地線の辺が最短経路に沿って湾曲し、非測地線の辺は投影上でまっすぐ描かれる違いが分かります。