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

Question

我正在尝试使用外部 API 来检索 GeoJSON 数据并最终在 map 上显示数据。我正在为 map 使用传单库，我面临的问题是从这个 API 获取的数据似乎很好(即，如果我从 console.log 获取数据，然后直接在“L.log”中使用它)。 geoJson(在这里输入什么)"它可以工作)，但由于某种原因，如果我尝试使用对象本身，它就不起作用。

                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 可能尚未准备好。这就是事件监听器的用武之地。当 oReq.send 完成接收时，它会调用 reqListener 方法。您需要在 reqListener 方法中创建 L.GeoJSON 层，如下所示:

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

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