2016-01-17 16 views
5

Tôi có nhiều đa giác phức tạp, một số có hơn 750 điểm. Có cách nào nhanh chóng và hiệu quả để có được hộp giới hạn không? Tôi sẽ ghét lặp lại mọi điểm và mở rộng hộp giới hạn ..Nhận hộp giới hạn của đa giác

Giải pháp phải ở trong hoặc có thể có chức năng API Google Maps API v3 mà tôi đã bỏ qua.


Hoặc tôi có nên mã hóa các tọa độ của hộp giới hạn và sử dụng chúng để giảm tải trên máy khách không?

enter image description here

Làm thế nào đa giác được thực hiện:

//Coordinates 
var coordinates = [ 
    new google.maps.LatLng(11,22), 
    new google.maps.LatLng(11,22), 
    new google.maps.LatLng(11,22), 

    //etc up to 200, 500 or even 800 points 
] 

//Options 
var options = { 
    path: coordinates, 
    strokeColor: "#222", 
    strokeOpacity: 1, 
    strokeWeight: 2, 
    fillColor: "#000", 
    fillOpacity: 0, 
    zIndex: 0 
} 

//Create polygon 
var polygon = new google.maps.Polygon(options); 

//Show it on map 
polygon.setMap(map); 

tôi cần phải làm bài tập về nhà của tôi vì tính toán trực tiếp được loại trừ chắc chắn. Tôi có lẽ sẽ cần phải làm điều đó một cách khó khăn nhưng có thể một số bạn biết một số công cụ trực tuyến tiện dụng mà tính toán hộp giáp dựa trên coords chèn?

Tôi cần hình dạng đơn giản nhất có thể vì tôi cần kiểm tra xem đa giác của tôi có ở chế độ xem hay không và có thể sẽ là cơn ác mộng với 800 điểm vì tôi không biết cách nào khác ngoài việc lặp qua tất cả các điểm.

+0

Xin bao gồm một số mã để hiển thị như thế nào bạn hiển thị đa giác đó. Nó là một hình ảnh? SVG? Các yếu tố nhỏ bé? – Oriol

+0

Trừ khi các điểm được lưu trữ trong một cơ sở hạ tầng hiệu quả (như một kde-tree), không có giải pháp hiệu quả hơn so với lặp lại các điểm. –

+0

@Oriol Đã cập nhật câu hỏi của tôi bằng mã. – Solo

Trả lời

3

Polygon không có phương thức getBounds trên API Google Maps v3. Bạn có thể thực hiện nó theo cách thủ công. Nhưng nó chứa fors. Nhân tiện. Tôi đã triển khai phương thức getBounds. Nó là một phiên bản mã hóa cứng. Liên kết cho số demo.

CẬP NHẬT

Để có được hộp biên giới duy nhất cho nhiều đa giác sử dụng union phương pháp getBounds phương pháp.

var coordinates = [ 
    new google.maps.LatLng(10,15), 
    new google.maps.LatLng(12,16), 
    new google.maps.LatLng(11,18), 
    new google.maps.LatLng(11,19), 
    new google.maps.LatLng(13,21), 
    new google.maps.LatLng(12,22), 
    new google.maps.LatLng(13,24), 
    new google.maps.LatLng(11,25), 
    new google.maps.LatLng(8,23), 
    new google.maps.LatLng(7,23), 
    new google.maps.LatLng(8,21), 
    new google.maps.LatLng(6,17), 
    new google.maps.LatLng(9,16) 
] 

var coordinates_1 = [ 
    new google.maps.LatLng(15,28), 
    new google.maps.LatLng(16,30), 
    new google.maps.LatLng(17,30), 
    new google.maps.LatLng(16,31), 
    new google.maps.LatLng(16,32), 
    new google.maps.LatLng(14,29), 
] 

var options = { 
    path: coordinates, 
    strokeColor: "#222", 
    strokeOpacity: 1, 
    strokeWeight: 2, 
    fillColor: "#000", 
    fillOpacity: 0, 
    zIndex: 0, 
    map: map 
} 

