如何在Openlayers中突出显示乒乓球场所? [英] How to highlight table tennis places in Openlayers?

问题描述

我想突出显示ol中所有的乒乓球场所.该标记为leisure = table_tennis_table，我知道可以使用ol.style来实现.

I want to highlight all table tennis places in ol. The tag is leisure=table_tennis_table and I know there is a possibility to do it with ol.style.

请帮助

我通过Overpass API获得了osm层.我在地图上实现了它，但没有任何改变.我仍然看不到我的乒乓球席位.

I have my osm layer via Overpass API. I implemented it to the map but nothing has changed. I still dont see my table tennis places.

var osm = new ol.layer.Tile({
          source: new ol.source.OSM()
});                                                                     
var tables = new ol.layer.Tile({                                    
           source:  new ol.source.XYZ ({ url: 'interpreter.osm', }) });   
var map = new ol.Map({
          controls: ol.control.defaults().extend([
          new ol.control.ScaleLine(),
          new ol.control.ZoomSlider()
    ]),
layers: [tables,osm],
loadTilesWhileAnimating: true,
view: new ol.View({
    center: ol.proj.fromLonLat([13.413215,52.521918]),
    zoom: 13,
    maxZoom : 18,
    minZoom: 2
  }),

target: 'mymap'

});

推荐答案

基于此OpenLayers示例 https://openlayers.org/en/v4.6.5/examples/vector-osm.html

Based on this OpenLayers example https://openlayers.org/en/v4.6.5/examples/vector-osm.html

大多数标记为sport=table_tennis的样式为绿色，leisure=table_tennis_table的样式为红色，但我看不到任何东西.

Most are tagged sport=table_tennis is styled in green, leisure=table_tennis_table is styled red but I cannot see any.

  var map;

  var styles = {
    'sport': {
      'table_tennis': new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'black',
          width: 2
        }),
        fill: new ol.style.Fill({
          color: 'lime'
        }),
        image: new ol.style.Circle({
          radius: 8,
          fill: new ol.style.Fill({
            color: 'lime'
          }),
          stroke: new ol.style.Stroke({
            color: 'black',
            width: 2
          })
        })
     })
    },
    'leisure': {
      'table_tennis_table': new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'black',
          width: 2
        }),
        fill: new ol.style.Fill({
          color: 'red'
        }),
        image: new ol.style.Circle({
          radius: 8,
          fill: new ol.style.Fill({
            color: 'red'
          }),
          stroke: new ol.style.Stroke({
            color: 'black',
            width: 2
          })
        })
      })
    }
  };

  var vectorSource = new ol.source.Vector({
    format: new ol.format.OSMXML(),
    loader: function(extent, resolution, projection) {
      var epsg4326Extent =
          ol.proj.transformExtent(extent, projection, 'EPSG:4326');
      var client = new XMLHttpRequest();
      client.open('POST', 'https://overpass-api.de/api/interpreter');
      client.addEventListener('load', function() {
        var features = new ol.format.OSMXML().readFeatures(client.responseText, {
          featureProjection: map.getView().getProjection()
        });
        vectorSource.addFeatures(features);
      });
      var query = '(node(' +
          epsg4326Extent[1] + ',' + epsg4326Extent[0] + ',' +
          epsg4326Extent[3] + ',' + epsg4326Extent[2] +
          ');rel(bn)->.foo;way(bn);node(w)->.foo;rel(bw););out meta;';
      client.send(query);
    },
    strategy: ol.loadingstrategy.bbox
  });

  var vector = new ol.layer.Vector({
    source: vectorSource,
    style: function(feature) {
      for (var key in styles) {
        var value = feature.get(key);
        if (value !== undefined) {
          for (var regexp in styles[key]) {
            if (new RegExp(regexp).test(value)) {
              return styles[key][regexp];
            }
          }
        }
      }
      return null;
    }
  });

  var raster = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

  map = new ol.Map({
    layers: [raster, vector],
    target: document.getElementById('map'),
    view: new ol.View({
      center: ol.proj.fromLonLat([13.413215,52.521918]),
      maxZoom: 18,
      minZoom: 2,
      zoom: 15
    })
  });

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"></script>
<div id="map" class="map"></div>

这篇关于如何在Openlayers中突出显示乒乓球场所?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！