MapConductorการตั้งค่า MapLibre
ขั้นตอนการใช้ MapLibre ผ่าน MapConductor บนเว็บ ไม่ต้องใช้คีย์และเริ่มต้นได้เร็วที่สุด maplibre-gl ถูกรวมอยู่ในแพ็กเกจ
ก่อนเริ่ม
ติดตั้ง
maplibre-gl ถูกรวมอยู่ในแพ็กเกจแล้ว จึงไม่จำเป็นต้องติดตั้งแยก
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-for-maplibreยกเว้นจากการ pre-bundle ของ Vite
หากใช้ Vite ให้เพิ่มผู้ให้บริการลงใน optimizeDeps.exclude เนื่องจาก maplibre-gl v6 โหลด worker ผ่าน URL หากทำการ bundle ล่วงหน้า ไฟล์ worker จะไม่ถูกสร้างภายใต้ .vite/deps และการโหลดจะล้มเหลว
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
optimizeDeps: {
exclude: ["@mapconductor/react-for-maplibre", "@mapconductor/js-sdk-core"],
},
plugins: [react()],
});โหลดสไตล์ชีต
โหลดครั้งเดียวที่จุดเริ่มต้นของแอป หากลืมจะทำให้ตำแหน่งแผนที่และรูปลักษณ์ของตัวควบคุมเสียหาย
import '@mapconductor/react-for-maplibre/style.css';
กำหนดสไตล์
MapLibre ไม่มีคีย์ แต่คุณต้องกำหนดแหล่งที่มาของไทล์เอง DemoTiles เริ่มต้นใช้สำหรับตรวจสอบการทำงาน
ตรวจสอบ
สิ่งที่ควรเห็น
แผนที่จะปรากฏขึ้นโดยมีโตเกียวเป็นศูนย์กลาง และหากมีมาร์คเกอร์ตั้งอยู่ 1 ตัวถือว่าเสร็จสิ้น
import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { MapLibreDesign, MapLibreMapView2D, useMapLibreViewState } from '@mapconductor/react-for-maplibre';
import '@mapconductor/react-for-maplibre/style.css';
const TOKYO = createGeoPoint({ latitude: 35.6812, longitude: 139.7671 });
export function HelloMap() {
const mapState = useMapLibreViewState({
id: 'maplibre-map',
mapDesignType: MapLibreDesign.DemoTiles,
cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});
const [markerState] = useState(() => createMarkerState({ id: 'tokyo', position: TOKYO }));
return (
<MapLibreMapView2D state={mapState} style={{ height: 480 }}>
<Marker state={markerState} />
</MapLibreMapView2D>
);
}อ็อบเจกต์สถานะ
พารามิเตอร์ที่ useMapLibreViewState รับ MapLibreMapView เป็น 3D, MapLibreMapView2D เป็น 2D ทั้งสองแบ่งปันสถานะเดียวกัน
useMapLibreViewState({
id?: string;
mapDesignType?: MapLibreMapDesignType; // default MapLibreDesign.OsmBright
cameraPosition?: MapCameraPosition; // default MapCameraPosition.Default
})
// View props, on top of the shared MapViewBaseProps
{
maxZoom?: number;
minZoom?: number;
projection?: 'mercator' | 'globe'; // a component prop, not part of state
containerStyle?: React.CSSProperties;
markerTilingOptions?: MarkerTilingOptions;
onError?: (error: Error) => void;
}ดีไซน์แผนที่
MapLibreDesign เป็นค่าคงที่ที่ห่อหุ้ม URL ของสไตล์ JSON
การแก้ปัญหา
เมื่อเปลี่ยนสไตล์ แผนที่จะหายไปชั่วคราว
- การเปลี่ยน mapDesignType จะเป็นการสร้างแผนที่ใหม่ ไม่ใช่การใช้ setStyle การเปลี่ยนสไตล์ไม่ใช่เรื่องเบา โปรดหลีกเลี่ยง UI ที่เปลี่ยนบ่อย
ตำแหน่งแผนที่และตัวควบคุมเสียหาย
- ตรวจสอบว่า style.css ถูกโหลดหรือไม่
แผนที่จะถูกเริ่มต้นสองครั้งเฉพาะในระหว่างการพัฒนา
- React StrictMode จะเรียกใช้ effect สองครั้ง เนื่องจากผู้ให้บริการแต่ละรายตรวจพบสิ่งนี้และทำลายตัวใดตัวหนึ่ง จึงไม่จำเป็นต้องปิด StrictMode
ถัดไป
การส่ง projection="globe" จะทำให้แสดงผลเป็นลูกโลก นี่คือ props ของมุมมอง และไม่รวมอยู่ในออบเจ็กต์สถานะ