Question

我想列出Mapbox gridLayer中视口中用户可见的所有元素。

Mapbox网站上有一个名为“Listing markers in view”的优秀示例。它显示featureLayer中浏览器视图中的所有标记。

我想创建类似的东西，但使用gridLayer代替。（gridLayer是在TileMill中创建的）

以下是使用非工作“入站”代码版本的数据的示例： http://jsfiddle.net/bfab/uSLVw/1/

作为参考，gridLayer中有一个变量（从UTFGrid中的TileMill传递），名为“{{{Magnitude}}}”我想列出用户看到的每个地震实例，以及将其添加到示例左下角的列表中。我正在尝试使用的函数是gridLayer.getData（latlng，callback）。

以下是无效的代码片段：

    map.on('move', function() {

        // Construct an empty list to fill with gridLayer elements.
        var inBounds = [],

        // Get the map bounds - the top-left and bottom-right locations.
        bounds = map.getBounds();

        // For each part of the grid, consider whether 
        // it is currently visible by comparing with the current map bounds.    
        // This is what fails....
        myGridLayer.getData(bounds,function(earthquake){
            inBounds.push(earthquake.Magnitude);
        });

        // Display a list of markers.
        document.getElementById('coordinates').innerHTML = inBounds.join('\n');
    });

如果我犯了一个简单的错误，请道歉......

Answer 1

实际上你不能（至少不容易）

1 /你误解了gridlayer上的getData函数

第一个parm不是边界，而是位置latlng
在回调中使用此功能时（例如onclick），只有在点击其中一个圈子时才会获得数据，如果没有，则会得到未定义的数据）。数据不是标记列表，而是地震信息（例如{DateTime：＆＃34; 2014-04-26T16：59：15.710 + 00:00＆＃34;，幅度：3.9}）
```
myGridLayer.getData(event.latlng, function(data) {
    console.log(data);
    // if clicked on a marker: data is defined 
    // e.g. Object {DateTime: "2014-04-26T16:59:15.710+00:00", Magnitude: 3.9} 
});
```

http://jsfiddle.net/FranceImage/uSLVw/11/

2 /使用gridlayer时，在标记方面进行思考并不容易，因为在加载切片时标记已经是图像的一部分：

http://a.tiles.mapbox.com/v3/bfab.i4nm0adm/3/0/2.png

在一些同时加载的javascript中描述了交互

http://a.tiles.mapbox.com/v3/bfab.i4nm0adm/3/0/2.grid.json

如何列出用户视图中的Mapbox gridLayer元素？

1 个答案: