GIS - Hệ thống thông tin địa lý

byNgô Quốc Toàn -
3


Bài 1 THB4



<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gis</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
</head>
<style>
    #map{
        height: 1000px;
        width: 1400px;
        margin: 0 auto;
        border: solid 10px black;
    }
</style>
<body>
    <div id="map"></div>
    <script>
        // Khởi tạo bản đồ Leaflet với tâm là Cần Thơ và tỷ lệ zoom = 9
    var map = L.map('map').setView([10.0461, 105.7469], 9);

// Thêm layer bản đồ
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors'
}).addTo(map);

// Tạo polygon hình tròn với trung tâm là tỉnh An Giang
var circle = L.circle([10.3894, 105.4433], {
  color: 'red',
  fillColor: '#f03',
  fillOpacity: 0.5,
  radius: 20000 // Bán kính của hình tròn (đơn vị: mét)
}).addTo(map);
circle.bindPopup("I am a circle");

// Tạo polygon hình tam giác với các điểm Cần Thơ, Bến Tre, Trà Vinh
var triangle = L.polygon([
  [10.0461, 105.7469],
  [10.2433, 106.3755],
  [9.9347, 106.3454]
]).addTo(map);
triangle.bindPopup("I am a triangle");

// Tạo polygon với các điểm Vị Thanh, Châu Thành, Định An, Bạc Liêu, U Minh
var polygon = L.polygon([
  [9.7856, 105.3426],
  [9.9519, 105.4629],
  [9.9185, 105.9377],
  [9.2853, 105.7243],
  [9.4115, 105.1227]
]).addTo(map);
polygon.bindPopup("I am a polygon");
        var map = L.map('map').setView([10.0341844,105.7163705], 9);

        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

       
    </script>
</body>
</html>


bài 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gis</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
</head>
<style>
    #map{
        height: 1000px;
        width: 1400px;
        margin: 0 auto;
        border: solid 10px black;
    }
</style>
<body>
    <div id="map"></div>
    <script>
    // Khai báo mảng các màu cơ bản
    var colors = ['#FF5733', '#FFC300', '#36DBCA', '#900C3F', '#00A5CF'];

    // Hàm lấy vị trí ngẫu nhiên trong mảng
    function getRandomIndex(array) {
      return Math.floor(Math.random() * array.length);
    }

    // Khởi tạo bản đồ Leaflet
    var map = L.map('map').setView([10.0461, 105.7469], 9);

    // Thêm layer bản đồ
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    // Sự kiện click chuột
    map.on('click', function(e) {
      // Chọn một màu ngẫu nhiên từ mảng colors
      var randomColor = colors[getRandomIndex(colors)];

      // Tạo polygon hình tròn với màu ngẫu nhiên và bán kính 10000 mét
      var circle = L.circle(e.latlng, {
        color: randomColor,
        fillColor: randomColor,
        fillOpacity: 0.5,
        radius: 10000
      }).addTo(map);
    });
 

   

    </script>
</body>
</html>



Bài 3



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Random Color Polygon</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  <style>
    #map {
      height: 500px;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    // Khai báo mảng các màu cơ bản
    var colors = ['#FF5733', '#FFC300', '#36DBCA', '#900C3F', '#00A5CF'];

    // Hàm lấy vị trí ngẫu nhiên trong mảng
    function getRandomIndex(array) {
      return Math.floor(Math.random() * array.length);
    }

    // Khởi tạo bản đồ Leaflet
    var map = L.map('map').setView([10.0461, 105.7469], 9);

    // Thêm layer bản đồ
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    // Sự kiện click chuột
    map.on('click', function(e) {
      // Chọn một màu ngẫu nhiên từ mảng colors
      var randomColor = colors[getRandomIndex(colors)];

      // Tạo polygon hình tròn với màu ngẫu nhiên và bán kính 10000 mét
      var circle = L.circle(e.latlng, {
        color: randomColor,
        fillColor: randomColor,
        fillOpacity: 0.5,
        radius: 10000
      }).addTo(map);
    });
  </script>
</body>
</html>



THB2

