2013-06-29 31 views
19

Tôi đang thực hiện một dự án cho trường học và tôi cần phải thay đổi kích thước biểu tượng điểm đánh dấu tùy thuộc vào mức thu phóng trong bản đồ tờ rơi, Có cách nào dễ dàng để thực hiện việc này không? Bất kỳ hướng dẫn nào trên web? Xin được cảm ơn trước về sự giúp đỡ!!!có cách nào để thay đổi kích thước biểu tượng đánh dấu tùy thuộc vào mức thu phóng trong tờ rơi không?

Trả lời

20

Để thay đổi kích thước điểm đánh dấu khi bạn phóng to/thu nhỏ, bạn sẽ cần xử lý sự kiện.

map.on('zoomend', function() { }); 

Sự kiện zoomend sẽ được gọi bất cứ khi nào bản đồ đã hoàn thành phóng to hoặc thu nhỏ. Xem API here.

Bây giờ, bên trong chức năng này, bạn có thể gọi mã tùy chỉnh của mình để thay đổi kích thước của điểm đánh dấu. Ví dụ: giả sử bạn muốn thực hiện một phương pháp đơn giản và đặt kích thước của điểm đánh dấu vòng tròn bằng với kích thước của mức thu phóng bản đồ. Xem API cho một CircleMarker here

// Create some marker that will be resized on the map zooming 
var myMarker = new L.CircleMarker([10,10], { /* Options */ }); 

map.on('zoomend', function() { 
    var currentZoom = map.getZoom(); 
    myMarker.setRadius(currentZoom); 
}); 

Bây giờ bất cứ khi nào bản đồ phóng to hoặc thu nhỏ, kích thước của điểm đánh dấu sẽ thay đổi.

+2

Bạn có thể muốn thay đổi 'L.CircleMarker' thành' L.circle'. Như tôi đã hiểu, 'L.CircleMarker' được sử dụng cho các vòng tròn không nên thay đổi kích thước mã hóa thành zoomlevel – Stophface

4

Tôi không chắc Stophace đang đề cập đến gì về vòng trònKhông thay đổi kích thước, nhưng thêm vào câu trả lời được phê duyệt ... nếu bạn muốn thay đổi kích thước circleMakers hoặc thay đổi bất kỳ tùy chọn tạo kiểu nào khác (tôi thấy hữu ích khi thay đổi trọng lượng cùng với bán kính), bạn có thể sử dụng phương pháp sau đây:

map.on('zoomend', function() { 
     var currentZoom = map.getZoom(); 
     var myRadius = currentZoom*(1/2); //or whatever ratio you prefer 
     var myWeight = currentZoom*(1/5); //or whatever ratio you prefer 
      layername.setStyle({radius: myRadius, weight: setWeight}); 
    }); 

layername sẽ được thay thế bằng tên của bất cứ lớp bạn có chứa circleMarkers ... và tất nhiên bạn có thể thay đổi các phân số để bạn thích hợp với nhu cầu của bạn.

Tôi đoán dự án trường học của OP đã hoàn tất, nhưng tôi hy vọng điều này sẽ giúp những người khác có cùng câu hỏi!

+0

oops ... có nghĩa là đăng bài này làm bình luận cho câu trả lời gốc ... lần đầu tiên ở đây! – juliabulia245

Các vấn đề liên quan