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

ในการทำเครื่องหมายตำแหน่งเดียวบนแผนที่แผ่นพับจะให้เครื่องหมาย เครื่องหมายเหล่านี้ใช้สัญลักษณ์มาตรฐานและสัญลักษณ์เหล่านี้สามารถปรับแต่งได้ ในบทนี้เราจะดูวิธีการเพิ่มเครื่องหมายและวิธีปรับแต่งทำให้เคลื่อนไหวและลบออก

การเพิ่มเครื่องหมายอย่างง่าย

หากต้องการเพิ่มเครื่องหมายลงในแผนที่โดยใช้ไลบรารี Leaflet JavaScript ให้ทำตามขั้นตอนด้านล่าง -

Step 1 - สร้างไฟล์ Mapวัตถุโดยส่งผ่านองค์ประกอบ< div > (สตริงหรือวัตถุ) และตัวเลือกแผนที่ (ไม่บังคับ)

Step 2 - สร้างไฟล์ Layer ออบเจ็กต์โดยส่ง URL ของไทล์ที่ต้องการ

Step 3 - เพิ่มวัตถุเลเยอร์ลงในแผนที่โดยใช้ไฟล์ addLayer() วิธีการของ Map ชั้นเรียน.

Step 4 - สร้างไฟล์ Marker เรียนโดยผ่านก latlng วัตถุแทนตำแหน่งที่จะทำเครื่องหมายดังที่แสดงด้านล่าง

// Creating a marker
var marker = new L.Marker([17.385044, 78.486671]);

Step 5 - เพิ่มวัตถุเครื่องหมายที่สร้างขึ้นในขั้นตอนก่อนหน้าลงในแผนที่โดยใช้ไฟล์ addTo() วิธีการของ Marker ชั้นเรียน.

// Adding marker to the map
marker.addTo(map);

ตัวอย่าง

รหัสต่อไปนี้กำหนดเครื่องหมายบนเมืองที่ชื่อไฮเดอราบัด (อินเดีย)

<!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);
         
         // Creating a marker
         var marker = L.marker([17.385044, 78.486671]);
         
         // Adding marker to the map
         marker.addTo(map);
      </script>
   </body>
   
</html>

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

การเชื่อมป๊อปอัปเข้ากับ Marker

ในการผูกป๊อปอัปง่ายๆที่แสดงข้อความกับเครื่องหมายให้ทำตามขั้นตอนด้านล่าง -

Step 1 - สร้างไฟล์ Mapวัตถุโดยส่งผ่านองค์ประกอบ< div > (สตริงหรือวัตถุ) และตัวเลือกแผนที่ (ไม่บังคับ)

Step 2 - สร้างไฟล์ Layer ออบเจ็กต์โดยส่ง URL ของไทล์ที่ต้องการ

Step 3 - เพิ่มวัตถุเลเยอร์ลงในแผนที่โดยใช้ไฟล์ addLayer() วิธีการของ Map ชั้นเรียน.

Step 4 - สร้างไฟล์ Marker เรียนโดยผ่านก latlng วัตถุแทนตำแหน่งที่จะทำเครื่องหมาย

Step 5 - แนบป๊อปอัปเข้ากับเครื่องหมายโดยใช้ bindPopup() ดังแสดงด้านล่าง

// Adding pop-up to the marker
marker.bindPopup('Hi Welcome to Tutorialspoint').openPopup();

Step 6 - สุดท้ายเพิ่มไฟล์ Marker วัตถุที่สร้างขึ้นในขั้นตอนก่อนหน้าไปยังแผนที่โดยใช้ addTo() วิธีการของ Marker ชั้นเรียน.

ตัวอย่าง

รหัสต่อไปนี้ตั้งค่าเครื่องหมายบนเมืองไฮเดอราบาด (อินเดีย) และเพิ่มป๊อปอัปลงไป

<!DOCTYPE html>
<html>
   <head>
      <title>Binding pop-Ups to marker</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: 15
         }
         var map = new L.map('map', mapOptions); // Creating a map object
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer);         // Adding layer to the map
         var marker = L.marker([17.438139, 78.395830]);    // Creating a Marker
         
         // Adding popup to the marker
         marker.bindPopup('This is Tutorialspoint').openPopup();
         marker.addTo(map); // Adding marker to the map
      </script>
   </body>
   
</html>

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

ตัวเลือกเครื่องหมาย

ในขณะที่สร้างเครื่องหมายคุณยังสามารถส่งไฟล์ marker optionsตัวแปรนอกเหนือจากวัตถุ latlang เมื่อใช้ตัวแปรนี้คุณสามารถตั้งค่าให้กับตัวเลือกต่างๆของเครื่องหมายเช่น icon, dragable, keyboard, title, alt, zInsexOffset, opacity, riseOnHover, riseOffset, pane, dragable เป็นต้น

ในการสร้างแผนที่โดยใช้ตัวเลือกแผนที่คุณต้องทำตามขั้นตอนด้านล่าง -

Step 1 - สร้างไฟล์ Mapวัตถุโดยส่งผ่านองค์ประกอบ< div > (สตริงหรือวัตถุ) และตัวเลือกแผนที่ (ไม่บังคับ)

Step 2 - สร้างไฟล์ Layer ออบเจ็กต์โดยส่ง URL ของไทล์ที่ต้องการ

Step 3 - เพิ่มวัตถุเลเยอร์ลงในแผนที่โดยใช้ไฟล์ addLayer() วิธีการของ Map ชั้นเรียน.

Step 4 - สร้างตัวแปรสำหรับ markerOptions และระบุค่าให้กับตัวเลือกที่ต้องการ

สร้างไฟล์ markerOptions วัตถุ (ถูกสร้างขึ้นเช่นเดียวกับตัวอักษร) และตั้งค่าสำหรับตัวเลือก iconUrl และ iconSize.

// Options for the marker
var markerOptions = {
   title: "MyLocation",
   clickable: true,
   draggable: true
}

