Tờ rơi JS thêm hình dạng GeoJSON như một lỗ trong đa giác


9

Tôi có một bộ dữ liệu đã chứa Geojson. Tôi có thể thêm nó vào bản đồ của mình với dòng mã sau.

L.geoJson(data.geojson).addTo(map);

Và tôi nhận được điều này Geojson vẽ trên bản đồ

Nhưng tôi muốn đạt được điều này, nơi mà khu vực xung quanh được che đậy và hình dạng Geojson của tôi là một lỗ ở giữa nó.

Geojson như một lỗ hổng trên bản đồ

Theo tài liệu tờ rơi

Bạn cũng có thể tạo một đa giác có lỗ bằng cách chuyển một mảng các mảng latlng, với mảng latlngs đầu tiên đại diện cho vòng bên ngoài trong khi phần còn lại đại diện cho các lỗ bên trong.

Vì vậy, trong lý thuyết một cái gì đó như:

var scotland = [[60,-13],[60,0],[50,4],[50,-13]];
L.Polygon([scotland,coordinatesOfShapeHole].addTo(map);

Vấn đề của tôi là chức năng này dường như không thích tôi truyền dữ liệu.geojson hoặc data.geojson.coordins làm tham số thứ hai (tọa độOfShapeHole);

Có cách nào để chuyển đổi data.geojson thành định dạng mà hàm L.Polygon hài lòng không?

Hoặc thay thế làm điều tương tự nhưng với L.geoJson?

Câu trả lời:


7

Điều này nên làm việc. Phiên bản nào của tờ rơi bạn đang sử dụng?

Ở đây, có một cái nhìn tại jsFiddle này .

Điều quan trọng là bạn có được các mảng đúng.

Mảng đầu tiên là đối tượng đa giác [ở đây vòng ngoài [ở đây một số [lat, lon], [,] đóng vòng ngoài], sau đó vòng trong [ở đây một số [lat, lon], [,] đóng vòng trong] đóng đa giác].

scotland = L.polygon([[[60,-13],[60,0],[50,4],[50,-13]],
                  [[55.7,-4.5],[56,-4.5],[56,-4],[55.7,-4]]]);
scotland.addTo(map);

1
Xin chào cảm ơn. Điều đó hoạt động rất tốt nếu tôi xử lý một đa giác đơn giản, nhưng dữ liệu của tôi ở định dạng Geojson. Bạn có biết nếu có một cách để chuyển đổi Geojson thành tọa độ đa giác. Hoặc đạt được nó bằng cách sử dụng L.geoJson?
elMarquis

Đó không phải là một vấn đề. Tôi đã rẽ nhánh jsFiddle để sử dụng L.geoJson. jsfiddle.net/goldrydigital/xa6vg5zj
Dennis Bauszus

Rực rỡ cảm ơn. Tôi đã không nhận ra Geojson chứa một định nghĩa đa giác có thể được truyền qua một đa mảng tương tự như đa giác tiêu chuẩn.
elMarquis
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.