var options_1 = { 
    path: coordinates_1, 
    strokeColor: "#222", 
    strokeOpacity: 1, 
    strokeWeight: 2, 
    fillColor: "#000", 
    fillOpacity: 0, 
    zIndex: 0 
} 

var polygon = new google.maps.Polygon(options); 
var polygon_1 = new google.maps.Polygon(options_1); 

if(!google.maps.Polygon.prototype.getBounds) 
google.maps.Polygon.prototype.getBounds = function() { 
    var bounds = new google.maps.LatLngBounds(); 
    var paths = this.getPaths();  
    for (var i = 0; i < paths.getLength(); i++) { 
     var path = paths.getAt(i); 
     for (var j = 0; j < path.getLength(); j++) { 
      bounds.extend(path.getAt(j)); 
     } 
    } 
    return bounds; 
} 

var rectangle = new google.maps.Rectangle({ 
    strokeColor: '#FF0000', 
    strokeOpacity: 0.8, 
    strokeWeight: 2, 
    fillColor: '#FF0000', 
    fillOpacity: 0.35, 
    map: map, 
    bounds: polygon.getBounds() 
    }); 

var rectangle_1 = new google.maps.Rectangle({ 
    strokeColor: '#FF0000', 
    strokeOpacity: 0.8, 
    strokeWeight: 2, 
    fillColor: '#FF0000', 
    fillOpacity: 0.35, 
    map: map, 
    bounds: polygon_1.getBounds() 
    }); 

var rectangle_single = new google.maps.Rectangle({ 
    strokeColor: '#FFC000', 
    strokeOpacity: 0.8, 
    strokeWeight: 2, 
    fillColor: '#FFF000', 
    fillOpacity: 0.35, 
    map: map, 
    bounds: polygon.getBounds().union(polygon_1.getBounds()) 
    }); 
+0

@Solo Tôi đã cập nhật bản demo và mã. Vui lòng kiểm tra tại. –

0

Tọa độ X và Y trong mảng sau đó là mảng x và y min và max. Mặc dù chúng ta cần nhiều hơn thì một bức tranh để biết những gì bạn chính xác muốn và làm thế nào.

+0

Điều này hoàn toàn giống nhau, mặc dù bạn ẩn vòng lặp 'for'. Hơn nữa, trước tiên bạn sẽ cần một vòng lặp để đặt các phần tử trong một mảng. Kết quả là thuật toán có thể chạy chậm hơn nhiều, vì bạn lặp lại dữ liệu * ba * lần. –

+0

Điểm tốt, vì vậy chỉ cần 1 vòng lặp để kiểm tra cả x và y cho min và max tôi giả sử trong chính vòng lặp đó. – seahorsepip

0

Nếu điểm được cho chúng tôi không một cấu trúc tiên nghiệm, có không hiệu quả hơn cách hơn iterating qua các điểm và mở rộng khung giới hạn. Vì bạn không biết trước, bất kỳ điểm nào đều có thể là điểm góc (hoặc điểm cạnh) và do đó bạn phải cân nhắc. Không có thuật toán nào có thể làm điều đó hiệu quả hơn.

Nếu tuy nhiên bạn có quyền kiểm soát máy chủ cung cấp tọa độ, bạn có thể lưu trữ điểm trước trong cơ sở dữ liệu như một cây k-d. Ví dụ: tất cả các điểm là tĩnh, bạn có thể lưu trữ chúng trong cây kd như vậy, và sau đó bạn có thể tăng tốc độ một cách nhanh chóng (mặc dù, theo như tôi biết vấn đề vẫn là O (n), nhưng bạn không có ghi nhận tất cả các điểm).

Tuy nhiên, vấn đề là bạn không cung cấp bất kỳ thông tin nào về phía máy chủ.

3

Một phiên bản đơn giản và nhỏ gọn hơn của mã này là:

google.maps.Polygon.prototype.getBounds = function() { 
     var bounds = new google.maps.LatLngBounds(); 
     this.getPath().forEach(function(element,index){ bounds.extend(element); }); 
     return bounds; 
    } 
Các vấn đề liên quan