LeafletJS - เวกเตอร์เลเยอร์

ในบทที่แล้วเราได้เรียนรู้วิธีใช้เครื่องหมายใน 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 2 - สร้างไฟล์ Layer ออบเจ็กต์โดยส่ง URL ของไทล์ที่ต้องการ

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 2 - สร้างไฟล์ Layer ออบเจ็กต์โดยส่ง URL ของไทล์ที่ต้องการ

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 2 - สร้างไฟล์ Layer ออบเจ็กต์โดยส่ง URL ของไทล์ที่ต้องการ

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>>

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