Step 5 - สร้างไฟล์ Marker เรียนโดยผ่านก latlng วัตถุแทนตำแหน่งที่จะทำเครื่องหมายและอ็อบเจ็กต์อ็อพชันที่สร้างในขั้นตอนก่อนหน้า

// Creating a marker
var marker = L.marker([17.385044, 78.486671], markerOptions);

Step 6 - สุดท้ายเพิ่มไฟล์ Marker วัตถุที่สร้างขึ้นในขั้นตอนก่อนหน้าไปยังแผนที่โดยใช้ addTo() วิธีการของ Marker ชั้นเรียน.

ตัวอย่าง

รหัสต่อไปนี้กำหนดเครื่องหมายบนเมืองไฮเดอราบาด (อินเดีย) เครื่องหมายนี้สามารถคลิกได้และลากได้ด้วยชื่อเรื่องMyLocation.

<html>
   <head>
      <title>Marker Options Example</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);
         
         // Creating a Marker
         var markerOptions = {
            title: "MyLocation",
            clickable: true,
            draggable: true
         }
         // Creating a marker
         var marker = L.marker([17.385044, 78.486671], markerOptions);
         
         // Adding marker to the map
         marker.addTo(map);
      </script>
   </body>
   
</html>

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

ไอคอนกำหนดเองของเครื่องหมาย

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

Step 1 - สร้างไฟล์ Mapวัตถุโดยส่งผ่านองค์ประกอบ< div > (สตริงหรือวัตถุ) และตัวเลือกแผนที่ (ไม่บังคับ)

Step 2 - สร้างไฟล์ Layer ออบเจ็กต์โดยส่ง URL ของไทล์ที่ต้องการ

Step 3 - เพิ่มวัตถุเลเยอร์ลงในแผนที่โดยใช้ไฟล์ addLayer() วิธีการของ Map ชั้นเรียน.

Step 4 - สร้างตัวแปรสำหรับ markerOptions และระบุค่าให้กับตัวเลือกที่ต้องการ -

  • iconUrl - ตามค่าของตัวเลือกนี้คุณจะต้องส่งไฟล์ String วัตถุที่ระบุเส้นทางของภาพที่คุณต้องการใช้เป็นไอคอน

  • iconSize - เมื่อใช้ตัวเลือกนี้คุณสามารถระบุขนาดของไอคอนได้

Note - นอกจากนี้คุณยังสามารถตั้งค่าให้กับตัวเลือกอื่น ๆ เช่น iconSize, shadowSize, iconAnchor, shadowAnchor และ popupAnchor

สร้างไอคอนที่กำหนดเองโดยใช้ L.icon() โดยส่งผ่านตัวแปรตัวเลือกด้านบนตามที่แสดงด้านล่าง

// Icon options
var iconOptions = {
   iconUrl: 'logo.png',
   iconSize: [50, 50]
}

// Creating a custom icon
var customIcon = L.icon(iconOptions);

Step 5- สร้างตัวแปรสำหรับ markerOptions และระบุค่าให้กับตัวเลือกที่ต้องการ นอกจากนี้ให้ระบุไอคอนโดยส่งผ่านตัวแปรไอคอนที่สร้างขึ้นในขั้นตอนก่อนหน้าเป็นค่า

// Options for the marker
var markerOptions = {
   title: "MyLocation",
   clickable: true,
   draggable: true,
   icon: customIcon
}

Step 6 - สร้างไฟล์ Marker เรียนโดยผ่านก latlng วัตถุที่แสดงตำแหน่งที่จะทำเครื่องหมายและอ็อบเจ็กต์อ็อพชันที่สร้างขึ้นในขั้นตอนก่อนหน้า

// Creating a marker
var marker = L.marker([17.438139, 78.395830], markerOptions);

Step 7 - สุดท้ายเพิ่มไฟล์ Marker วัตถุที่สร้างขึ้นในขั้นตอนก่อนหน้าไปยังแผนที่โดยใช้ addTo() วิธีการของ Marker ชั้นเรียน.

ตัวอย่าง

รหัสต่อไปนี้กำหนดเครื่องหมายบนตำแหน่งของ Tutorialspoint ที่นี่เราใช้โลโก้ของ Tutorialspoint แทนเครื่องหมายเริ่มต้น

<!DOCTYPE html>
<html>
   <head>
      <title>Marker Custom Icons Example</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.438139, 78.395830],
            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);
         
         // Icon options
         var iconOptions = {
            iconUrl: 'logo.png',
            iconSize: [50, 50]
         }
         // Creating a custom icon
         var customIcon = L.icon(iconOptions);
         
         // Creating Marker Options
         var markerOptions = {
            title: "MyLocation",
            clickable: true,
            draggable: true,
            icon: customIcon
         }
         // Creating a Marker
         var marker = L.marker([17.438139, 78.395830], markerOptions);
         
         // Adding popup to the marker
         marker.bindPopup('Hi welcome to Tutorialspoint').openPopup();
         
         // Adding marker to the map
         marker.addTo(map);
      </script>
   </body>
   
</html>

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

ในบทที่แล้วเราได้เรียนรู้วิธีใช้เครื่องหมายใน Leaflet นอกจากเครื่องหมายแล้วเรายังสามารถเพิ่มรูปทรงต่างๆเช่นวงกลมรูปหลายเหลี่ยมสี่เหลี่ยมโพลีไลน์เป็นต้นในบทนี้เราจะพูดถึงวิธีการใช้รูปทรงที่ Google Maps มีให้

โพลีไลน์

ในการวาดภาพซ้อนทับเส้นหลายเส้นบนแผนที่โดยใช้ไลบรารี Leaflet JavaScript ให้ทำตามขั้นตอนด้านล่าง -

Step 1 - สร้างไฟล์ Mapวัตถุโดยส่งผ่านองค์ประกอบ< div > (สตริงหรือวัตถุ) และตัวเลือกแผนที่ (ไม่บังคับ)

Step 2 - สร้างไฟล์ Layer ออบเจ็กต์โดยส่ง URL ของไทล์ที่ต้องการ

