โพลีกอนแบบเส้นจีโอเดสิก | MapLibre 3D

ตัวอย่างโค้ด

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) เตรียมข้อมูลและสถานะการโต้ตอบ
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 เป็น .copy ของมันที่ตั้ง geodesic:false บนชุด longDistancePoints เดียวกัน

การเรนเดอร์ทั้งสองพร้อมกันทำให้เห็นว่าขอบแบบจีโอเดสิกโค้งตามเส้นทางที่สั้นที่สุด ขณะที่ขอบตรงยังคงราบไปตามการฉายของแผนที่

MapConductor React SDK Samples

โพลีกอนแบบเส้นจีโอเดสิก | MapLibre 3D | MapConductor React SDK

ตัวอย่างโค้ด

โค้ดนี้ทำงานอย่างไร