2013-08-29 30 views
11

tôi có một chương trình geoJson cơ bản trong javascript bằng cách sử dụng API tờ rơi.Bản đồ javascript trong tờ rơi cách làm mới

<html> 
<head> 

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" /> 
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script> 
<script src="india.js" type="text/javascript"></script> 

</head> 


<body> 
<div id = "map1" style="width: 1100px; height: 400px"> </div> 

<script> 

var area = L.map('map1', {center: [27.8800,78.0800], zoom: 4 }); 

L.tileLayer('http://a.tiles.mapbox.com/v3/raj333.map-gugr5h08/{z}/{x}/{y}.png').addTo(area); 

var indiaLayer= L.geoJson(india, {style: {weight: 2, 
     opacity: 1, 
     color: 'white', 
     dashArray: '3', 
     fillOpacity: 0.1}}); 

     area.addLayer(indiaLayer); 

     function clicked(){ 

     this.options.style.fillOpacity = 0.8; 
      //how to refresh layer in the given map 

     } 

     indiaLayer.on('click', clicked);     
</script> 
</body> 
</html> 

vấn đề là làm cách nào tôi tự động làm mới nội dung của Lớp trên bản đồ.

ví dụ ở đây

   function clicked(){ 

     indiaLayer.style.fillOpacity = 0.8; 
      //how to refresh layer in the given map 

     } 

     indiaLayer.on('click', clicked); 

khi người dùng nhấp chuột vào indiaLayer, những thay đổi biến fillOpacity nhưng không phản ánh lại trên bản đồ mà được hiểu kể từ khi tôi đang không làm mới bản đồ. Tôi không biết phải làm thế nào.

xin vui lòng giúp

P/s: đây là những chức năng có sẵn trên đối tượng indiaLayer (tức đối tượng này trong chức năng nhấp ... cái nào để sử dụng cho mục đích này hoặc có tồn tại không có)

Bạn có thể kiểm tra danh sách các phương thức có sẵn của GEOJson trong số Leaflef documentation Đây là liên kết tới v.0.7.7, đây là phương thức có sẵn gần nhất để sử dụng trong ví dụ này.

Trả lời

17

Thời gian qua tôi đã sử dụng

map._onResize(); 

và giúp tôi làm mới bản đồ. Có lẽ một chút hack, nhưng, nó hoạt động.

Trong mã của bạn sẽ area._onResize()

PS: Có lẽ bạn nên thử thay đổi cách thức để thiết lập giá trị opacity mới - thử thay đổi

function clicked(){ 
    this.options.style.fillOpacity = 0.8; 
} 

đó

function clicked(){ 
    this.setStyle({fillOpacity: 0.2}); 
} 
+1

nó không work..nothing xảy ra để lập bản đồ từ mã này :( – user609306

+0

chỉ cần sửa đổi câu trả lời của tôi, tôi hy vọng nó sẽ giúp – Elephant

+0

Hey @elephant ..yes this.setStyle ({fillOpacity: 0,2}) hoạt động .... Spacibo – user609306

15
map.invalidateSize(); 

map._onResize() - đó là bản hack và không đảm bảo rằng nó sẽ không bị xóa trong các phiên bản sau. .

+3

Trên thực tế invalidateSize sẽ không hoạt động nếu kích thước của bản đồ không thay đổi.Từ tài liệu: "Kiểm tra xem kích thước vùng chứa bản đồ có thay đổi và cập nhật bản đồ hay không" – a1an

+0

Sự cố của tôi ở trong chế độ này: Bản đồ của tôi ban đầu bị ẩn và khi tôi hiển thị nó, nó không được khởi tạo (không phải tất cả các ô đều là nạp vào). Sau khi tôi đã thêm phương thức này, cuộc gọi này đã được khắc phục. Vì vậy, tôi nghĩ rằng nó làm cho một số cập nhật anyway. –

0

area.fitBounds(area.getBounds());

+0

Op hỏi "vấn đề là làm cách nào tôi tự động làm mới nội dung của Lớp trên bản đồ. ví dụ tại đây – justDev7a3

+3

@ImportanceOfBeingErnest Vui lòng đọc câu hỏi và câu trả lời trước khi xem xét. –