Step 3 - เพิ่มวัตถุเลเยอร์ลงในแผนที่โดยใช้ไฟล์ addLayer() วิธีการของ Map ชั้นเรียน.

Step 4 - สร้างไฟล์ latlangs ตัวแปรเพื่อยึดจุดที่จะวาดเส้นหลายเส้นดังที่แสดงด้านล่าง

// Creating latlng object
var latlngs = [
   [17.385044, 78.486671],
   [16.506174, 80.648015],
   [17.000538, 81.804034],
   [17.686816, 83.218482]
];

Step 5 - สร้างโพลีไลน์โดยใช้ไฟล์ L.polyline(). ในการวาดเส้นหลายเส้นให้ส่งตำแหน่งที่ตั้งเป็นตัวแปรและตัวเลือกเพื่อระบุสีของเส้น

// Creating a poly line
var polyline = L.polyline(latlngs, {color: 'red'});

Step 6 - เพิ่มเส้นตรงลงในแผนที่โดยใช้ไฟล์ addTo() วิธีการของ Polyline ชั้นเรียน.

// Adding to poly line to map
polyline.addTo(map);

ตัวอย่าง

ต่อไปนี้เป็นรหัสที่วาดเส้นโพลีไลน์ซึ่งครอบคลุมเมืองไฮเดอราบัดวิชัยวาทะราชมะเหิงดราวารามและวิสาขปัตนัม (อินเดีย)

DOCTYPE html>
<html>
   <head>
      <title>Leaflet Poly lines</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: [16.506174, 80.648015],
            zoom: 7
         }
         // 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);
         
         // Creating latlng object
         var latlngs = [
            [17.385044, 78.486671],
            [16.506174, 80.648015],
            [17.000538, 81.804034],
            [17.686816, 83.218482]
         ];
         // Creating a poly line
         var polyline = L.polyline(latlngs, {color: 'red'});
         
         // Adding to poly line to map
         polyline.addTo(map);
      </script>
   </body>
   
</html>

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

รูปหลายเหลี่ยม

ในการวาดรูปหลายเหลี่ยมซ้อนทับบนแผนที่โดยใช้ไลบรารี Leaflet JavaScript ให้ทำตามขั้นตอนด้านล่าง -

Step 1 - สร้างไฟล์ Mapวัตถุโดยส่งผ่านองค์ประกอบ< div > (สตริงหรือวัตถุ) และตัวเลือกแผนที่ (ไม่บังคับ)

Step 2 - สร้างไฟล์ Layer ออบเจ็กต์โดยส่ง URL ของไทล์ที่ต้องการ

Step 3 - เพิ่มวัตถุเลเยอร์ลงในแผนที่โดยใช้ไฟล์ addLayer() วิธีการของ Map ชั้นเรียน.

Step 4 - สร้างไฟล์ latlangs ตัวแปรเพื่อเก็บจุดที่จะวาดรูปหลายเหลี่ยม

// Creating latlng object
var latlngs = [
   [17.385044, 78.486671],
   [16.506174, 80.648015],
   [17.686816, 83.218482]
];

Step 5 - สร้างรูปหลายเหลี่ยมโดยใช้ไฟล์ L.polygon(). ส่งตำแหน่ง / จุดเป็นตัวแปรเพื่อวาดรูปหลายเหลี่ยมและตัวเลือกเพื่อระบุสีของรูปหลายเหลี่ยม

// Creating a polygon
var polygon = L.polygon(latlngs, {color: 'red'});

Step 6 - เพิ่มรูปหลายเหลี่ยมลงในแผนที่โดยใช้ไฟล์ addTo() วิธีการของ Polygon ชั้นเรียน.

// Adding to polygon to map
polygon.addTo(map);

ตัวอย่าง

ต่อไปนี้เป็นรหัสสำหรับวาดรูปหลายเหลี่ยมที่ครอบคลุมเมืองไฮเดอราบัดวิชัยวาทะและวิสาขปัตนัม (อินเดีย)

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Polygons</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: [16.506174, 80.648015],
            zoom: 7
         }
         // 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);
         
         // Creating latlng object
         var latlngs = [
            [17.385044, 78.486671],
            [16.506174, 80.648015],
            [17.686816, 83.218482]
         ];
         // Creating a polygon
         var polygon = L.polygon(latlngs, {color: 'red'});
         
         // Adding to polygon to map
         polygon.addTo(map);
      </script>
   </body>
   
</html>

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

สี่เหลี่ยมผืนผ้า

ในการวาดสี่เหลี่ยมผืนผ้าซ้อนทับบนแผนที่โดยใช้ไลบรารี Leaflet JavaScript ให้ทำตามขั้นตอนด้านล่าง

Step 1 - สร้างไฟล์ Mapวัตถุโดยส่งผ่านองค์ประกอบ< div > (สตริงหรือวัตถุ) และตัวเลือกแผนที่ (ไม่บังคับ)

Step 2 - สร้างไฟล์ Layer ออบเจ็กต์โดยส่ง URL ของไทล์ที่ต้องการ

Step 3 - เพิ่มวัตถุเลเยอร์ลงในแผนที่โดยใช้ไฟล์ addLayer() วิธีการของ Map ชั้นเรียน.

Step 4 - สร้างตัวแปร latlangs เพื่อยึดจุดที่จะวาดรูปสี่เหลี่ยมผืนผ้าบนแผนที่

// Creating latlng object
var latlngs = [
   [17.342761, 78.552432],
   [16.396553, 80.727725]
];

Step 5 - สร้างสี่เหลี่ยมผืนผ้าโดยใช้ไฟล์ L.rectangle()ฟังก์ชัน ส่งตำแหน่ง / จุดเป็นตัวแปรเพื่อวาดรูปสี่เหลี่ยมผืนผ้าและrectangleOptions เพื่อระบุสีและน้ำหนักของสี่เหลี่ยมผืนผ้า

// Creating rectOptions
var rectOptions = {color: 'Red', weight: 1}

// Creating a rectangle
var rectangle = L.rectangle(latlngs, rectOptions);

