Openlayer V4:How 使 GracticluevGrid 或 tileGrid 可单击选择

Question

我有 Openlayer Canvas TIle 源作为 tileDebug 和 Gracticlue Grid 使用 setMap 方法在客户端显示 Grid Side.Namely 创建了两个 BaseLayer CanvasTile 和 GracticlueGrid。

我能够获得缩放级别、网格、坐标、范围等，但无法在单个上获得 select 可用的网格-click.I我还在添加 select 交互地图，但它不起作用。

我正在关注 Openlayer 示例 link http://openlayers.org/en/latest/examples/canvas-tiles.html 和 https://openlayers.org/en/latest/examples/graticule.html

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>Select Features</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/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="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
     var tileGrid = new ol.layer.Tile({
                source: new ol.source.TileDebug({
                  tileGrid: new ol.source.OSM().getTileGrid({
                    tileSize:[512, 512]
                  }),
                  projection:'EPSG:4326'
                })
        });

      var map = new ol.Map({
        layers: [tileGrid],
        target: 'map',
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });

      map.on('singleclick',function(event){
      var z = map.getView().getZoom();
      var coordinate = event.coordinate;
      var grid = tileGrid.getSource().getTileGrid();

      var coord = grid.getTileCoordForCoordAndZ(coordinate,z);
      var extend = grid.getTileCoordExtent(coord);


      // **select interaction not working on "singleclick"**
      var selectSingleClick = new ol.interaction.Select();
      map.addInteraction(selectSingleClick);

      });


    </script>
  </body>
</html>

单击异常输出：

拜托，有什么帮助吗？

Answer 1

您不能 select 经纬网或 tiledebug，因为它们只是绘画（通过后期合成完成）而不是真实的地图元素。但是，您已经知道如何获取图块范围，所以只需使用它并在额外的图层上绘制一个 LineString（或多边形）（下例中的highlightVector）。

const osmTile = new ol.layer.Tile({
  source: new ol.source.OSM(),
  opacity: 0.5
});

const grid = new ol.source.OSM().getTileGrid({
  tileSize:[512, 512]
});

var grildTile = new ol.layer.Tile({
  source: new ol.source.TileDebug({
    tileGrid: grid,
    projection:'EPSG:4326'
  })
});

const highlightVector = new ol.source.Vector();
const highlightLayer = new ol.layer.Vector({
  source: highlightVector,
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      width: 3,
      color: [255, 0, 0, 1]
    })
  })
});

const view = new ol.View({
  center: [0, 0],
  zoom: 2
});

var map = new ol.Map({
  layers: [osmTile, grildTile, highlightLayer],
  target: 'map',
  view: view,
});


view.on('change:resolution', function(event){
  // zooming changes tile sizes
  highlightVector.clear();
});

map.on('singleclick',function(event){
  var z = map.getView().getZoom();
  var coord = grid.getTileCoordForCoordAndZ(event.coordinate, z);
  var extent = grid.getTileCoordExtent(coord);

  highlightVector.clear();
  highlightVector.addFeature(new ol.Feature({
    geometry: new ol.geom.LineString([
      [ extent[0],extent[1] ],
      [ extent[0],extent[3] ],
      [ extent[2],extent[3] ],
      [ extent[2],extent[1] ],
      [ extent[0],extent[1] ],
    ])
  }));
});

<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/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="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
    <div id="map" class="map"></div>

Openlayer V4:How 使 GracticluevGrid 或 tileGrid 可单击选择

Openlayer V4:How to make GracticluevGrid or tileGrid Selectable on single click

openlayers