กำลังโหลดไฟล์ GeoJSON ภายนอกลงในแผนที่ Leaflet หรือไม่

53

ฉันต้องการโหลดไฟล์ geoJSON (polygon) ลงในแผนที่แผ่นพับของฉัน ฉันเคยเห็นตัวอย่างที่ geoJSON ถูกฝังลงในรหัส javascript แต่ฉันไม่พบตัวอย่างใด ๆ ที่แสดงให้เห็นว่ามันทำงานอย่างไรกับไฟล์ภายนอก

<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

— สวนหย่อม
แหล่งที่มา

ลากและวาง geojson ไปยังgeojson.io

— Mapperz

@Mapperz OP ไม่ได้ถามเกี่ยวกับวิธีการวางเนื้อหาของเนื้อหา geojson ลงในสคริปต์

— Dave-Evans

36

ดูที่ Leaflet-Ajax มันปรับปรุงทุกอย่าง จะให้คะแนน Neogeomat เพื่อพูดถึงมัน

รับสคริปต์ที่นี่ ( github repo ) และเพิ่มไว้ในส่วนหัวของคุณ:

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

จากนั้นเป็นเรื่องของการอัปโหลดด้วยชื่อไฟล์

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

แก้ไขไปข้างหน้าตรงจริงๆและมันใช้งานได้ ใช่แล้ว

— FredFury
แหล่งที่มา

26

คุณสามารถใช้ jquery Ajax เพื่อโหลดข้อมูลและเพิ่มได้

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() {});

หรือคุณสามารถใช้ปลั๊กอิน leaflet-ajax

— neogeomat
แหล่งที่มา

14

นี่คือวิธีการแก้ปัญหาขั้นต่ำของฉันวานิลลา js ดูสิไม่ต้อง jquery สำหรับการโทรด่วน ajax ไปยังไฟล์

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
แหล่งที่มา

ขอบคุณสำหรับตัวอย่าง - ฉันลบnewคีย์เวิร์ดสำหรับgeoJSONฟังก์ชั่นจากโรงงาน แต่มีข้อผิดพลาด CORS พร้อมกับบรรทัด setRequestHeader ในนั้นลบออกและทำงานได้ดี (ต้องตั้งค่าบางอย่างในเซิร์ฟเวอร์ของฉัน)

— Brian Burns

ให้ฉันข้อผิดพลาดที่XML Parsing Error: not well-formed Line Number 1, Column 1:เพราะข้อมูลเป็น geojson ทำไมมันถึงพยายามแยกมันเป็น XML? ฉันไม่เข้าใจปัญหา แต่ฉันต้องการนำเข้าข้อมูลโดยไม่มี Ajax

— Aaron Bramson

@AaronBramson ได้ลองอีกครั้ง นี่เป็นรหัสบิตเก่าที่ฉันทำ ฉันควรจะตั้งค่า responseType และใช้การตอบสนองที่ไม่แยกวิเคราะห์ ResponseText เพิ่งอัปเดตข้อมูลโค้ด

— Dennis Bauszus

ใช่มันเยี่ยมมาก! มันทำงานนอกกรอบโดยไม่ต้องมีแพ็คเกจภายนอกเพิ่มเติมและไม่ต้องแก้ไขไฟล์ข้อมูล นี่เป็นคำตอบที่ชัดเจนที่สุด

— Aaron Bramson

11

ในองค์ประกอบส่วนหัวคุณอ้างอิงไฟล์ของคุณ:

    <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>

แล้วในร่างกาย:

<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>

คุณไม่จำเป็นต้อง "วาง" ไว้ในกลุ่มเลเยอร์ ...

— fgcartographix
แหล่งที่มา

ที่สมบูรณ์แบบ! นี่คือสิ่งที่ฉันกำลังมองหา!

— bailey

1

ใช้นักพัฒนาเว็บ Firebug สำหรับ firefox ฉันได้รับ "ReferenceError: usStates ไม่ได้ถูกกำหนด" "(L.geoJson (usStates) .addTo (map);" ฉันอ้างอิงไฟล์เช่นคุณแสดง<script src="usStates.geojson" type="text/javascript"></script>และเพิ่มL.geoJson(usStates).addTo(map);ที่ด้านล่างของรหัสของฉัน ความคิด?

— bailey

มันจะต้องมีบางสิ่งบางอย่างกับ src ... ของฉันอยู่ในหัวของเอกสาร (ฉันแก้ไขคำตอบของฉันเพื่อเพิ่มมันอย่างสมบูรณ์)

— fgcartographix

1

ไม่มีตัวแปรที่จำเป็นสำหรับการอ้างอิง? ไฟล์สำคัญของฉันคือ. json แทนที่จะเป็น. geojson หรือไม่

— bailey

2

นี่เป็นคำตอบที่สับสนเนื่องจากคุณต้องกำหนดตัวแปร hydro_s, hydro_l ในไฟล์ข้อมูลของคุณซึ่งในทางเทคนิคแล้วจะทำให้ GeoJSON ไม่ถูกต้อง! ดูคำตอบอื่น ๆ สำหรับข้อมูลเพิ่มเติม ...

— Florian Ledermann

10

หลังจากเพิ่มvar usStates =ไปยังด้านบนของไฟล์ geojson ของฉันรหัสทำงาน

— สวนหย่อม
แหล่งที่มา

5

บทความนี้อธิบายอีกวิธีที่ดีlyzidiamond.com/posts/osgeo-august-meeting

— John Gravois

สำเนา Wayback Machine ของบทความที่กล่าวถึงข้างต้นเนื่องจากต้นฉบับได้ยอมจำนนต่อ linkrot และเราไม่สามารถแก้ไขความคิดเห็นของผู้อื่นได้

— อัลเบิร์