Step 6 - เพิ่มสี่เหลี่ยมผืนผ้าลงในแผนที่โดยใช้ไฟล์ addTo() วิธีการของ Polygon ชั้นเรียน.

// Adding to rectangle to map
rectangle.addTo(map);

ตัวอย่าง

ต่อไปนี้เป็นรหัสสำหรับวาดรูปสี่เหลี่ยมผืนผ้าบนแผนที่โดยใช้ไลบรารี Leaflet JavaScript

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Rectangle</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: [16.506174, 80.648015],
            zoom: 7
         }
         var map = new L.map('map', mapOptions); // Creating a map object
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer); // Adding layer to the map
         
         // Creating latlng object
         var latlngs = [
            [17.342761, 78.552432],
            [16.396553, 80.727725]
         ];
         var rectOptions = {color: 'Red', weight: 1}   // Creating rectOptions
        
         // Creating a rectangle
         var rectangle = L.rectangle(latlngs, rectOptions);
         rectangle.addTo(map);   // Adding to rectangle to map
      </script>
   </body>
   
</html>

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

วงกลม

ในการวาดวงกลมซ้อนทับบนแผนที่โดยใช้ไลบรารี Leaflet JavaScript ให้ทำตามขั้นตอนด้านล่าง

Step 1 - สร้างไฟล์ Mapวัตถุโดยส่งผ่านองค์ประกอบ< div > (สตริงหรือวัตถุ) และตัวเลือกแผนที่ (ไม่บังคับ)

Step 2 - สร้างไฟล์ Layer ออบเจ็กต์โดยส่ง URL ของไทล์ที่ต้องการ

Step 3 - เพิ่มวัตถุเลเยอร์ลงในแผนที่โดยใช้ไฟล์ addLayer() วิธีการของ Map ชั้นเรียน.

Step 4 - สร้างตัวแปร latlangs เพื่อยึดตรงกลางของวงกลมดังที่แสดงด้านล่าง

// Center of the circle
var circleCenter = [17.385044, 78.486671];

Step 5 - สร้างตัวแปร circleOptions เพื่อระบุค่าให้กับสีตัวเลือก FillColor และ FillOpacity ดังที่แสดงด้านล่าง

// Circle options
var circleOptions = {
   color: 'red',
   fillColor: '#f03',
   fillOpacity: 0
}

Step 6 - สร้างวงกลมโดยใช้ L.circle(). ผ่านศูนย์กลางของวงกลมรัศมีและตัวเลือกวงกลมไปยังฟังก์ชันนี้

// Creating a circle
var circle = L.circle(circleCenter, 50000, circleOptions);

Step 7 - เพิ่มวงกลมที่สร้างไว้ด้านบนลงในแผนที่โดยใช้ addTo() วิธีการของ Polyline ชั้นเรียน.

// Adding circle to the map
circle.addTo(map);

ตัวอย่าง

ต่อไปนี้เป็นรหัสสำหรับวาดวงกลมโดยมีพิกัดของเมืองไฮเดอราบาดเป็นรัศมี

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Circle</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: 7
         }
         var map = new L.map('map', mapOptions); // Creating a map object
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer);        // Adding layer to the map
         var circleCenter = [17.385044, 78.486671];     // Center of the circle
         
         // Circle options
         var circleOptions = {
            color: 'red',
            fillColor: '#f03',
            fillOpacity: 0
         }
         // Creating a circle
         var circle = L.circle(circleCenter, 50000, circleOptions);
         circle.addTo(map);     // Adding circle to the map
      </script>
   </body>
   
</html>>

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

ในบทที่แล้วเราได้เรียนรู้วิธีการเพิ่มรูปทรงต่างๆเช่นวงกลมรูปหลายเหลี่ยมสี่เหลี่ยมโพลีไลน์เป็นต้นในบทนี้ให้เราพูดถึงวิธีการเพิ่มรูปหลายเหลี่ยมหลายทิศทางและโพลีไลน์

มัลติ - โพลีไลน์

ในการวาดภาพซ้อนทับหลายเส้นบนแผนที่โดยใช้ไลบรารี Leaflet JavaScript ให้ทำตามขั้นตอนด้านล่าง -

Step 1 - สร้างไฟล์ Mapวัตถุโดยส่งผ่านองค์ประกอบ< div > (สตริงหรือวัตถุ) และตัวเลือกแผนที่ (ไม่บังคับ)

Step 2 - สร้างไฟล์ Layer ออบเจ็กต์โดยส่ง URL ของไทล์ที่ต้องการ

Step 3 - เพิ่มวัตถุเลเยอร์ลงในแผนที่โดยใช้ไฟล์ addLayer() วิธีการของ Map ชั้นเรียน.

Step 4 - สร้างตัวแปร latlangs เพื่อยึดจุดที่จะวาด multi-polyline

// Creating latlng object
var latlang = [
   [[17.385044, 78.486671], [16.506174, 80.648015], [17.686816, 83.218482]],
   [[13.082680, 80.270718], [12.971599, 77.594563],[15.828126, 78.037279]]
];

Step 5 - สร้างเส้นหลายเส้นโดยใช้ไฟล์ L.multiPolyline()ฟังก์ชัน ส่งผ่านสถานที่เป็นตัวแปรเพื่อวาดเส้นหลายเส้นและตัวเลือกเพื่อระบุสีและน้ำหนักของเส้น

// Creating multi polyline options
var multiPolyLineOptions = {color:'red'};

// Creating multi polylines
var multipolyline = L.multiPolyline(latlang , multiPolyLineOptions);

Step 6 - เพิ่ม multi-polyline ลงในแผนที่โดยใช้ไฟล์ addTo() วิธีการของ Multipolyline ชั้นเรียน.

// Adding multi polyline to map
multipolyline.addTo(map);

ตัวอย่าง

