OpenLayers

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%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%0A%3E%3B）

我想用生成的 API 替换我的本地 GeoJSON 文件，但我收到此错误："Uncaught TypeError: (0 , Sq[a.type]) is not a function"

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 不是 return GeoJSON 而是 JSON 格式略有不同以匹配或多或少的 OSM XML存储（有关此 JSON 格式的详细信息位于 http://overpass-api.de/output_formats.html#json）

您会发现 a demo 以获取数据的位置为中心完成您期望的工作。

你会看到我使用了 ol.loadingstrategy.all（只调用一次来获取数据），但我还记录了 ol.loadingstrategy.bbox 如果你需要调用 Overpass API 取决于程度。

OpenLayers - 使用立交桥 Turbo API

OpenLayers - Use Overpass Turbo API

javascript

overpass-api