ภาพบนพื้นผิว | MapLibre

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

import { useState } from 'react';
import {
  createGeoPoint,
  createGeoRectBounds,
  createGroundImageState,
  createMapCameraPosition,
  createMarkerState,
  type MarkerState,
} from '@mapconductor/js-sdk-core';
import { GroundImage, Markers } from '@mapconductor/js-sdk-react';
import { MapLibreDesign, MapLibreMapView2D, 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 [groundImageState] = useState(() => createGroundImageState({
  id: 'historic-map', imageUrl, bounds: initialBounds, opacity: 0.7,
}));


const moveSouthWest = (markerState: MarkerState) => {
  groundImageState.bounds = createGeoRectBounds({
    southWest: markerState.position,
    northEast: groundImageState.bounds.northEast,
  });
};


const southWestMarker = createMarkerState({
  id: 'south-west', position: groundImageState.bounds.southWest!,
  draggable: true, onDrag: moveSouthWest, onDragEnd: moveSouthWest,
});
const cornerMarkers = [southWestMarker, northEastMarker];


// (3) เรนเดอร์แผนที่และโอเวอร์เลย์


<MapLibreMapView2D state={mapViewState}>
  <GroundImage state={groundImageState} />
  <Markers states={cornerMarkers} />
</MapLibreMapView2D>

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

คงอินสแตนซ์ GroundImageState ไว้ตัวเดียว แล้วอัปเดต bounds จากมาร์กเกอร์มุมที่ลากได้

GroundImageState ถูกสร้างด้วย useState เพียงตัวเดียวและไม่เคยถูกแทนที่ การลากมุมจะเรียก moveSouthWest ซึ่งกำหนด createGeoRectBounds ตัวใหม่ให้ groundImageState.bounds

เนื่องจากสถานะนี้สังเกตการณ์ได้ ทุกการกำหนดค่า bounds จึงถูกส่งต่อไปยังผู้ให้บริการแผนที่ ภาพที่ซ้อนอยู่จึงยืดตามมาร์กเกอร์มุม

MapConductor React SDK Samples

ภาพบนพื้นผิว | MapLibre | MapConductor React SDK

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

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