ต่อไปนี้เป็นรหัสสำหรับวาดเส้นหลายเส้นที่ครอบคลุมเมืองไฮเดอราบัดวิชัยวาทะและวิสาขปัตนัม และ Kurnool, Bengaluru และ Chennai

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Multi Polylines</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: [16.506174, 80.648015],
            zoom: 7
         }
         // 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);
         
         // Creating latlng object
         var latlang = [
            [[17.385044, 78.486671], [16.506174, 80.648015], [17.686816, 83.218482]],
            [[13.082680, 80.270718], [12.971599, 77.594563],[15.828126, 78.037279]]
         ];
         
         // Creating poly line options
         var multiPolyLineOptions = {color:'red'};
         
         // Creating multi poly-lines
         var multipolyline = L.multiPolyline(latlang , multiPolyLineOptions);
         
         // Adding multi poly-line to map
         multipolyline.addTo(map);
      </script>
   </body>
   
</html>

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

หลายเหลี่ยม

หากต้องการวาดภาพซ้อนทับหลายเหลี่ยมบนแผนที่โดยใช้ไลบรารี Leaflet JavaScript ให้ทำตามขั้นตอนด้านล่าง -

Step 1 - สร้างไฟล์ Mapวัตถุโดยส่งผ่านองค์ประกอบ< div > (สตริงหรือวัตถุ) และตัวเลือกแผนที่ (ไม่บังคับ)

Step 2 - สร้างไฟล์ Layer ออบเจ็กต์โดยส่ง URL ของไทล์ที่ต้องการ

Step 3 - เพิ่มวัตถุเลเยอร์ลงในแผนที่โดยใช้ไฟล์ addLayer() วิธีการของ Map ชั้นเรียน.

Step 4 - สร้างตัวแปร latlangs เพื่อเก็บจุดที่จะวาดรูปหลายเหลี่ยม

// Creating latlng object
var latlang = [
   [[17.385044, 78.486671], [16.506174, 80.648015], [17.686816, 83.218482]],
   [[13.082680, 80.270718], [12.971599, 77.594563],[15.828126, 78.037279]]
];

Step 5 - สร้างรูปหลายเหลี่ยมโดยใช้ไฟล์ L.multiPolygon()ฟังก์ชัน ส่งตำแหน่งที่ตั้งเป็นตัวแปรเพื่อวาดรูปหลายเหลี่ยมและตัวเลือกเพื่อระบุสีและน้ำหนักของเส้น

// Creating multi polygon options
var multiPolygonOptions = {color:'red'};

// Creating multi polygon
var multipolygon = L.multiPolygon(latlang , multiPolygonOptions);

Step 6 - เพิ่มรูปหลายเหลี่ยมลงในแผนที่โดยใช้ไฟล์ addTo() วิธีการของ MultiPolygon ชั้นเรียน.

// Adding multi polygon to map
multipolygon.addTo(map);

ตัวอย่าง

ต่อไปนี้เป็นรหัสในการวาดรูปหลายเหลี่ยมที่สัมผัสเมืองไฮเดอราบัดวิชัยวาทะและวิสาขปัตนัม และ Kurnool, Bengaluru และ Chennai

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Multi Polygons</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: [16.506174, 80.648015],
            zoom: 7
         }
         // 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);
         
         // Creating latlng object
         var latlang = [
            [[17.385044, 78.486671], [16.506174, 80.648015], [17.686816, 83.218482]],
            [[13.082680, 80.270718], [12.971599, 77.594563],[15.828126, 78.037279]]
         ];
         // Creating multi polygon options
         var multiPolygonOptions = {color:'red', weight:8};
         
         // Creating multi polygons
         var multipolygon = L.multiPolygon(latlang , multiPolygonOptions);
         
         // Adding multi polygon to map
         multipolygon.addTo(map);
      </script>
   </body>
   
</html>

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

กลุ่มเลเยอร์

เมื่อใช้กลุ่มเลเยอร์คุณสามารถเพิ่มหลายเลเยอร์ลงในแผนที่และจัดการเป็นเลเยอร์เดียวได้

ทำตามขั้นตอนด้านล่างเพื่อสร้างไฟล์ LayerGroup และเพิ่มลงในแผนที่

Step 1 - สร้างไฟล์ Mapวัตถุโดยส่งผ่านองค์ประกอบ< div > (สตริงหรือวัตถุ) และตัวเลือกแผนที่ (ไม่บังคับ)

Step 2 - สร้างไฟล์ Layer ออบเจ็กต์โดยส่ง URL ของไทล์ที่ต้องการ

Step 3 - เพิ่มวัตถุเลเยอร์ลงในแผนที่โดยใช้ไฟล์ addLayer() วิธีการของ Map ชั้นเรียน.

Step 4 - สร้างองค์ประกอบ (เลเยอร์) เช่นเครื่องหมายรูปหลายเหลี่ยมวงกลม ฯลฯ ที่จำเป็นโดยการสร้างอินสแตนซ์ของคลาสตามที่แสดงด้านล่าง

// Creating markers
var hydMarker = new L.Marker([17.385044, 78.486671]);
var vskpMarker = new L.Marker([17.686816, 83.218482]);
var vjwdMarker = new L.Marker([16.506174, 80.648015]);

// Creating latlng object
var latlngs = [
   [17.385044, 78.486671],
   [16.506174, 80.648015],
   [17.686816, 83.218482]
];
// Creating a polygon
var polygon = L.polygon(latlngs, {color: 'red'});

Step 5 - สร้าง Layer Group โดยใช้ l.layerGroup(). ผ่านเครื่องหมายที่สร้างไว้ด้านบนรูปหลายเหลี่ยม ฯลฯ ดังที่แสดงด้านล่าง

// Creating layer group
var layerGroup = L.layerGroup([hydMarker, vskpMarker, vjwdMarker, polygon]);

Step 6 - เพิ่มกลุ่มเลเยอร์ที่สร้างขึ้นในขั้นตอนก่อนหน้าโดยใช้ไฟล์ addTo() วิธี.

// Adding layer group to map
layerGroup.addTo(map);

ตัวอย่าง

