Я хочу отображать маркеры в соответствии с файлом GeoJSON, и с приведенным ниже кодом все работает нормально, и теперь я хочу использовать Overpass Turbo. Я хочу отобразить все бассейны.
Я использую этот запрос:
[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/
Когда я хочу экспортировать этот запрос и сгенерировать необработанные данные из API Overpass, чтобы сгенерировать запрос 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%0A2%D25%28%0A%20%205BAccess%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%5Bleasure%3D%22swimming_pool%22%5D%5Bname%21%3D%27%27%5D%3B%0A%20%20way%5B%22leasure%22%5D%5BAccess%21%3D%22private%22%5D%5Bспорт%3D%22плавание%22%5D%5Bназвание%21%3D%27%27%5D%3B%0A%20%20way%5Baccess%21%3D%22частное%22%5D%5Bleasure%3D%22swimming_pool%22%5D%5Bname%21%3D%27%27%5D%3B%0A%20%20отношения%5B%22досуг%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%0A%3E%3B)
Я хочу заменить свой локальный файл GeoJSON сгенерированным API, но получаю эту ошибку: «Uncaught TypeError: (0, Sq[a.type]) не является функцией»
var sourceLayer = new ol.source.Vector({
url: 'generated_url',
format: new ol.format.GeoJSON()
});
Есть ли у вас какие-либо идеи ?
Код :
<!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>
