Javascript OpenLayers-使用Overpass Turbo API
我想根据GeoJSON文件显示标记,下面的代码一切正常,现在我想使用Overpass Turbo。我想展示所有的游泳池 我使用此请求:Javascript OpenLayers-使用Overpass Turbo API,javascript,openlayers,overpass-api,Javascript,Openlayers,Overpass Api,我想根据GeoJSON文件显示标记,下面的代码一切正常,现在我想使用Overpass Turbo。我想展示所有的游泳池 我使用此请求: [out:json][timeout:25][bbox:48.64209701511677,6.084880828857422,48.743172495967094,6.318340301513672]; ( node["leisure"][access!="private"][sport="swimming"][name!='']; node[acce
[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;
>;
我使用这个服务器://overpass-api.de/api/
当我想要导出此请求并从Overpass API生成原始数据以生成GeoJSON请求时(在我的示例中:)
我想用生成的API替换我的本地GeoJSON文件,但我遇到了以下错误:“uncaughtTypeError:(0,Sq[a.type])不是函数”
你知道吗
守则:
<!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>
地图
//点菜坊
var layer1=新ol.source.TileWMS({
url:“…”,
参数:{'LAYERS':'…','FORMAT':'image/png'},
});
//其他层
//象形图
var piscine=新的ol.style.style({
图片:新ol.style.Icon(({
主播:[0.5,46],
主播:“分数”,
anchorYUnits:'像素',
src:'image/sports piscine.png'
}))
});
//侯爵
var sourceLayer=new ol.source.Vector({
url:“…piscines.json”,
格式:new ol.format.GeoJSON()
});
var vectorLayer=新ol.layer.Vector({
来源:sourceLayer
});
var view=新的ol.view({//paramètres de la map
中心:[xxx,xxx],
minZoom:11,
maxZoom:19,
缩放:13
});
//地图
var map=新ol.map({
图层:[新建ol.layer.Group({
标题:“菜单1”,
图层:[
新ol.layer.Tile({
标题:“第1层”,
资料来源:第1层,
类型:“基本”
}),
新ol.layer.Tile({
标题:“第二层”,
资料来源:第二层,
类型:'base',
可见:假
})
]
}),
新ol.layer.Group({
标题:“Menu2”,
图层:[
新ol.layer.Tile({
标题:“第三层”,
资料来源:第3层,
格式:新建ol.format.WFS(),
可见:假
})
]
}),
],
目标:“地图”,
视图:视图
});
map.addControl(矢量层);
var sidebar=newol.control.sidebar({element:'sidebar',position:'left'});
map.addControl(侧栏);
addControl(新的ol.control.LayerSwitcher());
变量标记=功能样式(特征、分辨率){
if(feature.get('name')!=null){
返鱼;
}否则{
返回null;
}
}
矢量层设置方式(标记);
//弹出窗口
var元素=document.getElementById('popup');
var popup=新ol.Overlay({
元素:元素,
自动扫描:是的,
偏移量:[0,-30]
});
map.addOverlay(弹出窗口);
var content_element=document.getElementById('popup-content');
var closer=document.getElementById('popup-closer');
closer.onclick=函数(){
popup.setPosition(未定义);
closer.blur();
返回false;
};
映射打开('click',函数(evt){
var feature=map.forEachFeatureAtPixel(evt.pixel,
功能(特征){
返回特性;
});
如果(功能){
var geometry=feature.getGeometry();
var coord=geometry.getCoordinates();
if(feature.get('name')!=null){
var content=''+feature.get('name')++'
;
}否则{
var content=''+'无信息'+'';
}
if(feature.get('addr:street')!=null){
content+=''+'地址:'+feature.get('addr:street')+'';
}
if(feature.get('phone')!=null){
content+=''+'电话号码:'+功能。get('Phone')+'';
}
if(feature.get('website')!=null){
内容+=''+'网站:'+'+''+功能。获取('Website')+'';
}
content\u element.innerHTML=内容;
弹出设置位置(坐标);
}
});
map.on('pointermove',函数(e){
如果(如拖动){
返回;
};
var pixel=map.getEventPixel(例如originalEvent);
var hit=map.hasFeatureAtPixel(像素);
map.getViewport().style.cursor=点击“指针”:“”;
});
新的ol.format.GeoJSON()只能失败
这仅仅是因为OverpassAPI不返回GeoJSON,而是返回与OSM XML存储或多或少匹配的JSON格式(关于此JSON格式的详细信息,请参阅)
你可以发现做你期望的工作集中在你获得数据的地方
您将看到我使用了ol.loadingstrategy.all
(其中仅进行了一次调用以获取数据),但如果您需要根据范围调用Overpass API,我还记录了ol.loadingstrategy.bbox
<!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>