รหัสต่อไปนี้จะสร้างกลุ่มเลเยอร์ที่มีเครื่องหมาย 3 ตัวและรูปหลายเหลี่ยมและเพิ่มลงในแผนที่

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Layer Group</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: 7
         }
         var map = new L.map('map', mapOptions); // Creating a map object
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer);      // Adding layer to the map
         
         // Creating markers
         var hydMarker = new L.Marker([17.385044, 78.486671]);
         var vskpMarker = new L.Marker([17.686816, 83.218482]);
         var vjwdMarker = new L.Marker([16.506174, 80.648015]);
         
         // Creating latlng object
         var latlngs = [
            [17.385044, 78.486671],
            [16.506174, 80.648015],
            [17.686816, 83.218482]
         ];
         // Creating a polygon
         var polygon = L.polygon(latlngs, {color: 'red'});
         
         // Creating layer group
         var layerGroup = L.layerGroup([hydMarker, vskpMarker, vjwdMarker, polygon]);
         layerGroup.addTo(map);    // Adding layer group to map
      </script>
   </body>
   
</html>

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

การเพิ่มเลเยอร์ (องค์ประกอบ)

คุณสามารถเพิ่มเลเยอร์ลงในกลุ่มฟีเจอร์โดยใช้ไฟล์ addLayer()วิธี. ในวิธีนี้คุณต้องส่งผ่านองค์ประกอบที่จะเพิ่มเข้าไป

คุณสามารถเพิ่มวงกลมโดยมีเมืองไฮเดอราบาดอยู่ตรงกลาง

// Creating a circle
var circle = L.circle([16.506174, 80.648015], 50000, {color: 'red', fillColor:
   '#f03', fillOpacity: 0} );

// Adding circle to the layer group
layerGroup.addLayer(circle);

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

การลบเลเยอร์ (องค์ประกอบ)

คุณสามารถลบเลเยอร์ออกจากกลุ่มคุณลักษณะโดยใช้ไฟล์ removeLayer()วิธี. ในวิธีนี้คุณต้องส่งผ่านองค์ประกอบที่จะลบออก

คุณสามารถลบเครื่องหมายบนเมืองชื่อวิชัยวาทะดังที่แสดงด้านล่าง

// Removing layer from map
layerGroup.removeLayer(vjwdMarker);

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

กลุ่มคุณลักษณะ

มันคล้ายกับ LayerGroupแต่อนุญาตให้ใช้เมาส์และเชื่อมโยงป๊อปอัปเข้ากับมัน คุณยังสามารถตั้งค่าสไตล์ให้กับทั้งกลุ่มโดยใช้setStyle() วิธี.

ทำตามขั้นตอนด้านล่างเพื่อสร้างกลุ่มคุณลักษณะและเพิ่มลงในแผนที่

Step 1 - สร้างไฟล์ Mapวัตถุโดยส่งผ่านองค์ประกอบ< div > (สตริงหรือวัตถุ) และตัวเลือกแผนที่ (ไม่บังคับ)

Step 2 - สร้างไฟล์ Layer ออบเจ็กต์โดยส่ง URL ของไทล์ที่ต้องการ

Step 3 - เพิ่มวัตถุเลเยอร์ลงในแผนที่โดยใช้ไฟล์ addLayer() วิธีการของ Map ชั้นเรียน.

Step 4 - สร้างองค์ประกอบ (เลเยอร์) เช่นเครื่องหมายรูปหลายเหลี่ยมและวงกลมที่ต้องการโดยการสร้างอินสแตนซ์ของคลาสตามที่แสดงด้านล่าง

// Creating markers
var hydMarker = new L.Marker([17.385044, 78.486671]);
var vskpMarker = new L.Marker([17.686816, 83.218482]);
var vjwdMarker = new L.Marker([16.506174, 80.648015]);

// Creating latlng object
var latlngs = [
   [17.385044, 78.486671],
   [16.506174, 80.648015],
   [17.686816, 83.218482]
];
// Creating a polygon
var polygon = L.polygon(latlngs, {color: 'red'});>

Step 5 - สร้างกลุ่มคุณลักษณะโดยใช้ l.featureGroup(). ผ่านเครื่องหมายที่สร้างไว้ด้านบนรูปหลายเหลี่ยม ฯลฯ ดังที่แสดงด้านล่าง

// Creating feature group
var featureGroup = L.featureGroup([hydMarker, vskpMarker, vjwdMarker, polygon]);

Step 6- หากคุณตั้งค่าสไตล์เป็นกลุ่มฟีเจอร์สไตล์นั้นจะถูกนำไปใช้กับแต่ละองค์ประกอบ (เลเยอร์) ในกลุ่ม คุณสามารถทำได้โดยใช้ไฟล์setStyle() วิธีการและวิธีนี้คุณต้องส่งผ่านค่าไปยังตัวเลือกเช่นสีและความทึบเป็นต้น

ตั้งค่าสไตล์ให้กับกลุ่มฟีเจอร์ที่สร้างในขั้นตอนข้างต้น

// Setting style to the feature group
featureGroup.setStyle({color:'blue',opacity:.5});

Step 7 - ผูกป๊อปอัปโดยใช้ไฟล์ bindPopup() วิธีการดังที่แสดงด้านล่าง

// Binding popup to the feature group
featureGroup.bindPopup("Feature Group");

Step 8 - เพิ่มกลุ่มคุณลักษณะที่สร้างขึ้นในขั้นตอนก่อนหน้าโดยใช้ไฟล์ addTo() วิธี.

// Adding layer group to map
featureGroup.addTo(map);

ตัวอย่าง

รหัสต่อไปนี้จะสร้างกลุ่มคุณลักษณะที่มีเครื่องหมาย 3 ตัวและรูปหลายเหลี่ยมและเพิ่มลงในแผนที่

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Feature Group</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: 7
         }
         var map = new L.map('map', mapOptions); // Creating a map object
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer);      // Adding layer to the map
         
         // Creating markers
         var hydMarker = new L.Marker([17.385044, 78.486671]);
         var vskpMarker = new L.Marker([17.686816, 83.218482]);
         var vjwdMarker = new L.Marker([16.506174, 80.648015]);
         
         // Creating latlng object
         var latlngs = [
            [17.385044, 78.486671],
            [16.506174, 80.648015],
            [17.686816, 83.218482]
         ];
         var polygon = L.polygon(latlngs, {color: 'red'}); // Creating a polygon
         
         // Creating feature group
         var featureGroup = L.featureGroup([hydMarker, vskpMarker, vjwdMarker, polygon]);
         featureGroup.setStyle({color:'blue',opacity:.5});
         featureGroup.bindPopup("Feature Group");
         featureGroup.addTo(map);      // Adding layer group to map
      </script>
   </body>
   
