Added event to listen for tile list updates on a layer

2016-09-13 15:23:55 +01:00 · 2016-09-13 15:23:55 +01:00 · c296afef17
commit c296afef17
--- a/examples/tile-events/index.html
+++ b/examples/tile-events/index.html
@ -0,0 +1,18 @@
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
+  <title>Tile Events ViziCities Example</title>
+  <link rel="stylesheet" href="main.css">
+  <link rel="stylesheet" href="../../dist/vizicities.css">
+</head>
+<body>
+  <div id="world"></div>
+
+  <script src="../vendor/three.min.js"></script>
+  <script src="../vendor/TweenMax.min.js"></script>
+  <script src="../../dist/vizicities.min.js"></script>
+
+  <script src="main.js"></script>
+</body>
+</html>
--- a/examples/tile-events/main.css
+++ b/examples/tile-events/main.css
@ -0,0 +1,4 @@
+* { margin: 0; padding: 0; }
+html, body { height: 100%; overflow: hidden;}
+
+#world { height: 100%; }
--- a/examples/tile-events/main.js
+++ b/examples/tile-events/main.js
@ -0,0 +1,25 @@
+// Manhattan
+var coords = [40.739940, -73.988801];
+
+var world = VIZI.world('world', {
+  skybox: false,
+  postProcessing: false
+}).setView(coords);
+
+// Add controls
+VIZI.Controls.orbit().addTo(world);
+
+// CartoDB basemap
+var imageTiles = VIZI.imageTileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
+  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
+});
+
+imageTiles.addTo(world).then(() => {
+  console.log('Added image tile layer to world');
+});
+
+// Will be emitted every time the image layer updates the tile list
+// All tiles in view are sent with each update
+imageTiles.on('tilesList', (tiles) => {
+  console.log(tiles);
+});
--- a/src/layer/tile/TileLayer.js
+++ b/src/layer/tile/TileLayer.js
@ -126,6 +126,9 @@ class TileLayer extends Layer {
        this._tilesPicking.add(tile.getPickingMesh());
      }
    });
+
+    // Emit event notifying of new tiles
+    this.emit('tilesList', this._tileList.map((tile) => tile._tile));
  }

  // Works out tiles in the view frustum and stores them in an array