LeafletJS - เริ่มต้นใช้งาน

Leaflet.js คืออะไร

Leaflet.js เป็นไลบรารีโอเพนซอร์สที่ใช้ซึ่งเราสามารถปรับใช้แผนที่เว็บที่เรียบง่ายโต้ตอบได้และมีน้ำหนักเบา

  • ไลบรารี Leaflet JavaScript ช่วยให้คุณสามารถใช้เลเยอร์ต่างๆเช่นเลเยอร์ไทล์, WMS, เครื่องหมาย, ป๊อปอัป, เลเยอร์เวกเตอร์ (โพลีไลน์, รูปหลายเหลี่ยม, วงกลม ฯลฯ ) การวางซ้อนภาพและ GeoJSON

  • คุณสามารถโต้ตอบกับแผนที่ Leaflet ได้โดยการลากแผนที่การซูม (โดยการดับเบิลคลิกหรือการเลื่อนวงล้อ) ใช้แป้นพิมพ์โดยใช้การจัดการเหตุการณ์และโดยการลากเครื่องหมาย

  • Leaflet รองรับเบราว์เซอร์เช่น Chrome, Firefox, Safari 5+, Opera 12+, IE 7–11 บนเดสก์ท็อปและเบราว์เซอร์เช่น Safari, Android, Chrome, Firefox สำหรับโทรศัพท์มือถือ

ขั้นตอนในการโหลดแผนที่บนเว็บเพจ

ทำตามขั้นตอนด้านล่างเพื่อโหลดแผนที่บนหน้าเว็บของคุณ -

ขั้นตอนที่ 1: สร้างเพจ HTML

สร้างหน้า HTML พื้นฐานด้วย head และ body tags ดังรูปด้านล่าง -

<!DOCTYPE html>
<html>
   <head>
   </head>
   
   <body>
      ...........
   </body>
</html>

ขั้นตอนที่ 2: โหลด Leaflet CSS Script

รวมสคริปต์ Leaflet CSS ในตัวอย่าง -

<head>
   <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
</head>

ขั้นตอนที่ 3: โหลด Leaflet Script

โหลดหรือรวม Leaflet API โดยใช้แท็กสคริปต์ -

<head>
   <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>

ขั้นตอนที่ 4: สร้างคอนเทนเนอร์

ในการยึดแผนที่เราต้องสร้างองค์ประกอบคอนเทนเนอร์ โดยทั่วไปแท็ก <div> (คอนเทนเนอร์ทั่วไป) ถูกใช้เพื่อจุดประสงค์นี้

สร้างองค์ประกอบคอนเทนเนอร์และกำหนดขนาด -

<div id = "sample" style = "width:900px; height:580px;"></div>

ขั้นตอนที่ 5: ตัวเลือกแผนที่

Leaflet มีตัวเลือกมากมายเช่นประเภทตัวเลือกการควบคุมตัวเลือกการโต้ตอบตัวเลือกสถานะแผนที่ตัวเลือกภาพเคลื่อนไหว ฯลฯ โดยการตั้งค่าเหล่านี้เราสามารถปรับแต่งแผนที่ได้ตามต้องการ

สร้างไฟล์ mapOptions วัตถุ (สร้างขึ้นเช่นเดียวกับตัวอักษร) และตั้งค่าสำหรับศูนย์ตัวเลือกและการซูมโดยที่

  • center - ตามค่าของตัวเลือกนี้คุณต้องส่งไฟล์ LatLngวัตถุระบุตำแหน่งที่เราต้องการจัดกึ่งกลางแผนที่ (เพียงระบุค่าละติจูดและลองจิจูดภายใน[] วงเล็บปีกกา)

  • zoom - ในฐานะที่เป็นค่าของตัวเลือกนี้คุณจะต้องส่งจำนวนเต็มแทนระดับการซูมของแผนที่ดังที่แสดงด้านล่าง

var mapOptions = {
   center: [17.385044, 78.486671],
   zoom: 10
}

ขั้นตอนที่ 6: สร้างวัตถุแผนที่

ใช้ Mapคลาสของ leaflet API คุณสามารถสร้างแผนที่บนเพจได้ คุณสามารถสร้างวัตถุแผนที่โดยสร้างอินสแตนซ์ที่เรียกว่าMapของ Leaflet API ในขณะที่สร้างอินสแตนซ์คลาสนี้คุณต้องส่งผ่านพารามิเตอร์สองตัว -

  • ในฐานะพารามิเตอร์ของตัวเลือกนี้คุณต้องส่งผ่านตัวแปร String ที่แสดงถึงรหัส DOM หรืออินสแตนซ์ขององค์ประกอบ <div> ที่นี่องค์ประกอบ <div> คือคอนเทนเนอร์ HTML สำหรับเก็บแผนที่

  • อ็อบเจกต์ที่เป็นทางเลือกพร้อมตัวเลือกแผนที่

สร้างวัตถุแผนที่โดยส่งผ่าน id ขององค์ประกอบ <div> และวัตถุ mapOptions ที่สร้างขึ้นในขั้นตอนก่อนหน้า

var map = new L.map('map', mapOptions);

ขั้นตอนที่ 7: การสร้าง Layer Object

คุณสามารถโหลดและแสดงแผนที่ประเภทต่างๆ (เลเยอร์ไทล์) โดยการสร้างอินสแตนซ์ไฟล์ TileLayerชั้นเรียน ในขณะที่สร้างอินสแตนซ์คุณต้องส่งเทมเพลต URL ที่ขอเลเยอร์ไทล์ที่ต้องการ (แผนที่) จากผู้ให้บริการในรูปแบบของตัวแปร String

สร้างวัตถุชั้นกระเบื้องดังที่แสดงด้านล่าง

var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

ที่นี่เราได้ใช้ไฟล์ openstreetmap.

ขั้นตอนที่ 8: เพิ่มเลเยอร์ลงในแผนที่

สุดท้ายเพิ่มเลเยอร์ที่สร้างขึ้นในขั้นตอนก่อนหน้าลงในวัตถุแผนที่โดยใช้ addlayer() วิธีการดังแสดงด้านล่าง

map.addLayer(layer);

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงวิธีการโหลดไฟล์ open street map ของเมืองไฮเดอราบาดด้วยค่าซูม 10

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet sample</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>

   <body>
      <div id = "map" style = "width: 900px; height: 580px"></div>
      <script>
         // Creating map options
         var mapOptions = {
            center: [17.385044, 78.486671],
            zoom: 10
         }
         
         // Creating a map object
         var map = new L.map('map', mapOptions);
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         
         // Adding layer to the map
         map.addLayer(layer);
      </script>
   </body>
   
</html>

สร้างผลลัพธ์ต่อไปนี้ -

ผู้ให้บริการแผนที่แผ่นพับ

เหมือนกับ open street mapคุณสามารถโหลดเลเยอร์ของผู้ให้บริการต่างๆเช่น Open Topo, Thunder forest, Hydda, ESRI, Open weather, NASA GIBS เป็นต้นในการทำเช่นนั้นคุณจะต้องส่ง URL ตามลำดับในขณะที่สร้าง TileLayer วัตถุ

var layer = new L.TileLayer('URL of the required map');

ตารางต่อไปนี้แสดงรายการ URL และแผนที่ตัวอย่างตามลำดับของเลเยอร์ที่ Openstreetmap ให้ไว้

ประเภทแผนที่ URL และผลลัพธ์
Mapnik

http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png

ดำและขาว

http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png

DE

http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/ {y}.png

ฝรั่งเศส

http://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png

ร้อน

http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png

BZH

http://tile.openstreetmap.bzh/br/{z}/{x}/{y}.png