</html>

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

โปรแกรม Leaflet JavaScript สามารถตอบสนองต่อเหตุการณ์ต่างๆที่ผู้ใช้สร้างขึ้น ในบทนี้เราจะให้ตัวอย่างบางส่วนที่สาธิตวิธีดำเนินการจัดการเหตุการณ์ขณะทำงานกับ Leaflet

การจัดการเหตุการณ์

ทำตามขั้นตอนด้านล่างเพื่อเพิ่มกิจกรรมลงในแผนที่

Step 1 - สร้างไฟล์ Mapวัตถุโดยส่งผ่านองค์ประกอบ< div > (สตริงหรือวัตถุ) และตัวเลือกแผนที่ (ไม่บังคับ)

Step 2 - สร้างไฟล์ Layer ออบเจ็กต์โดยส่ง URL ของไทล์ที่ต้องการ

Step 3 - เพิ่มวัตถุเลเยอร์ลงในแผนที่โดยใช้ไฟล์ addLayer() วิธีการของ Map ชั้นเรียน.

Step 4 - เพิ่มตัวจัดการลงในแผนที่ดังที่แสดงด้านล่าง

map.on("click", function(e){
   new L.Marker([e.latlng.lat, e.latlng.lng]).addTo(map);
})

ตัวอย่าง

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

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Polygons</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: [16.506174, 80.648015],
            zoom: 7
         }
         var map = new L.map('map', mapOptions);    // Creating a map object
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer); // Adding layer to the map
         
         map.on("click", function(e){
            new L.Marker([e.latlng.lat, e.latlng.lng]).addTo(map);
         })
      </script>
   </body>
   
</html>

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

แทนที่จะใช้การวางซ้อนบนแผนที่คุณยังสามารถใช้ภาพซ้อนทับวิดีโอในแอปพลิเคชัน Leaflet ในบทนี้เราจะดูวิธีใช้การวางซ้อนดังกล่าว

ภาพซ้อนทับ

ทำตามขั้นตอนด้านล่างเพื่อใช้ภาพซ้อนทับ

Step 1 - สร้างไฟล์ Mapวัตถุโดยส่งผ่านองค์ประกอบ< div > (สตริงหรือวัตถุ) และตัวเลือกแผนที่ (ไม่บังคับ)

Step 2 - สร้างไฟล์ Layer ออบเจ็กต์โดยส่ง URL ของไทล์ที่ต้องการ

Step 3 - เพิ่มวัตถุเลเยอร์ลงในแผนที่โดยใช้ไฟล์ addLayer() วิธีการของ Map ชั้นเรียน.

Step 4 - สร้างภาพซ้อนทับโดยใช้ L.imageOverlay(). ส่ง URL ของรูปภาพและวัตถุที่แสดงขอบเขตของภาพดังที่แสดงด้านล่าง

// Creating Image overlay
var imageUrl = 'tpPoster.jpg';
var imageBounds = [[17.342761, 78.552432], [16.396553, 80.727725]];
var overlay = L.imageOverlay(imageUrl, imageBounds);

Step 5 - เพิ่มภาพซ้อนทับลงในแผนที่โดยใช้ addTo() วิธีการของ imageOverlay ชั้นเรียนดังที่แสดงด้านล่าง

// Adding overlay to the map
overlay.addTo(map);

ตัวอย่าง

รหัสต่อไปนี้แสดงให้เห็นถึงการใช้ภาพซ้อนทับ

<!DOCTYPE html>
<html>
   <head>
      <title>Image Overlay Example</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.342761, 78.552432],
            zoom: 8
         }
         var map = new L.map('map', mapOptions); // Creating a map object
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer);  // Adding layer to the map
         
         // Creating Image overlay
         var imageUrl = 'tpPoster.jpg';
         var imageBounds = [[17.342761, 78.552432], [16.396553, 80.727725]];
         var overlay = L.imageOverlay(imageUrl, imageBounds);
         overlay.addTo(map);
      </script>
   </body>
   
</html>

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

Leaflet ให้การควบคุมต่างๆเช่นการซูมการระบุแหล่งที่มาการปรับขนาด ฯลฯ โดยที่ -

  • Zoom- โดยค่าเริ่มต้นการควบคุมนี้จะอยู่ที่มุมบนซ้ายของแผนที่ มันมีสองปุ่ม"+" และ "–"ซึ่งคุณสามารถซูมเข้าหรือซูมออกแผนที่ได้ คุณสามารถลบการควบคุมการซูมเริ่มต้นได้โดยการตั้งค่าzoomControl ตัวเลือกของตัวเลือกแผนที่เพื่อ false.

  • Attribution- โดยค่าเริ่มต้นการควบคุมนี้จะอยู่ที่มุมขวาล่างของแผนที่ จะแสดงข้อมูลการระบุแหล่งที่มาในกล่องข้อความขนาดเล็ก โดยค่าเริ่มต้นจะแสดงข้อความ คุณสามารถลบการควบคุมการระบุแหล่งที่มาเริ่มต้นได้โดยการตั้งค่าattributionControl ตัวเลือกของตัวเลือกแผนที่เพื่อ false.

  • Scale- โดยค่าเริ่มต้นการควบคุมนี้จะอยู่ที่มุมล่างซ้ายของแผนที่ จะแสดงศูนย์กลางปัจจุบันของหน้าจอ

ในบทนี้เราจะอธิบายวิธีสร้างและเพิ่มการควบคุมทั้งสามนี้ลงในแผนที่ของคุณโดยใช้ไลบรารี Leaflet JavaScript

ซูม

