要将外部GeoJSON文件加载到Leaflet地图中？

53

我想将geoJSON（多边形）文件加载到我的传单地图中。我已经看到了将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 
— 贝利
source
将geojson拖放到geojson.io
— Mapperz
@ Mapperz，OP并未询问如何将其geojson内容粘贴到脚本中。
— Dave-Evans

Answers:

35

查看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);

确实很简单，它可以正常工作。嗯

— 弗雷德·弗里
source
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插件

— 新基因瘤
source
14

这是我的最小香草js解决方案。看起来不错，快速ajax调用文件不需要jquery。

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）
source
感谢您的示例-我取出了工厂函数的new关键字geoJSON，但是在那里出现setRequestHeader行的CORS错误，因此将其删除并可以正常工作（必须在服务器中进行一些设置）。
— 布赖恩·伯恩斯
给我一个XML Parsing Error: not well-formed错误Line Number 1, Column 1:。好吧，由于数据是geojson，为什么要尝试将其解析为XML？我不明白问题所在，但我想在没有Ajax的情况下导入数据。
— 亚伦·布拉姆森
@AaronBramson再尝试一次。这是我做的相当老的代码。我应该已经设置了responseType并使用了响应而不解析responseText。刚刚更新了代码段。
— 丹尼斯·鲍祖斯
是的，太好了！它开箱即用，不需要任何额外的外部软件包，也不需要编辑数据文件。这显然是最好的答案。
— 亚伦·布拉姆森
11

在head元素中，引用文件：

    <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
source
完善！这就是我想要的！
— bailey 2013年
1
使用Firebug Web开发人员进行Firefox浏览，我得到“ ReferenceError：未定义usStates”“（（L.geoJson（usStates）.addTo（map）;“我引用了您显示的文件<script src="usStates.geojson" type="text/javascript"></script>并将其添加L.geoJson(usStates).addTo(map);到代码的底部。想法吗？
— bailey
它一定是带有src的东西...我的在文档的开头（我编辑了答案以完全添加它）
— fgcartographix 2013年
1
不需要变量供参考吗？我的文件扩展名是.json而不是.geojson没关系吗？
— bailey 2013年
2
这是一个令人困惑的答案，因为它要求您在数据文件中定义变量hydro_s，hydro_l，从技术上讲，这甚至会使GeoJSON无效！欲了解更多信息，请参见其他答案……
— Florian Ledermann
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.