1a Marker di chuyển theo thao tác rê chuột của người dùng (nghĩa là kéo chuột sẽ di

chuyển được marker sang vị trí mới)
var map = L.map('map').setView([10.0467427,105.7669626], 13);

        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

        // L.marker([10.0469859,105.7681912]).addTo(map).bindPopup('Can Tho').openPopup();

        var marker = L.marker([10.0467427,105.7669626], { draggable: true //Cho phép marker di chuyển
        }).addTo(map);      
       
        var OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {maxZoom: 17,attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'});        
        var OpenStreetMap_DE = L.tileLayer('https://tile.openstreetmap.de/{z}/{x}/{y}.png', {maxZoom: 18,attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'});
        var OpenToMap = {
            opentomap: OpenTopoMap,
            openstreetmap: OpenStreetMap_DE,
        }
        L.control.layers(OpenToMap).addTo(map);


1b Thao tác click trên bản đồ hiển thị marker: click đến đâu thì hiển marker

đến đó

var map = L.map('map').setView([10.0467427,105.7669626], 13);

        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
        //Click đến đâu hiện marker đến đó
        // Đặt sự kiện click cho bản đồ
        map.on('click', function(event) {
            var lat = event.latlng.lat;
            var lng = event.latlng.lng;
           
            // Tạo marker mới tại vị trí được click
            var newMarker = L.marker([lat, lng]).addTo(map);
        });
       
        //Tạo nhiều lớp bản đồ
        var OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {maxZoom: 17,attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'});        
        var OpenStreetMap_DE = L.tileLayer('https://tile.openstreetmap.de/{z}/{x}/{y}.png', {maxZoom: 18,attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'});
        var OpenToMap = {
                opentomap: OpenTopoMap,
                openstreetmap: OpenStreetMap_DE,
            }

        L.control.layers(OpenToMap).addTo(map);

1C Thao tác click trên bản đồ hiển thị marker cuối cùng

var map = L.map('map').setView([10.0467427,105.7669626], 13);

        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
       
        //Lấy marker ở lần Click cuối cùng
        var currentMarker = null; // Biến để lưu trữ marker hiện tại

        // Đặt sự kiện click cho bản đồ
        map.on('click', function(event) {
            var lat = event.latlng.lat;
            var lng = event.latlng.lng;
           
            // Kiểm tra nếu marker hiện tại đã được tạo
            if (currentMarker) {
                // Xóa marker hiện tại nếu tồn tại
                map.removeLayer(currentMarker);
            }
           
            // Tạo marker mới tại vị trí được click và lưu vào biến currentMarker
            currentMarker = L.marker([lat, lng]).addTo(map);
        });

        //Tạo nhiều lớp bản đồ
        var OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {maxZoom: 17,attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'});        
        var OpenStreetMap_DE = L.tileLayer('https://tile.openstreetmap.de/{z}/{x}/{y}.png', {maxZoom: 18,attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'});
        var OpenToMap = {
                opentomap: OpenTopoMap,
                openstreetmap: OpenStreetMap_DE,
            }
        L.control.layers(OpenToMap).addTo(map);


d. Dùng mảng để lưu trữ toạ độ điểm các tỉnh đồng bằng sông Cửu Long và hiển thị
marker các tỉnh đồng bằng sông Cửu Long
Khi click trên marker sẽ hiện hiện tên Quận bằng popu

 var map = L.map('map').setView([10.0467427,105.7669626], 13);

        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
       
        //Hiển thị marker ở các tỉnh miền Tây
        // Danh sách các tỉnh trong vùng đồng bằng sông Cửu Long và tọa độ của chúng
        var provinces = [
            { name: 'Tiền Giang', coords: [10.36, 106.36] },
            { name: 'Vĩnh Long', coords: [10.25, 105.97] },
            { name: 'Bến Tre', coords: [10.24, 106.37] },
            { name: 'Trà Vinh', coords: [9.93, 106.35] },
            { name: 'Sóc Trăng', coords: [9.60, 105.98] },
            { name: 'Hậu Giang', coords: [9.75, 105.67] },
            { name: 'Kiên Giang', coords: [10.04, 105.08] },
            { name: 'Cà Mau', coords: [9.18, 105.15] },
            { name: 'Bạc Liêu', coords: [9.29, 105.72] },
            { name: 'An Giang', coords: [10.39, 105.17] },
            { name: 'Đồng Tháp', coords: [10.47, 105.64] },
            { name: 'Cần Thơ', coords: [10.05, 105.76] }
        ];

        // Tạo marker cho mỗi tỉnh và thiết lập popup khi click vào marker
        provinces.forEach(function(province) {
            var marker = L.marker(province.coords).addTo(map);
            marker.bindPopup(province.name);
        });
       
        var OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {maxZoom: 17,attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'});        
        var OpenStreetMap_DE = L.tileLayer('https://tile.openstreetmap.de/{z}/{x}/{y}.png', {maxZoom: 18,attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'});
        var OpenToMap = {
                opentomap: OpenTopoMap,
                openstreetmap: OpenStreetMap_DE,
            }
        L.control.layers(OpenToMap).addTo(map);

bai 2 aHiển thị toạ độ điểm khi người dùng click chuột

var map = L.map('map').setView([10.0467427,105.7669626], 13);

        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
       
        //Hiển thị tọa độ được click
        // Đặt sự kiện 'click' cho bản đồ
        map.on('click', function(event) {
            var lat = event.latlng.lat.toFixed(2);
            var lng = event.latlng.lng.toFixed(2);
           
            // Hiển thị toạ độ của điểm khi người dùng click chuột
            L.popup()
                .setLatLng([lat, lng])
                .setContent('Vĩ độ = ' + lng + '<br>Kinh độ = ' + lat)
                .openOn(map);
        });
       
        //Tạo nhiều lớp bản đồ
        var OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {maxZoom: 17,attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'});        
        var OpenStreetMap_DE = L.tileLayer('https://tile.openstreetmap.de/{z}/{x}/{y}.png', {maxZoom: 18,attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'});
        var OpenToMap = {
            opentomap: OpenTopoMap,
            openstreetmap: OpenStreetMap_DE,
        }
        L.control.layers(OpenToMap).addTo(map);

2b Hiện thị Popup với nội dung bao gồm tên và logo Trường Đại học Kỹ thuật– Công
nghệ Cần Thơ

var map = L.map('map').setView([10.0467427,105.7669626], 13);

        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
       
        var universityLatLng = [10.04724191246912, 105.76789098455463]; // Tọa độ của Trường Đại học Kỹ thuật – Công nghệ Cần Thơ
        //Hiển thị popup tên trường và logo của trường
        // Tạo popup với nội dung chứa tên và logo của trường
        var popupContent = `
            <div style="text-align: center;">
                <h3 style="margin-bottom: 10px; color: red;">Trường Đại học Kỹ thuật - Công nghệ Cần Thơ</h3>
                <img src="logo_ctuet.png" alt="Logo Trường Đại học Kỹ thuật – Công nghệ Cần Thơ" width="100">
            </div>
        `;

        // Hiển thị popup
        L.popup()
            .setLatLng(universityLatLng)
            .setContent(popupContent)
            .openOn(map);
       
        //Hiển thị nhiều lớp bản đồ
        var OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {maxZoom: 17,attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'});        
        var OpenStreetMap_DE = L.tileLayer('https://tile.openstreetmap.de/{z}/{x}/{y}.png', {maxZoom: 18,attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'});
        var OpenToMap = {
                opentomap: OpenTopoMap,
                openstreetmap: OpenStreetMap_DE,
            }
        L.control.layers(OpenToMap).addTo(map);

c. Lấy vị trí hiện tại của người dùng, hiển thị marker, popup, di chuyển bản đồ đến vị
trí đó


        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
       
        //Hiển thị vị trí hiện tại của mục tiêu
        // Kiểm tra xem trình duyệt có hỗ trợ geolocation không
        if ("geolocation" in navigator) {
            // Sử dụng geolocation để lấy vị trí hiện tại của người dùng
            navigator.geolocation.getCurrentPosition(function(position) {
                var userLat = position.coords.latitude;
                var userLng = position.coords.longitude;
               
                // Tạo popup chứa thông tin vị trí của người dùng
                var popupContent = "Bạn đang ở đây!";
                L.popup()
                    .setLatLng([userLat, userLng])
                    .setContent(popupContent)
                    .openOn(map);

                // Di chuyển bản đồ đến vị trí của người dùng
                map.setView([userLat, userLng], 15); // 15 là mức độ phóng to mặc định
            });
        } else {
            alert("Trình duyệt không hỗ trợ geolocation.");
        }

        //Hiển thị nhiều lớp bản đồ
        var OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {maxZoom: 17,attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'});        
        var OpenStreetMap_DE = L.tileLayer('https://tile.openstreetmap.de/{z}/{x}/{y}.png', {maxZoom: 18,attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'});
        var OpenToMap = {
                opentomap: OpenTopoMap,
                openstreetmap: OpenStreetMap_DE,
            }
        L.control.layers(OpenToMap).addTo(map);

bài 3 Tìm kiếm trên bản đồ: Plugin thêm chức năng tìm kiếm trực tiếp trên bản đồ và
hiển thị marker điểm cần tìm

//Tìm kiếm vị trí
    // Map initialization
    var map = L.map('map').setView([0, 0], 1); // Initial center (updated later)
        var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'}).addTo(map);

        L.Control.geocoder().addTo(map);    

BÀI THỰC HÀNH BUỔI 3
Thao tác đối tượng Map: Polyline
Bài 1: Sử dụng Polyline để vẽ từ hai điểm cố định cho trước lên bản đồ (như hình bên dưới)


var map = L.map('map').setView([10.045015, 105.746857], 10);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 19,}).addTo(map);
        //Vẽ 2 điểm cố định
        //Điểm thứ nhất
        var startPoint = L.latLng(10.047230654418792, 105.76781560451097);
        //Điểm thứ hai
        var endPoint = L.latLng(9.982223, 105.798188);

        var latLngs = [startPoint, endPoint];
        //Kiểu đường và màu đường
        var polyline = L.polyline(latLngs, {
            color: 'blue',
            dashArray: '5, 10',
        }).addTo(map);

        //Hiển thị popup
        L.marker(startPoint).addTo(map)
            .bindPopup('Đại học Kỹ thuật – Công nghệ Cần Thơ')
            .openPopup();
        //Hiển thị popup
        L.marker(endPoint).addTo(map)
            .bindPopup('Công ty cổ phần Dược Hậu Giang')
            .openPopup();

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

        var map = L.map('map').setView([10.045015, 105.746857], 10);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 19,}).addTo(map);
        var OpenStreetMap_DE = L.tileLayer('https://tile.openstreetmap.de/{z}/{x}/{y}.png', {maxZoom: 18, attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'});


Bài 2: Vẽ Polyline động bằng thao tác click chuột trên bàn phím
Yêu cầu: - Hiển thị marker đầu cuối giữa hai điểm
- Polyline vẽ từ hai thao tác click chuột, click chuột thứ 3 sẽ bắt đầu Polyline mới

var map = L.map('map').setView([10.045015, 105.746857], 10);
       
        var polylines = [];
   
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 19,}).addTo(map);
   
        var startPoint = null;
        var endPoint = null;
        var polyline = null;
       
        map.on('click', function(e) {
            if (startPoint === null) {
                startPoint = e.latlng;
                L.marker(startPoint).addTo(map)
                //Kiểm tra xem điểm bắt đầu đã có hay chưa
                //Nếu chưa thì thêm vào và hiện lên map
            } else if (endPoint === null) {
                endPoint = e.latlng;
                L.marker(endPoint).addTo(map)
                polyline = L.polyline([startPoint, endPoint], {color: 'blue'}).addTo(map);
                //Nối 2 điểm bắt đầu và kết thúc lại bằng màu xanh
                polylines.push(polyline);
                //Kiểm tra xem điểm bắt đầu đã có hay chưa
                //Nếu chưa thì thêm vào và hiện lên map                
            } else {
                map.removeLayer(polyline);
                //Nếu đã có 2 điểm bắt đầu và kết thúc thì xóa đường kẻ
                map.removeLayer(startPoint);
                //Nếu đã có điểm bắt đầu thì xóa điểm đó đi
                map.removeLayer(endPoint);
                //Nếu đã có điểm kết thúc thì xóa điểm đó đi
       
                startPoint = e.latlng;
                endPoint = null;
                polyline = null;
       
                L.marker(startPoint).addTo(map)
                    .bindPopup('Điểm bắt đầu')
                    .openPopup();
            }
        });
   
        map.on('click', function(e) {
            // Hiển thị tất cả các đoạn đường đã được vẽ
            polylines.forEach(function(polyline) {
                map.addLayer(polyline);
            });
        });
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
       
Bài 3: Tính và hiển thị khoảng cách từ hai điểm (dùng Popup hiển thị tại vị trí điểm cuối của Polyline)

 var map = L.map('map').setView([10.045015, 105.746857], 10);

      // Mảng để lưu trữ các Polyline đã tạo
      var polylines = [];

      // Thêm sự kiện click trên bản đồ để thêm điểm và tạo Polyline
      map.on('click', function(e) {
        var newMarker = L.marker(e.latlng).addTo(map); // Tạo một điểm mới và thêm vào bản đồ
       
        // Nếu có ít nhất một Polyline đã được tạo, ta sẽ ghi nhớ Polyline cuối cùng
        var lastPolyline = polylines.length > 0 ? polylines[polylines.length - 1] : null;
       
        // Nếu chưa có Polyline hoặc Polyline cuối đã có 2 điểm, ta tạo một Polyline mới
        if (!lastPolyline || lastPolyline.getLatLngs().length === 2) {
          lastPolyline = L.polyline([e.latlng], {color: 'red'}).addTo(map);
          polylines.push(lastPolyline);
        } else {
          // Nếu Polyline cuối còn ít hơn 2 điểm, ta thêm điểm mới vào Polyline đó
          lastPolyline.addLatLng(e.latlng);
        }

        // Tính và hiển thị khoảng cách (nếu đã có đủ hai điểm)
        if (lastPolyline.getLatLngs().length === 2) {
          var distance = lastPolyline.getLatLngs()[0].distanceTo(lastPolyline.getLatLngs()[1]);
          var popup = L.popup()
            .setLatLng(e.latlng) // Hiển thị Popup tại vị trí của điểm click
            .setContent("Khoảng cách: " + distance.toFixed(2) + " mét")
            .openOn(map);
        }
      });

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

        var map = L.map('map').setView([10.045015, 105.746857], 10);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 19,}).addTo(map);
            var OpenStreetMap_DE = L.tileLayer('https://tile.openstreetmap.de/{z}/{x}/{y}.png', {maxZoom: 18,
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'});

: Vẽ Polyline bằng thao tác click chuột trên bản đồ. Trong đó: - Click chuột: tạo marker và điểm mới đưa vào Polyline - Kết thúc vẽ bằng thao tác double click

var map = L.map('map').setView([51.505, -0.09], 13);
    //Dòng này tạo một đối tượng bản đồ Leaflet với tên là map
    //và thiết lập hiển thị ban đầu ở một điểm định sẵn với vĩ độ và kinh độ là [51.505, -0.09] và mức độ phóng đại là 13.
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
    //Dòng này thêm một lớp tile (gạch) vào bản đồ sử dụng các gạch từ OpenStreetMap. Nó sẽ tải các gạch từ một đường dẫn URL
    //cụ thể và thêm chúng vào bản đồ. Phần attribution cung cấp thông tin về nguồn gốc của các dữ liệu bản đồ từ OpenStreetMap.
    var polyline = L.polyline([], {color: 'red'}).addTo(map);
    //Dòng này tạo một đường nét đa giác trống với màu đỏ và thêm nó vào bản đồ.
    //Đường nét này sẽ được sử dụng để vẽ các đường nối giữa các điểm trên bản đồ.
    var markers = [];
    //Dòng này khởi tạo một mảng trống có tên là markers.
    //Mảng này sẽ lưu trữ các đối tượng đánh dấu (marker) được thêm vào bản đồ.
    function addPointToPolyline(e) {
      var marker = L.marker(e.latlng).addTo(map);
      markers.push(marker);
      polyline.addLatLng(e.latlng);
    }
    //Đoạn mã này định nghĩa một hàm có tên là addPointToPolyline, nhận đối số là sự kiện e
    //(biểu thị một sự kiện click trên bản đồ). Bên trong hàm, nó tạo một đối tượng đánh dấu ở vị trí được click,
    //thêm nó vào bản đồ, thêm đánh dấu vào mảng markers, và thêm tọa độ click vào đường nét.
      map.on('click', addPointToPolyline);
      //Dòng này thêm một trình nghe sự kiện vào bản đồ để lắng nghe sự kiện click.
      //Khi một sự kiện click xảy ra, hàm addPointToPolyline sẽ được gọi.
      map.on('dblclick', function() {
        map.off('click', addPointToPolyline);
        map.off('dblclick');
        polyline.addTo(map);
        markers.forEach(function(marker) {
        map.removeLayer(marker);
      });
      //Đoạn mã này thêm một trình nghe sự kiện double-click vào bản đồ. Khi một sự kiện double-click xảy ra, nó sẽ gỡ bỏ các
      //trình nghe sự kiện
      //click và double-click khỏi bản đồ, thêm đường nét vào bản đồ (hiển thị đường đã vẽ), và gỡ bỏ tất cả các đánh dấu từ bản đồ.
    });
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

Tags:

3 Nhận xét

Mới hơn Cũ hơn