Fatal编程技术网
  • openlayers/
  • Openlayers Openlayer V4：如何使GracticluevGrid或tileGrid在单击时可选择

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

openlayers

Openlayers Openlayer V4：如何使GracticluevGrid或tileGrid在单击时可选择,openlayers,Openlayers,我有Openlayer Canvas TIle源代码TiledBug和GracticlueGrid，使用setMap方法在客户端显示网格。即创建了两个BaseLayer Canvasile和GracticlueGrid 我能够获得缩放级别、网格、坐标、范围等，但一次单击就无法获得可选网格。我还在地图上添加选择交互，但它不起作用 下面是Openlayer示例链接 及 代码如下： <!DOCTYPE html> <html> <head> <ti

我有Openlayer Canvas TIle源代码TiledBug和GracticlueGrid，使用setMap方法在客户端显示网格。即创建了两个BaseLayer Canvasile和GracticlueGrid

我能够获得缩放级别、网格、坐标、范围等，但一次单击就无法获得可选网格。我还在地图上添加选择交互，但它不起作用

下面是Openlayer示例链接 及

代码如下：

<!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>
单击时的例外输出：

请提供相同的帮助？

您不能选择分划网格或平铺网格，因为它们仅使用后期合成完成绘制，而不是真实的地图元素。但是，您已经了解了如何获取平铺范围，因此只需使用它并在下面的示例中的额外图层highlightVector上绘制一条线串或多边形即可

const osmTile=新ol.layer.Tile{ 来源：新的ol.source.OSM， 不透明度：0.5 }; const grid=new ol.source.OSM.getTileGrid{ 瓷砖大小：[512，512] }; var grildTile=新的ol.layer.Tile{ 来源：新的ol.source.TileDebug{ tileGrid：网格， 投影：'EPSG:4326' } }; const highlightVector=新ol.source.Vector； const highlightLayer=新ol.layer.Vector{ 资料来源：highlightVector， 风格：新的ol风格{ 笔划：新的ol风格笔划{ 宽度：3， 颜色：[255,0,0,1] } } }; 常量视图=新ol.视图{ 中间：[0,0]， 缩放：2 }; var map=新ol.map{ 图层：[osmTile、grildTile、highlightLayer]， 目标：“地图”， 视图：视图， }; 视图。关于“更改：解决方案”，functionevent{ //缩放更改平铺大小 highlightVector.clear； }; 映射。在“singleclick”上，functionevent{ var z=map.getView.getZoom； var coord=grid.getTileCoordForCoordAndZevent.coord，z； 变量范围=grid.getTileCoordExtentcoord； highlightVector.clear； highlightVector.addFeaturenew ol.Feature{ 几何图形：新ol.geom.LineString[ [范围[0]，范围[1]]， [范围[0]，范围[3]]， [范围[2]，范围[3]]， [范围[2]，范围[1]]， [范围[0]，范围[1]]， ] }; };
你想要得到什么，瓷砖的编号？否。单击后，我想高亮显示或选择瓷砖。例如，在上面的图像中，瓷砖2,1，-2。点击后，它应该是一个亮点。感谢您的回复Dube。我还有一个问题，有没有其他方法可以从shapefile为加拿大西部制作网格？就像这个在缩放级别实现的站点一样，获取带有标记标签的网格和乡镇等。也许可以使用，它可以转换geojson中的shapefile，然后可以与OpenLayers一起使用感谢您的回复。没有Dube，我想要与加拿大西部相关的网格形状文件。@cp8我提到的服务是将shapefile转换为geojson，它不是一个数据提供者。但是如果你需要了解更多的信息，请创建另一个问题好的，谢谢。是的，我在开放数据交换中创建了另一个问题。