Openlayer V4：如何在单击时使GracticluevGrid或tileGrid可选

Question

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

我能够获得缩放级别，网格，坐标，范围等，但单击时无法获得可选择的网格。我还在地图上添加了选择性交互，但它无法正常工作。

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

以下是代码：

WITH RECURSIVE

单击时的例外输出：

请提供任何帮助吗？

Answer 1

您无法选择经纬网格或tiledebug，因为它们只是绘制（使用postcompose完成）而不是真实的地图元素。但是，您已经了解了如何获取切片范围，因此只需使用它并在额外的图层上绘制一个LineString（或多边形）（在下面的示例中为let all_recipe= [] for(let i =0; i<result.chefs.email.length; ++i) { await chefSchema['chef'].findOne({"email":result.chefs.email[i]},"recipe") .then(recipes=>{ if(recipes!=null) { if(recipes.recipe.length!=0) { all_recipe.push(recipes.recipe); } } console.log("Async Test1") }).catch(err=> { console.log(err); return res.status(500).json({ message:"Finding Chef Database Error!", error: err }); }); } console.log("Async Test2") console.log(all_recipe); return res.status(200).json(all_recipe); ）。

＆＃13;

＆＃13;

highlightVector

＆＃13;

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] ],
    ])
  }));
});

＆＃13;

＆＃13;

＆＃13;