หากต้องการเพิ่มการควบคุมการซูมของคุณเองลงในแผนที่โดยใช้ไลบรารี Leaflet JavaScript ให้ทำตามขั้นตอนด้านล่าง -

Step 1 - สร้างไฟล์ Map วัตถุโดยส่งผ่านองค์ประกอบ (สตริงหรือวัตถุ) และตัวเลือกแผนที่ (ทางเลือก)

Step 2 - สร้างไฟล์ Layer ออบเจ็กต์โดยส่ง URL ของไทล์ที่ต้องการ

Step 3 - เพิ่มวัตถุเลเยอร์ลงในแผนที่โดยใช้ไฟล์ addLayer() วิธีการของ Map ชั้นเรียน.

Step 4 - สร้างตัวแปร zoomOptions และกำหนดค่าข้อความของคุณเองสำหรับตัวเลือกการซูมเข้าและซูมออกแทนที่จะเป็นค่าเริ่มต้น (+ และ -)

จากนั้นสร้างตัวควบคุมการซูมโดยส่งผ่านตัวแปร zoomOptions ไปที่ L.control.zoom() ดังแสดงด้านล่าง

// zoom control options
var zoomOptions = {
   zoomInText: '1',
   zoomOutText: '0',
};
// Creating zoom control
var zoom = L.control.zoom(zoomOptions);

Step 5 - เพิ่มวัตถุควบคุมการซูมที่สร้างขึ้นในขั้นตอนก่อนหน้าลงในแผนที่โดยใช้ไฟล์ addTo() วิธี.

// Adding zoom control to the map
zoom.addTo(map);

ตัวอย่าง

ต่อไปนี้เป็นรหัสสำหรับเพิ่มการควบคุมการซูมของคุณเองลงในแผนที่ของคุณแทนที่จะเป็นค่าเริ่มต้น ที่นี่เมื่อกด 1 แผนที่จะซูมเข้าและเมื่อกด 0 แผนที่จะซูมออก

<!DOCTYPE html>
<html>
   <head>
      <title>Zoom Example</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,
            zoomControl: false
         }
         var map = new L.map('map', mapOptions); // Creating a map object
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer);   // Adding layer to the map
         
         // zoom control options
         var zoomOptions = {
            zoomInText: '1',
            zoomOutText: '0',
         };
         var zoom = L.control.zoom(zoomOptions);   // Creating zoom control
         zoom.addTo(map);   // Adding zoom control to the map
      </script>
   </body>
   
</html>

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

แสดงที่มา

ในการเพิ่มการระบุแหล่งที่มาของคุณเองลงในแผนที่โดยใช้ไลบรารี Leaflet JavaScript ให้ทำตามขั้นตอนด้านล่าง -

Step 1 - สร้างไฟล์ Mapวัตถุโดยส่งผ่านองค์ประกอบ< div > (สตริงหรือวัตถุ) และตัวเลือกแผนที่ (ไม่บังคับ)

Step 2 - สร้างไฟล์ Layer ออบเจ็กต์โดยส่ง URL ของไทล์ที่ต้องการ

Step 3 - เพิ่มวัตถุเลเยอร์ลงในแผนที่โดยใช้ไฟล์ addLayer() วิธีการของ Map ชั้นเรียน.

Step 4 - สร้างไฟล์ attrOptions ตัวแปรและกำหนดค่าคำนำหน้าของคุณเองแทนค่าเริ่มต้น (แผ่นพับ)

จากนั้นสร้างการควบคุมการระบุแหล่งที่มาโดยส่งไฟล์ attrOptions ตัวแปรเป็น L.control.attribution() ดังแสดงด้านล่าง

// Attribution options
var attrOptions = {
   prefix: 'attribution sample'
};

// Creating an attribution
var attr = L.control.attribution(attrOptions);

Step 5 - เพิ่มไฟล์ attribution control วัตถุที่สร้างขึ้นในขั้นตอนก่อนหน้าไปยังแผนที่โดยใช้ addTo() วิธี.

// Adding attribution to the map
attr.addTo(map);

ตัวอย่าง

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

<!DOCTYPE html>
<html>
   <head>
      <title>Attribution Example</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,
            attributionControl: false
         }
         var map = new L.map('map', mapOptions); // Creating a map object
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer);    // Adding layer to the map
         
         // Attribution options
         var attrOptions = {
            prefix: 'attribution sample'
         };
         
         // Creating an attribution
         var attr = L.control.attribution(attrOptions);
         attr.addTo(map);  // Adding attribution to the map
      </script>
   </body>
   
</html>>

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

มาตราส่วน

หากต้องการเพิ่มการควบคุมมาตราส่วนของคุณเองลงในแผนที่โดยใช้ไลบรารี Leaflet JavaScript ให้ทำตามขั้นตอนด้านล่าง -

Step 1 - สร้างไฟล์ Mapวัตถุโดยส่งผ่านองค์ประกอบ< div > (สตริงหรือวัตถุ) และตัวเลือกแผนที่ (ไม่บังคับ)

Step 2 - สร้างไฟล์ Layer ออบเจ็กต์โดยส่ง URL ของไทล์ที่ต้องการ

Step 3 - เพิ่มไฟล์ layer คัดค้านแผนที่โดยใช้ addLayer() วิธีการของ Map ชั้นเรียน.

Step 4 - สร้างการควบคุมขนาดโดยผ่านการใช้งาน L.control.scale() ดังแสดงด้านล่าง

// Creating scale control
var scale = L.control.scale();

Step 5 - เพิ่มไฟล์ scale control วัตถุที่สร้างขึ้นในขั้นตอนก่อนหน้าไปยังแผนที่โดยใช้ addTo() วิธีการดังแสดงด้านล่าง

// Adding scale control to the map
scale.addTo(map);

ตัวอย่าง

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

<!DOCTYPE html>
<html>
   <head>
      <title>Scale Example</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');
         map.addLayer(layer); // Adding layer to the map
         var scale = L.control.scale(); // Creating scale control
         scale.addTo(map); // Adding scale control to the map
      </script>
   </body>
   
</html>

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

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved