使用来自外部的传单解析 GeoJSON API

Question

我正在尝试使用外部 API 来检索 GeoJSON 数据并最终在地图上显示数据。我正在为地图使用传单库，我面临的问题是我从 API 获得的数据似乎很好（即，如果我从 console.log 获取数据然后使用它直接在 "L.geoJson(WHAT TO INPUT HERE)" 中它可以工作）但是出于某种原因，如果我尝试使用对象本身它就不起作用。

                var map = L.map('map').setView([48.85, 2.35], 13);
                var stamenLayer = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
                  attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.'
                }).addTo(map);

                function reqListener () {
                  console.log(this.response);
                }

                var oReq = new XMLHttpRequest();
                oReq.addEventListener("load", reqListener);
                oReq.open("GET", "http://dataratp.opendatasoft.com/api/records/1.0/download?dataset=liste-des-commerces-de-proximite-agrees-ratp&rows=100&format=geojson");
                oReq.send();
                L.geoJson(**WHAT TO INPUT HERE**).addTo(map);

不太确定是什么导致了问题，因为数据看起来不错（我在 http://geojsonlint.com/ 上测试过）。

感谢您的帮助，朱利安

Answer 1

您收到的数据类型是字符串。 L.GeoJSON 需要一个 GeoJSON 对象。您可以使用 JSON.parse 方法将字符串转换为对象：

The JSON.parse() method parses a string as JSON.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

L.geoJson(JSON.parse(this.response)).addTo(map);

接下来您需要了解 XMLhttpRequest 是异步的。请参阅：Easy to understand definition of "asynchronous event"? 简而言之，当调用 L.GeoJSON 时，oReq.send 可能尚未准备好。这就是 eventlistener 发挥作用的地方。它在 oReq.send 完成接收时调用 reqListener 方法。您需要在 reqListener 方法中创建 L.GeoJSON 层，如下所示：

function reqListener () {
    L.geoJson(JSON.parse(this.response)).addTo(map);
}

工作示例：http://plnkr.co/edit/ODe622?p=preview

使用来自外部的传单解析 GeoJSON API

Parsing GeoJSON with leaflet from an external API

javascript

api

json

geojson

leaflet