OpenLayers-使用Overpass Turbo API
[英]OpenLayers - Use Overpass Turbo API
问题描述
I want to display markers according to a GeoJSON file and with the code below all is working fine and now I want to use Overpass Turbo. 
我想根据GeoJSON文件显示标记，下面的代码可以正常工作，现在我想使用Overpass Turbo。 I want to display all swimming-pools. 我想展示所有的游泳池。
I use this request : 我使用此请求：
[out:json][timeout:25][bbox:48.64209701511677,6.084880828857422,48.743172495967094,6.318340301513672];
(
node["leisure"][access!="private"][sport="swimming"][name!=''];
node[access!="private"][leisure="swimming_pool"][name!=''];
way["leisure"][access!="private"][sport="swimming"][name!=''];
way[access!="private"][leisure="swimming_pool"][name!=''];
relation["leisure"][access!="private"][sport="swimming"][name!=''];
relation[access!="private"][leisure="swimming_pool"][name!=''];
);
out center;
>;
I use this server : //overpass-api.de/api/ 我使用此服务器：//overpass-api.de/api/
When I want to export this request and generate raw data from Overpass API in order to generate a GeoJSON request (in my case : https://overpass-api.de/api/interpreter?data=%5Bout%3Ajson%5D%5Btimeout%3A25%5D%5Bbbox%3A48.64209701511677%2C6.084880828857422%2C48.743172495967094%2C6.318340301513672%5D%3B%0A%28%0A%20%20node%5B%22leisure%22%5D%5Baccess%21%3D%22private%22%5D%5Bsport%3D%22swimming%22%5D%5Bname%21%3D%27%27%5D%3B%0A%20%20node%5Baccess%21%3D%22private%22%5D%5Bleisure%3D%22swimming_pool%22%5D%5Bname%21%3D%27%27%5D%3B%0A%20%20way%5B%22leisure%22%5D%5Baccess%21%3D%22private%22%5D%5Bsport%3D%22swimming%22%5D%5Bname%21%3D%27%27%5D%3B%0A%20%20way%5Baccess%21%3D%22private%22%5D%5Bleisure%3D%22swimming_pool%22%5D%5Bname%21%3D%27%27%5D%3B%0A%20%20relation%5B%22leisure%22%5D%5Baccess%21%3D%22private%22%5D%5Bsport%3D%22swimming%22%5D%5Bname%21%3D%27%27%5D%3B%0A%20%20relation%5Baccess%21%3D%22private%22%5D%5Bleisure%3D%22swimming_pool%22%5D%5Bname%21%3D%27%27%5D%3B%0A%29%3B%0Aout%20center%3B 当我想导出此请求并从Overpass API生成原始数据以生成GeoJSON请求时（在我的情况下： https ://overpass-api.de/api/interpreter?data=%5Bout%3Ajson%5D%5Btimeout ％3A25％5D％5Bbbox％3A48.64209701511677％2C6.084880828857422％2C48.743172495967094％2C6.318340301513672％5D％3B％0A％28％0A％20％20node％5B％22leisure％22％5D％5Baccess％21％3D ％22private％22％5D％5Bsport％3D％22swimming％22％5D％5Bname％21％3D％27％27％5D％3B％0A％20％20node％5Baccess％21％3D％22Brivate％22％5D％5Bleisure ％3D％22swimming_pool％22％5D％5Bname％21％3D％27％27％5D％3B％0A％20％20way％5B％22leisure％22％5D％5Baccess％21％3D％22private％22％5D％5Bsport ％3D％22swimming％22％5D％5Bname％21％3D％27％27％5D％3B％0A％20％20way％5Baccess％21％3D％22private％22％5D％5Bleisure％3D％22swimming_pool％22％5D ％5Bname％21％3D％27％27％5D％3B％0A％20％20lation％5B％22leisure％22％5D％5Baccess％21％3D％22private％22％5D％5Bsport％3D％22swimming％22％5D ％5Bname％21％3D％27％27％5D％3B％0A％20％20lation％5Baccess％21％3D％22private％22％5D％5Bleisure％3D％22swimming_pool％22％5D％5Bname％21％3D％27 ％27％5D％3B％0A％29％3B％0Aout％20center％3B %0A%3E%3B ) ％0A％3E％3B ）
I want to replace my local GeoJSON file by the generated API but I'm getting this error : "Uncaught TypeError: (0 , Sq[a.type]) is not a function" 我想用生成的API替换本地GeoJSON文件，但出现此错误：“ Uncaught TypeError：（0，Sq [a.type]）不是一个函数”
var sourceLayer = new ol.source.Vector({
url: 'generated_url',
format: new ol.format.GeoJSON()
});
Do you have any idea ? 你有什么主意吗 ？
The code : 编码 ：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Map</title>
<link rel="stylesheet" href="ol/ol.css">
<link rel="stylesheet" href="ol/ol3-layerswitcher.css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="ol/ol.js"></script>
<script src="ol/ol3-layerswitcher.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="sidebar/css/ol3-sidebar.css" />
<script src="sidebar/js/ol3-sidebar.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
</head>
<body>
<div id="map" class="map"></div>
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
</div>
<script>
//Fonds de carte
var layer1 = new ol.source.TileWMS({
url: '...',
params: {'LAYERS': '...', 'FORMAT': 'image/png'},
});
//other layers
//Pictogrammes
var piscine = new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'image/sports-piscine.png'
}))
});
//Marqueurs
var sourceLayer = new ol.source.Vector({
url: '...piscines.json',
format: new ol.format.GeoJSON()
});
var vectorLayer = new ol.layer.Vector({
source: sourceLayer
});
var view = new ol.View({ //paramètres de la map
center: [xxx, xxx],
minZoom: 11,
maxZoom: 19,
zoom: 13
});
//Map
var map = new ol.Map({
layers: [new ol.layer.Group({
title: 'Menu1',
layers: [
new ol.layer.Tile({
title: 'layer1',
source: layer1,
type: 'base'
}),
new ol.layer.Tile({
title: 'layer2',
source: layer2,
type: 'base',
visible: false
})
]
}),
new ol.layer.Group({
title: 'Menu2',
layers: [
new ol.layer.Tile({
title: 'layer3',
source: layer3,
format: new ol.format.WFS(),
visible: false
})
]
}),
],
target: 'map',
view: view
});
map.addControl(vectorLayer);
var sidebar = new ol.control.Sidebar({ element: 'sidebar', position: 'left' });
map.addControl(sidebar);
map.addControl(new ol.control.LayerSwitcher());
var markers = function style(feature, resolution) {
if (feature.get('name')!=null) {
return piscine;
} else {
return null;
}
}
vectorLayer.setStyle(markers);
// Popup
var element = document.getElementById('popup');
var popup = new ol.Overlay({
element: element,
autoPan: true,
offset: [0, -30]
});
map.addOverlay(popup);
var content_element = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
closer.onclick = function() {
popup.setPosition(undefined);
closer.blur();
return false;
};
map.on('click', function(evt){
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature) {
return feature;
});
if (feature) {
var geometry = feature.getGeometry();
var coord = geometry.getCoordinates();
if(feature.get('name')!=null) {
var content = '<center><h2>' + feature.get('name') + '</h2></center>' + '<br>';
} else {
var content = '<h5>' + 'No informations' + '</h5>';
}
if(feature.get('addr:street')!=null) {
content += '<h5>' + '<i>Adress : </i>' + feature.get('addr:street') + '</h5>';
}
if(feature.get('phone')!=null) {
content += '<h5>' + '<i>Phone number : </i>' + feature.get('phone') + '</h5>';
}
if(feature.get('website')!=null) {
content += '<h5>' + '<i>Website : </i>' + '</h5>' + '<p>' + feature.get('website') + '</p>';
}
content_element.innerHTML = content;
popup.setPosition(coord);
}
});
map.on('pointermove', function(e) {
if (e.dragging) {
return;
};
var pixel = map.getEventPixel(e.originalEvent);
var hit = map.hasFeatureAtPixel(pixel);
map.getViewport().style.cursor = hit ? 'pointer' : '';
});
</script>
</body>
</html>
1 个解决方案
解决方案1
1 已采纳 2018-05-11 09:26:04
The new ol.format.GeoJSON() can only fail. new ol.format.GeoJSON()只能失败。
It's simply because OverPass API does not return a GeoJSON but a JSON format slightly different to match more or less the OSM XML storage (details about this JSON format at http://overpass-api.de/output_formats.html#json ) 这仅仅是因为OverPass API不会返回GeoJSON，而是JSON格式略有不同，以匹配或多或少的OSM XML存储（有关此JSON格式的详细信息，请参见http://overpass-api.de/output_formats.html#json ）。
You can find a demo doing the job you expect centered on the place you get the data. 您可以找到一个演示示例 ，它以获取数据的位置为中心，完成了您期望的工作。
You will see I've used an ol.loadingstrategy.all (where only one call is made to get the data) but I've also documented ol.loadingstrategy.bbox if you need to make call to Overpass API depending of the extent. 您将看到我使用了ol.loadingstrategy.all （仅进行一次调用来获取数据），但是如果您需要根据程度对Overpass API进行调用，我还将记录ol.loadingstrategy.bbox 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.