代码之家 › 专栏 › 技术社区 › Zelphir Kaltstahl

如何从jQuery中使用OverpassAPI获取OSM数据?

overpass-api openstreetmap ajax jquery javascript

Zelphir Kaltstahl · 技术社区 · 10 年前

我有以下代码用于从OSM请求地图数据:

$.ajax({
    url:
        'https://www.overpass-api.de/api/interpreter?' + 
        '[out:json][timeout:60];' + 
        'area["boundary"~"administrative"]["name"~"Berlin"];' + 
        'node(area)["amenity"~"school"];' + 
        'out;',
    dataType: 'json',
    type: 'GET',
    async: true,
    crossDomain: true
}).done(function() {
    console.log( "second success" );
}).fail(function(error) {
    console.log(error);
    console.log( "error" );
}).always(function() {
    console.log( "complete" );
});

当我在Overpass Turbo上测试请求时,它运行时没有任何问题,但当在JavaScript中预先形成此请求时,我总是会收到错误:

"<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>  <meta http-equiv="content-type" content="text/html; charset=utf-8" lang="en"/>  <title>OSM3S Response</title></head><body><p>The data included in this document is from www.openstreetmap.org. The data is made available under ODbL.</p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: Key expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: '!', '~', '=', '!=', or ']'  expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: Value expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: ',' or ']' expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: Key expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: '!', '~', '=', '!=', or ']'  expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: Value expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: ',' or ']' expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: static error: For the attribute "k" of the element "has-kv" the only allowed values are non-empty strings. </p><p><strong style="color:#FF0000">Error</strong>: line 1: static error: For the attribute "k" of the element "has-kv" the only allowed values are non-empty strings. </p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: Key expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: '!', '~', '=', '!=', or ']'  expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: Value expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: ',' or ']' expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: static error: For the attribute "k" of the element "has-kv" the only allowed values are non-empty strings. </p></body></html>"

我提出请求的方式肯定有问题,但我想不出有什么问题。

如何通过JavaScript获取柏林所有学校的位置?

我也尝试过使用 $.getJSON() 但这对我也不起作用。

2 回复 | 直到 10 年前

mmd 10 年前

您在示例中使用的URL似乎不完整:它应该是。。。 interpreter?data=[out:json] ……即 数据= 零件丢失。

作为参考,您也可以将您的查询放在天桥涡轮增压器中,只需单击导出->直接从OverpassAPI获取原始数据,以获取工作URL。也许可以先用wget尝试一下,如果效果不错,请将URL放在Javascript代码中。

也许您还想研究一下天桥turbo是如何(基于POST)调用天桥API的:请参见 https://github.com/tyrasd/overpass-turbo/blob/master/js/overpass.js#L581 详细信息。

NVRM 2 年前

没有图书馆,我们必须 POST 在中格式化的查询 OverpassQL .

本示例将餐厅检索到一个相当小的边界框中 左下/右上 48.865,2.25,48.9,2.27 在巴黎的某个地方。

(async () => {
  const api = await fetch('https://www.overpass-api.de/api/interpreter?', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body:"[out:json];node(48.865,2.25,48.9,2.27)[amenity=restaurant];out;"
  });
  const answer = await api.json();
  console.log(answer);
})()

List of amenity keys 匹配最常见的POI 兽医停车药房 ...

这个API很容易过载,我们必须在小范围内传递,最好使用超时。意外错误很常见,我们必须在应用程序中处理它们。

但警告错误响应不是JSON格式,而是XML格式,可能需要对 XMLparser .

当量:

错误:运行时错误:open64:0成功/osm3s_v0.7.58_osm_base Dispatcher_Client::request_read_and_idx::超时。服务器是可能太忙了,无法处理您的请求。

overpassQL语言中的复杂查询示例 https://wiki.openstreetmap.org/wiki/Overpass_API/Overpass_API_by_Example