ตัวอย่าง leaflet js ใน react

ตัวอย่างต่อไปนี้แสดงวิธีสร้างแผนที่แบบโต้ตอบใน React โดยใช้ LeafletJS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React, { useState } from "react";
import { Map, TileLayer, Marker } from "react-leaflet";

function App() {
const [zoom, setZoom] = useState(12);
const [center, setCenter] = useState([13.7577, 100.5000]);

return (
<Map center={center} zoom={zoom}>
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
<Marker position={center} />
</Map>
);
}

export default App;

โค้ดนี้สร้างแผนที่แบบโต้ตอบที่มีจุดมาร์กเกอร์อยู่ที่กรุงเทพมหานคร

องค์ประกอบ Map จะใช้เพื่อสร้างแผนที่ LeafletJS องค์ประกอบ TileLayer จะใช้เพื่อสร้างเลเยอร์แผนที่แบบเปิด องค์ประกอบ Marker จะใช้เพื่อสร้างจุดมาร์กเกอร์บนแผนที่

ตัวแปร zoom และ center จะใช้เพื่อตั้งค่าค่าเริ่มต้นสำหรับแผนที่

เมื่อคุณรันโค้ดนี้ คุณจะเห็นแผนที่แบบโต้ตอบที่มีจุดมาร์กเกอร์อยู่ที่กรุงเทพมหานคร

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

ตัวอย่างการปรับแต่งแผนที่:

  • เปลี่ยนระดับการซูม:
1
const [zoom, setZoom] = useState(16);
  • ย้ายตำแหน่งของจุดมาร์กเกอร์:
1
const [center, setCenter] = useState([13.7577, 100.5000]);
  • เพิ่มเลเยอร์:
1
<TileLayer url="https://{s}.mapbox.com/styles/v1/mapbox/streets-v11/tiles/256/{z}/{x}/{y}.png" />

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับการใช้ LeafletJS ใน React จากเอกสารประกอบของ React Leaflet