leaflet-virtual-grid
所属分类：虚拟化
开发工具：JavaScript
文件大小：0KB
下载次数：0
上传日期：2018-07-04 18:50:05
上 传 者：
sh-1993
说明： Leaflet的轻量级无DOM平铺层，可用于查询具有边界框或中心半径的API，而不是加载t...，
(A lightweight DOM-less tile layer for Leaflet that can be used to query APIs with bounding boxes or center/radius as opposed to loading tiles.)
文件列表:
.travis.yml (268, 2018-07-04)
CHANGELOG.md (1846, 2018-07-04)
LICENSE (748, 2018-07-04)
example.jpg (77765, 2018-07-04)
examples/ (0, 2018-07-04)
examples/class.html (2395, 2018-07-04)
examples/events.html (2149, 2018-07-04)
package-lock.json (249766, 2018-07-04)
package.json (1642, 2018-07-04)
scripts/ (0, 2018-07-04)
scripts/release.sh (956, 2018-07-04)
src/ (0, 2018-07-04)
src/virtual-grid.js (7263, 2018-07-04)
test/ (0, 2018-07-04)
test/virtual-grid.js (2093, 2018-07-04)
# Leaflet Virtual Grid
[![npm version][npm-img]][npm-url]
[![build status][travis-image]][travis-url]
[npm-img]: https://img.shields.io/npm/v/leaflet-virtual-grid.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/leaflet-virtual-grid
[travis-image]: https://img.shields.io/travis/patrickarlt/leaflet-virtual-grid/master.svg?style=flat-square
[travis-url]: https://travis-ci.org/patrickarlt/leaflet-virtual-grid
You can use `new VirtualGrid` to generate simple, cacheable, grids of `L.LatLngBounds` objects you can use to query APIs. This lets you query APIs for smaller units and space and never make a call data in the same area twice.
# Usage with Events
```js
var vg = new VirtualGrid();
// listen for when new cells come into the view for the first time
vg.on("cellcreate", function(e){
console.log(e.type, e);
});
// listen for when cells reenter the view
vg.on("cellenter", function(e){
console.log(e.type, e);
});
// listen for when cells leave the view
vg.on("cellleave", function(e){
console.log(e.type, e);
});
// add the grid to the map
vg.addTo(map);
```
# Usage as a Class
```js
var MyGrid = new VirtualGrid.extend({
createCell: function(bounds, coords){
console.log('create cell', bounds, coords);
},
cellEnter: function(bounds, coords){
console.log('cell enter', bounds, coords);
},
cellLeave: function(bounds, coords){
console.log('cell leave', bounds, coords);
}
})
var thingWithGrid = new MyGrid().addTo(map);
```
# Options
```js
var vg = new VirtualGrid({
cellSize: 512,
updateInterval: 150
});
```
##### `updateInterval`
How often to update the grid. Defaults to `150`
##### `cellSize`
How big each cell is in pixels. Defaults to `512`
# Example
Here is what the grid looks like under the hood...
Each rectangle would represent a call to an API or query to a data source. You would only make one request per cell so you not make repeat calls to areas like requesting all the data in a map view when a user performs a small pan.
# Credit
Most of this code is based on `L.Grid` from https://github.com/Leaflet/Leaflet/commit/670dbaac045c7670ff26198136e440be9c2bb3e5.
近期下载者：
相关文件：
收藏者：