Đang tải tập tin GeoJSON bên ngoài vào bản đồ Tờ rơi?

53

Tôi muốn tải một tệp GeoJSON (đa giác) vào bản đồ tờ rơi của mình. Tôi đã thấy các ví dụ trong đó GeoJSON được nhúng vào mã javascript nhưng tôi không thể tìm thấy bất kỳ ví dụ nào cho thấy cách thực hiện với một tệp bên ngoài.

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
    <script src="usStates.geojson" type="text/javascript"></script>
    <style>
        html, body, #map {
            height: 100%;
        }
        body {
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>
    <div id="map" style="height: 100%"</div>
    <script src="http://d3js.org/d3.v2.min.js?2.9.3"></script>
    <script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>

    <script type="text/javascript"> 

    var map = L.map('map').setView([38.57, -94.71], 4);

    L.tileLayer('http://{s}.tile.cloudmade.com/9067860284bc491e92d2342cc51d47d9/998/256/{z}/{x}/{y}.png', {attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> Imagery © <a href="http://cloudmade.com">CloudMade</a>'}).addTo(map);

    var featureStyle = {
        "color": "#ff7800",
        "weight": 5, 
        "opacity": 0.2
    };

    L.geoJson(usStates).addTo(map);

    </script>

</body>

leaflet geojson

— bailey
nguồn

kéo và thả Geojson vào Geojson.io

— Mapperz

@Mapperz OP không hỏi về cách dán nội dung nội dung Geojson của họ vào tập lệnh.

— Dave-Evans

36

Nhìn vào tờ rơi-Ajax. Nó sắp xếp hợp lý mọi thứ. Sẽ bỏ phiếu cho Neogeomat vì đã đề cập đến nó.

Lấy tập lệnh ở đây ( github repo ) và thêm nó vào tiêu đề của bạn:

<script src="/js/leaflet-0.7.2/leaflet.ajax.min.js"></script>

Sau đó, vấn đề tải lên với tên tệp.

var geojsonLayer = new L.GeoJSON.AJAX("foo.geojson");       
geojsonLayer.addTo(map);

Thực sự thẳng về phía trước sửa chữa và nó hoạt động. Vì vậy, yay.

— FredFury
nguồn

26

Bạn có thể sử dụng Ajax jquery để tải dữ liệu và sau đó thêm nó.

var district_boundary = new L.geoJson();
district_boundary.addTo(map);

$.ajax({
dataType: "json",
url: "data/district.geojson",
success: function(data) {
    $(data.features).each(function(key, data) {
        district_boundary.addData(data);
    });
}
}).error(function() {});

hoặc Bạn có thể sử dụng plugin leaflet-ajax

— tân sinh
nguồn

14

Đây là giải pháp vanilla tối thiểu của tôi. Nhìn này, không cần jquery cho một cuộc gọi ajax nhanh chóng đến một tập tin.

let xhr = new XMLHttpRequest();
xhr.open('GET', 'uk_outline.geojson');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.responseType = 'json';
xhr.onload = function() {
    if (xhr.status !== 200) return
    L.geoJSON(xhr.response).addTo(map);
};
xhr.send();

— Dennis Bauszus
nguồn

Cảm ơn ví dụ - Tôi đã lấy newtừ khóa cho geoJSONhàm nhà máy, nhưng đã gặp lỗi CORS với dòng setRequestHeader trong đó, vì vậy đã xóa nó và nó hoạt động tốt (phải là một số cài đặt trong máy chủ của tôi).

— Brian Burns

Cung cấp cho tôi một XML Parsing Error: not well-formedlỗi tại Line Number 1, Column 1:. Chà, vì dữ liệu là một Geojson, tại sao nó lại cố phân tích nó thành XML? Tôi không hiểu vấn đề, nhưng tôi muốn nhập dữ liệu của mình mà không cần Ajax.

— Aaron Bramson

@AaronBramson có thử khác. Đây là một bit mã cũ mà tôi đã làm. Tôi nên đã đặt answerType và sử dụng phản hồi không phân tích phản hồi. Chỉ cần cập nhật đoạn mã.

— Dennis Bauszus

Vâng, điều này thật tuyệt! Nó hoạt động ngoài hộp mà không yêu cầu bất kỳ gói bên ngoài bổ sung nào và không yêu cầu chỉnh sửa tệp dữ liệu. Đây rõ ràng là câu trả lời tốt nhất.

— Aaron Bramson

11

Trong phần tử head, bạn tham chiếu các tệp của mình:

    <link rel="stylesheet" type="text/css" href="leaflet/leaflet.css" />
    <!--[if lte IE 8]>
        <link rel="stylesheet" type="text/css" href="css/leaflet.ie.css" />
    <![endif]-->
    <script src="leaflet/leaflet.js"></script>
    <script src="hydro_s.geojson" type="text/javascript"></script>
    <script src="hydro_l.geojson" type="text/javascript"></script>
    <style>
        html, body, #map {
            height: 100%;
        }
        body {
            padding: 0;
            margin: 0;
        }
    </style>
    <title>Leaflet Map with GeoJson</title>
 </head>

Và sau đó trong cơ thể:

<body>
    <div id="map"></div>
    <script type="text/javascript">

        var map = L.map('map', {
            center: [45.57, -73.5648],
            zoom: 10
        });

         /* Hydro */
        var hydro = new L.LayerGroup();
        L.geoJson(hydro_s, {style: hydrosStyle}).addTo(hydro);
        L.geoJson(hydro_l, {style: hydrolStyle}).addTo(hydro);

    </script>
</body>

Bạn không cần phải "đặt" chúng vào một nhóm lớp ...

— fgcartographix
nguồn

hoàn hảo! đây là những gì tôi đang tìm kiếm!

— bailey

1

bằng cách sử dụng nhà phát triển web Fireorms cho firefox Tôi nhận được "ReferenceError: usStates không được xác định" "(L.geoJson (usStates) .addTo (map);" Tôi đã tham chiếu tệp như bạn đã hiển thị <script src="usStates.geojson" type="text/javascript"></script>và thêm vào L.geoJson(usStates).addTo(map);cuối mã của mình. ý tưởng?

— bailey

Nó phải là một cái gì đó với src ... Của tôi nằm trong phần đầu của tài liệu (Tôi đã chỉnh sửa câu trả lời của mình để thêm nó hoàn toàn)

— fgcartographix

1

không có biến là cần thiết cho tài liệu tham khảo? Có vấn đề gì khi phần mở rộng tập tin của tôi là .json thay vì .geojson không?

— bailey

2

Đây là một câu trả lời khó hiểu, vì nó yêu cầu bạn xác định các biến hydro_s, hydro_l trong tệp dữ liệu của bạn, về mặt kỹ thuật sẽ làm cho GeoJSON thậm chí không hợp lệ! Xem các câu trả lời khác để biết thêm thông tin ...

— Florian Ledermann

10

sau khi thêm var usStates =vào đầu tệp Geojson của tôi, mã đã hoạt động.

— bailey
nguồn

5

bài viết này giải thích một cách tiếp cận tốt khác lyzidiamond.com/posts/osgeo-august-meeting

— John Gravois

Wayback Machine sao chép bài viết đã đề cập ở trên , vì bản gốc đã bị khuất phục bởi linkrot và chúng tôi không thể chỉnh sửa nhận xét của người khác.

— albert