OpenLayers-使用Overpass Turbo API

Question

我想根据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/

当我想导出此请求并从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 ）

我想用生成的API替换本地GeoJSON文件，但出现此错误：“ 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>

Answer 1

new ol.format.GeoJSON()只能失败。

这仅仅是因为OverPass API不会返回GeoJSON，而是JSON格式略有不同，以匹配或多或少的OSM XML存储（有关此JSON格式的详细信息，请参见http://overpass-api.de/output_formats.html#json ）。

您可以找到一个演示示例，它以获取数据的位置为中心，完成了您期望的工作。

您将看到我使用了ol.loadingstrategy.all （仅进行一次调用来获取数据），但是如果您需要根据程度对Overpass API进行调用，我还将记录ol.loadingstrategy.bbox 。

OpenLayers-使用Overpass Turbo API

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-05-11 09:26:04

OpenLayers-使用Overpass Turbo API

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-05-11 09:26:04

解决方案1
1 已采纳 2018-05-11 09:26:04