@antv/l7-layers 2.5.38 → 2.5.42

package/lib/imagetile/models/imagetile.js

@@ -0,0 +1,177 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _l7Core = require("@antv/l7-core");
+
+var _BaseModel2 = _interopRequireDefault(require("../../core/BaseModel"));
+
+var _triangulation = require("../../core/triangulation");
+
+var _Tile = _interopRequireDefault(require("../utils/Tile"));
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var ImageTileFrag = "precision mediump float;\nvoid main() {\n  gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\n}\n";
+var ImageTileVert = "precision highp float;\nuniform mat4 u_ModelMatrix;\nuniform mat4 u_Mvp;\nattribute vec3 a_Position;\n#pragma include \"projection\"\nvoid main() {\n   vec4 project_pos = project_position(vec4(a_Position, 1.0));\n   // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy,0., 1.0));\n   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n      gl_Position = u_Mvp * (vec4(project_pos.xy,0., 1.0));\n   } else {\n      gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy,0., 1.0));\n   }\n}\n";
+
+var ImageTileModel = function (_BaseModel) {
+  (0, _inherits2.default)(ImageTileModel, _BaseModel);
+
+  var _super = _createSuper(ImageTileModel);
+
+  function ImageTileModel() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, ImageTileModel);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "tileLayer", void 0);
+    return _this;
+  }
+
+  (0, _createClass2.default)(ImageTileModel, [{
+    key: "getUninforms",
+    value: function getUninforms() {
+      return {};
+    }
+  }, {
+    key: "tile",
+    value: function tile() {
+      var _this$mapService$getB = this.mapService.getBounds(),
+          _this$mapService$getB2 = (0, _slicedToArray2.default)(_this$mapService$getB, 2),
+          WS = _this$mapService$getB2[0],
+          EN = _this$mapService$getB2[1];
+
+      var NE = {
+        lng: EN[0],
+        lat: EN[1]
+      };
+      var SW = {
+        lng: WS[0],
+        lat: WS[1]
+      };
+      this.tileLayer.calCurrentTiles({
+        NE: NE,
+        SW: SW,
+        tileCenter: this.mapService.getCenter(),
+        currentZoom: this.mapService.getZoom(),
+        minSourceZoom: this.mapService.getMinZoom(),
+        minZoom: this.mapService.getMinZoom(),
+        maxZoom: this.mapService.getMaxZoom()
+      });
+    }
+  }, {
+    key: "initModels",
+    value: function initModels() {
+      var _this2 = this;
+
+      this.layer.zIndex = -999;
+
+      var _ref = this.layer.getLayerConfig(),
+          _ref$resolution = _ref.resolution,
+          resolution = _ref$resolution === void 0 ? 'low' : _ref$resolution,
+          _ref$maxSourceZoom = _ref.maxSourceZoom,
+          maxSourceZoom = _ref$maxSourceZoom === void 0 ? 17 : _ref$maxSourceZoom;
+
+      var source = this.layer.getSource();
+
+      if (source.data.tileurl) {
+        this.tileLayer = new _Tile.default({
+          url: source.data.tileurl,
+          layerService: this.layerService,
+          layer: this.layer,
+          resolution: resolution,
+          maxSourceZoom: maxSourceZoom,
+          crstype: 'epsg3857'
+        });
+        this.tile();
+        var t = new Date().getTime();
+        this.mapService.on('mapchange', function () {
+          var newT = new Date().getTime();
+          var cutT = newT - t;
+          t = newT;
+
+          if (cutT < 16) {
+            return;
+          }
+
+          _this2.tile();
+        });
+      }
+
+      return [this.layer.buildLayerModel({
+        moduleName: 'ImageTileLayer',
+        vertexShader: ImageTileVert,
+        fragmentShader: ImageTileFrag,
+        triangulation: _triangulation.RasterImageTriangulation,
+        primitive: _l7Core.gl.TRIANGLES,
+        depth: {
+          enable: false
+        },
+        blend: this.getBlend()
+      })];
+    }
+  }, {
+    key: "clearModels",
+    value: function clearModels() {
+      this.tileLayer.removeTiles();
+    }
+  }, {
+    key: "buildModels",
+    value: function buildModels() {
+      return this.initModels();
+    }
+  }, {
+    key: "registerBuiltinAttributes",
+    value: function registerBuiltinAttributes() {
+      this.styleAttributeService.registerStyleAttribute({
+        name: 'uv',
+        type: _l7Core.AttributeType.Attribute,
+        descriptor: {
+          name: 'a_Uv',
+          buffer: {
+            usage: _l7Core.gl.DYNAMIC_DRAW,
+            data: [],
+            type: _l7Core.gl.FLOAT
+          },
+          size: 2,
+          update: function update(feature, featureIdx, vertex, attributeIdx) {
+            return [vertex[3], vertex[4]];
+          }
+        }
+      });
+    }
+  }]);
+  return ImageTileModel;
+}(_BaseModel2.default);
+
+exports.default = ImageTileModel;
+//# sourceMappingURL=imagetile.js.map

package/lib/imagetile/models/imagetile.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/imagetile/models/imagetile.ts"],"names":["ImageTileModel","mapService","getBounds","WS","EN","NE","lng","lat","SW","tileLayer","calCurrentTiles","tileCenter","getCenter","currentZoom","getZoom","minSourceZoom","getMinZoom","minZoom","maxZoom","getMaxZoom","layer","zIndex","getLayerConfig","resolution","maxSourceZoom","source","getSource","data","tileurl","Tile","url","layerService","crstype","tile","t","Date","getTime","on","newT","cutT","buildLayerModel","moduleName","vertexShader","ImageTileVert","fragmentShader","ImageTileFrag","triangulation","RasterImageTriangulation","primitive","gl","TRIANGLES","depth","enable","blend","getBlend","removeTiles","initModels","styleAttributeService","registerStyleAttribute","name","type","AttributeType","Attribute","descriptor","buffer","usage","DYNAMIC_DRAW","FLOAT","size","update","feature","featureIdx","vertex","attributeIdx","BaseModel"],"mappings":"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","sourcesContent":["import {\n  AttributeType,\n  gl,\n  IEncodeFeature,\n  ILayer,\n  ILayerPlugin,\n  IModel,\n  IModelUniform,\n  IRasterParserDataItem,\n  IStyleAttributeService,\n  ITexture2D,\n  lazyInject,\n  TYPES,\n} from '@antv/l7-core';\nimport BaseModel from '../../core/BaseModel';\nimport { RasterImageTriangulation } from '../../core/triangulation';\nimport ImageTileFrag from './shaders/imagetile_frag.glsl';\nimport ImageTileVert from './shaders/imagetile_vert.glsl';\n\nimport Tile from '../utils/Tile';\n\ninterface IImageLayerStyleOptions {\n  resolution: string;\n  maxSourceZoom: number;\n}\n\nexport default class ImageTileModel extends BaseModel {\n  public tileLayer: any;\n  public getUninforms(): IModelUniform {\n    return {};\n  }\n\n  // 临时的瓦片测试方法\n  public tile() {\n    const [WS, EN] = this.mapService.getBounds();\n    const NE = { lng: EN[0], lat: EN[1] };\n    const SW = { lng: WS[0], lat: WS[1] };\n    this.tileLayer.calCurrentTiles({\n      NE,\n      SW,\n      tileCenter: this.mapService.getCenter(),\n      currentZoom: this.mapService.getZoom(),\n      minSourceZoom: this.mapService.getMinZoom(),\n      minZoom: this.mapService.getMinZoom(),\n      maxZoom: this.mapService.getMaxZoom(),\n    });\n  }\n\n  public initModels() {\n    // TODO: 瓦片组件默认在最下层\n    this.layer.zIndex = -999;\n    const {\n      resolution = 'low',\n      maxSourceZoom = 17,\n    } = this.layer.getLayerConfig() as IImageLayerStyleOptions;\n    const source = this.layer.getSource();\n    // 当存在 url 的时候生效\n    if (source.data.tileurl) {\n      this.tileLayer = new Tile({\n        url: source.data.tileurl,\n        layerService: this.layerService,\n        layer: this.layer,\n        resolution,\n        maxSourceZoom,\n        // Tip: 当前为 default\n        crstype: 'epsg3857',\n      });\n\n      this.tile();\n      let t = new Date().getTime();\n      this.mapService.on('mapchange', () => {\n        const newT = new Date().getTime();\n        const cutT = newT - t;\n        t = newT;\n        if (cutT < 16) {\n          return;\n        }\n        this.tile();\n      });\n    }\n\n    return [\n      this.layer.buildLayerModel({\n        moduleName: 'ImageTileLayer',\n        vertexShader: ImageTileVert,\n        fragmentShader: ImageTileFrag,\n        triangulation: RasterImageTriangulation,\n        primitive: gl.TRIANGLES,\n        depth: { enable: false },\n        blend: this.getBlend(),\n      }),\n    ];\n  }\n\n  public clearModels() {\n    this.tileLayer.removeTiles();\n  }\n\n  public buildModels() {\n    return this.initModels();\n  }\n\n  protected registerBuiltinAttributes() {\n    // point layer size;\n    this.styleAttributeService.registerStyleAttribute({\n      name: 'uv',\n      type: AttributeType.Attribute,\n      descriptor: {\n        name: 'a_Uv',\n        buffer: {\n          // give the WebGL driver a hint that this buffer may change\n          usage: gl.DYNAMIC_DRAW,\n          data: [],\n          type: gl.FLOAT,\n        },\n        size: 2,\n        update: (\n          feature: IEncodeFeature,\n          featureIdx: number,\n          vertex: number[],\n          attributeIdx: number,\n        ) => {\n          return [vertex[3], vertex[4]];\n        },\n      },\n    });\n  }\n}\n"],"file":"imagetile.js"}

package/lib/imagetile/models/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _imagetile = _interopRequireDefault(require("./imagetile"));
+
+var ImageTileModels = {
+  imageTile: _imagetile.default
+};
+var _default = ImageTileModels;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/imagetile/models/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/imagetile/models/index.ts"],"names":["ImageTileModels","imageTile","ImageTileModel"],"mappings":";;;;;;;;;AAAA;;AAGA,IAAMA,eAAqD,GAAG;AAC5DC,EAAAA,SAAS,EAAEC;AADiD,CAA9D;eAIeF,e","sourcesContent":["import ImageTileModel from './imagetile';\nexport type ImageTileModelType = 'imageTile';\n\nconst ImageTileModels: { [key in ImageTileModelType]: any } = {\n  imageTile: ImageTileModel,\n};\n\nexport default ImageTileModels;\n"],"file":"index.js"}

package/lib/imagetile/utils/ImageTile.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _geoCoord = require("@antv/geo-coord");
+
+var _image = _interopRequireDefault(require("../../image"));
+
+var r2d = 180 / Math.PI;
+var tileURLRegex = /\{([zxy])\}/g;
+
+var ImageTile = function () {
+  function ImageTile(key, url, container, sceneContainer) {
+    (0, _classCallCheck2.default)(this, ImageTile);
+    (0, _defineProperty2.default)(this, "tile", void 0);
+    (0, _defineProperty2.default)(this, "name", void 0);
+    (0, _defineProperty2.default)(this, "imageLayer", void 0);
+    this.name = key;
+    this.tile = key.split('_').map(function (v) {
+      return Number(v);
+    });
+    var urlParams = {
+      x: this.tile[0],
+      y: this.tile[1],
+      z: this.tile[2]
+    };
+    var imageSrc = this.getTileURL(urlParams, url);
+    var lnglatBounds = this.tileLnglatBounds(this.tile);
+    var west = lnglatBounds.getWest();
+    var south = lnglatBounds.getSouth();
+    var east = lnglatBounds.getEast();
+    var north = lnglatBounds.getNorth();
+    var imageLayer = new _image.default({});
+    imageLayer.source(imageSrc, {
+      parser: {
+        type: 'image',
+        extent: [west, south, east, north]
+      }
+    });
+    imageLayer.setContainer(container, sceneContainer);
+    imageLayer.init();
+    this.imageLayer = imageLayer;
+  }
+
+  (0, _createClass2.default)(ImageTile, [{
+    key: "destroy",
+    value: function destroy() {
+      this.imageLayer.clearModels();
+      this.imageLayer.destroy();
+    }
+  }, {
+    key: "getTileURL",
+    value: function getTileURL(urlParams, path) {
+      if (!urlParams.s) {
+        urlParams.s = String.fromCharCode(97 + Math.floor(Math.random() * 3));
+      }
+
+      tileURLRegex.lastIndex = 0;
+      return path.replace(tileURLRegex, function (value, key) {
+        return urlParams[key];
+      });
+    }
+  }, {
+    key: "tileLnglatBounds",
+    value: function tileLnglatBounds(tile) {
+      var e = this.tile2lng(tile[0] + 1, tile[2]);
+      var w = this.tile2lng(tile[0], tile[2]);
+      var s = this.tile2lat(tile[1] + 1, tile[2]);
+      var n = this.tile2lat(tile[1], tile[2]);
+      return (0, _geoCoord.toLngLatBounds)([w, n], [e, s]);
+    }
+  }, {
+    key: "tile2lng",
+    value: function tile2lng(x, z) {
+      return x / Math.pow(2, z) * 360 - 180;
+    }
+  }, {
+    key: "tile2lat",
+    value: function tile2lat(y, z) {
+      var n = Math.PI - 2 * Math.PI * y / Math.pow(2, z);
+      return r2d * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n)));
+    }
+  }]);
+  return ImageTile;
+}();
+
+exports.default = ImageTile;
+//# sourceMappingURL=ImageTile.js.map

package/lib/imagetile/utils/ImageTile.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/imagetile/utils/ImageTile.ts"],"names":["r2d","Math","PI","tileURLRegex","ImageTile","key","url","container","sceneContainer","name","tile","split","map","v","Number","urlParams","x","y","z","imageSrc","getTileURL","lnglatBounds","tileLnglatBounds","west","getWest","south","getSouth","east","getEast","north","getNorth","imageLayer","ImageLayer","source","parser","type","extent","setContainer","init","clearModels","destroy","path","s","String","fromCharCode","floor","random","lastIndex","replace","value","e","tile2lng","w","tile2lat","n","pow","atan","exp"],"mappings":"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","sourcesContent":["import { LngLatBounds, toBounds, toLngLatBounds } from '@antv/geo-coord';\nimport { Container } from 'inversify';\nimport ImageLayer from '../../image';\n\ninterface IUrlParams {\n  x: number;\n  y: number;\n  z: number;\n  s?: string;\n}\n\nconst r2d = 180 / Math.PI;\nconst tileURLRegex = /\\{([zxy])\\}/g;\n\nexport default class ImageTile {\n  public tile: number[]; // 当前图片瓦片的索引\n  public name: string;\n  public imageLayer: any;\n  constructor(\n    key: string,\n    url: string,\n    container: Container,\n    sceneContainer: Container,\n  ) {\n    this.name = key;\n    this.tile = key.split('_').map((v) => Number(v));\n\n    const urlParams = {\n      x: this.tile[0],\n      y: this.tile[1],\n      z: this.tile[2],\n    };\n    const imageSrc = this.getTileURL(urlParams, url);\n\n    const lnglatBounds = this.tileLnglatBounds(this.tile);\n    const west = lnglatBounds.getWest();\n    const south = lnglatBounds.getSouth();\n    const east = lnglatBounds.getEast();\n    const north = lnglatBounds.getNorth();\n\n    const imageLayer = new ImageLayer({});\n    imageLayer.source(\n      // 'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',\n      imageSrc,\n      {\n        parser: {\n          type: 'image',\n          // extent: [121.168, 30.2828, 121.384, 30.4219],\n          extent: [west, south, east, north],\n        },\n      },\n    );\n\n    imageLayer.setContainer(container, sceneContainer);\n    imageLayer.init();\n\n    this.imageLayer = imageLayer;\n  }\n\n  public destroy() {\n    this.imageLayer.clearModels();\n    this.imageLayer.destroy();\n  }\n\n  public getTileURL(urlParams: IUrlParams, path: string) {\n    if (!urlParams.s) {\n      // Default to a random choice of a, b or c\n      urlParams.s = String.fromCharCode(97 + Math.floor(Math.random() * 3));\n    }\n\n    tileURLRegex.lastIndex = 0;\n    return path.replace(tileURLRegex, (value, key: any) => {\n      // @ts-ignore\n      return urlParams[key];\n    });\n  }\n\n  // Get tile bounds in WGS84 coordinates\n  public tileLnglatBounds(tile: number[]) {\n    const e = this.tile2lng(tile[0] + 1, tile[2]);\n    const w = this.tile2lng(tile[0], tile[2]);\n    const s = this.tile2lat(tile[1] + 1, tile[2]);\n    const n = this.tile2lat(tile[1], tile[2]);\n    return toLngLatBounds([w, n], [e, s]);\n  }\n\n  public tile2lng(x: number, z: number) {\n    return (x / Math.pow(2, z)) * 360 - 180;\n  }\n\n  public tile2lat(y: number, z: number) {\n    const n = Math.PI - (2 * Math.PI * y) / Math.pow(2, z);\n    return r2d * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n)));\n  }\n}\n"],"file":"ImageTile.js"}

package/lib/imagetile/utils/Tile.js

@@ -0,0 +1,324 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _geoCoord = require("@antv/geo-coord");
+
+var _l7Core = require("@antv/l7-core");
+
+var _ImageTile = _interopRequireDefault(require("./ImageTile"));
+
+var _tileCache = _interopRequireDefault(require("./tileCache"));
+
+var CacheLimit = 30;
+
+var Tile = function () {
+  function Tile(props) {
+    (0, _classCallCheck2.default)(this, Tile);
+    (0, _defineProperty2.default)(this, "tileList", {});
+    (0, _defineProperty2.default)(this, "tileCache", void 0);
+    (0, _defineProperty2.default)(this, "updateTileList", void 0);
+    (0, _defineProperty2.default)(this, "tileZoom", void 0);
+    (0, _defineProperty2.default)(this, "noPruneRange", void 0);
+    (0, _defineProperty2.default)(this, "url", void 0);
+    (0, _defineProperty2.default)(this, "resolution", void 0);
+    (0, _defineProperty2.default)(this, "maxSourceZoom", void 0);
+    (0, _defineProperty2.default)(this, "crstype", void 0);
+    (0, _defineProperty2.default)(this, "currentCrs", void 0);
+    (0, _defineProperty2.default)(this, "layerService", void 0);
+    (0, _defineProperty2.default)(this, "layer", void 0);
+    this.layerService = props.layerService;
+    this.layer = props.layer;
+    this.url = props.url;
+    this.resolution = props.resolution === 'low' ? -1 : 0;
+    this.maxSourceZoom = props.maxSourceZoom;
+    this.crstype = props.crstype;
+    this.currentCrs = new _geoCoord.GeoCoordinates.default({
+      start: {
+        x: 0,
+        y: 0
+      },
+      end: {
+        x: 0,
+        y: 0
+      },
+      projection: this.crstype
+    }).crs;
+    this.destroyTile = this.destroyTile.bind(this);
+    this.tileCache = new _tileCache.default(CacheLimit, this.destroyTile);
+    this.updateTileList = [];
+    this.removeTiles = this.removeTiles.bind(this);
+  }
+
+  (0, _createClass2.default)(Tile, [{
+    key: "calCurrentTiles",
+    value: function calCurrentTiles(oprions) {
+      var _this = this;
+
+      var NE = oprions.NE,
+          SW = oprions.SW,
+          tileCenter = oprions.tileCenter,
+          currentZoom = oprions.currentZoom,
+          minSourceZoom = oprions.minSourceZoom,
+          minZoom = oprions.minZoom,
+          maxZoom = oprions.maxZoom;
+
+      if (currentZoom >= this.maxSourceZoom) {
+        return;
+      }
+
+      var zoom = Math.floor(currentZoom) + this.resolution;
+      this.tileZoom = zoom > this.maxSourceZoom ? this.maxSourceZoom : zoom;
+
+      if (currentZoom < minZoom || currentZoom >= maxZoom || currentZoom < minSourceZoom) {
+        this.removeTiles();
+        return;
+      }
+
+      this.updateTileList = [];
+      var centerPoint = this.currentCrs.lngLatToPoint((0, _geoCoord.toLngLat)(tileCenter.lng, tileCenter.lat), this.tileZoom);
+      var centerXY = centerPoint.divideBy(256).floor();
+      var pixelBounds = this.getPixelBounds(NE, SW, tileCenter, this.tileZoom, this.currentCrs);
+      var tileRange = this.pxBoundsToTileRange(pixelBounds);
+      var margin = 4;
+      this.noPruneRange = new _geoCoord.Bounds(tileRange.getBottomLeft().subtract([margin, -margin]), tileRange.getTopRight().add([margin, -margin]));
+
+      if (!(isFinite(tileRange.min.x) && isFinite(tileRange.min.y) && isFinite(tileRange.max.x) && isFinite(tileRange.max.y))) {
+        throw new Error('Attempted to load an infinite number of tiles');
+      }
+
+      for (var j = tileRange.min.y; j <= tileRange.max.y; j++) {
+        for (var i = tileRange.min.x; i <= tileRange.max.x; i++) {
+          var coords = [i, j, this.tileZoom];
+          var tile = this.tileList[coords.join('_')];
+
+          if (tile) {
+            tile.current = true;
+          } else {
+            this.tileList[coords.join('_')] = {
+              current: true,
+              coords: coords
+            };
+            this.updateTileList.push(coords);
+          }
+        }
+      }
+
+      this.updateTileList.sort(function (a, b) {
+        var tile1 = a;
+        var tile2 = b;
+        var d1 = Math.pow(tile1[0] * 1 - centerXY.x, 2) + Math.pow(tile1[1] * 1 - centerXY.y, 2);
+        var d2 = Math.pow(tile2[0] * 1 - centerXY.x, 2) + Math.pow(tile2[1] * 1 - centerXY.y, 2);
+        return d1 - d2;
+      });
+      this.pruneTiles();
+      this.updateTileList.forEach(function (coords) {
+        var key = coords.join('_');
+
+        if (_this.tileList[key].current) {
+          _this.requestTile(key);
+        }
+      });
+    }
+  }, {
+    key: "pxBoundsToTileRange",
+    value: function pxBoundsToTileRange(pixelBounds) {
+      return new _geoCoord.Bounds(pixelBounds.min.divideBy(256).floor(), pixelBounds.max.divideBy(256).ceil().subtract([1, 1]));
+    }
+  }, {
+    key: "getPixelBounds",
+    value: function getPixelBounds(NE, SW, tileCenter, tileZoom, crs) {
+      var zoom = tileZoom;
+      var NEPoint = crs.lngLatToPoint((0, _geoCoord.toLngLat)(NE.lng, NE.lat), zoom);
+      var SWPoint = crs.lngLatToPoint((0, _geoCoord.toLngLat)(SW.lng, SW.lat), zoom);
+      var centerPoint = crs.lngLatToPoint((0, _geoCoord.toLngLat)(tileCenter.lng, tileCenter.lat), zoom);
+      var topHeight = centerPoint.y - NEPoint.y;
+      var bottomHeight = SWPoint.y - centerPoint.y;
+      var leftWidth;
+      var rightWidth;
+
+      if (tileCenter.lng - NE.lng > 0 || tileCenter.lng - SW.lng < 0) {
+        var width = Math.pow(2, zoom) * 256 / 360 * (180 - NE.lng) + Math.pow(2, zoom) * 256 / 360 * (SW.lng + 180);
+
+        if (tileCenter.lng - NE.lng > 0) {
+          leftWidth = Math.pow(2, zoom) * 256 / 360 * (tileCenter.lng - NE.lng);
+          rightWidth = width - leftWidth;
+        } else {
+          rightWidth = Math.pow(2, zoom) * 256 / 360 * (SW.lng - tileCenter.lng);
+          leftWidth = width - rightWidth;
+        }
+      } else {
+        leftWidth = Math.pow(2, zoom) * 256 / 360 * (tileCenter.lng - SW.lng);
+        rightWidth = Math.pow(2, zoom) * 256 / 360 * (NE.lng - tileCenter.lng);
+      }
+
+      var pixelBounds = new _geoCoord.Bounds(centerPoint.subtract(leftWidth, topHeight), centerPoint.add(rightWidth, bottomHeight));
+      return pixelBounds;
+    }
+  }, {
+    key: "pruneTiles",
+    value: function pruneTiles() {
+      var _this2 = this;
+
+      Object.keys(this.tileList).map(function (key) {
+        var c = _this2.tileList[key].coords;
+
+        if (c[2] !== _this2.tileZoom || !_this2.noPruneRange.contains(new _geoCoord.Point(c[0], c[1]))) {
+          _this2.tileList[key].current = false;
+        }
+      });
+      Object.keys(this.tileList).map(function (key) {
+        var tile = _this2.tileList[key];
+        tile.retain = tile.current;
+      });
+      Object.keys(this.tileList).map(function (key) {
+        var tile = _this2.tileList[key];
+
+        if (tile.current && !tile.active) {
+          var _key$split$map = key.split('_').map(function (v) {
+            return Number(v);
+          }),
+              _key$split$map2 = (0, _slicedToArray2.default)(_key$split$map, 3),
+              x = _key$split$map2[0],
+              y = _key$split$map2[1],
+              z = _key$split$map2[2];
+
+          if (!_this2.retainParent(x, y, z, z - 5)) {
+            _this2.retainChildren(x, y, z, z + 2);
+          }
+        }
+      });
+      this.removeOutTiles();
+    }
+  }, {
+    key: "requestTile",
+    value: function requestTile(key) {
+      var t = this.tileList[key];
+
+      if (!t) {
+        return;
+      }
+
+      var tile = this.tileCache.getTile(key);
+
+      if (!tile) {
+        var container = (0, _l7Core.createLayerContainer)(this.layer.sceneContainer);
+        tile = new _ImageTile.default(key, this.url, container, this.layer.sceneContainer);
+        tile.name = key;
+        t.current = true;
+        t.retain = true;
+        t.active = true;
+        this.layer.layerChildren.push(tile.imageLayer);
+        this.tileCache.setTile(tile, key);
+        this.pruneTiles();
+        this.layerService.renderLayers();
+      } else {
+        tile.imageLayer.show();
+        t.current = true;
+        t.retain = true;
+        t.active = true;
+        this.pruneTiles();
+      }
+    }
+  }, {
+    key: "retainParent",
+    value: function retainParent(x, y, z, minZoom) {
+      var x2 = Math.floor(x / 2);
+      var y2 = Math.floor(y / 2);
+      var z2 = z - 1;
+      var tile = this.tileList[[x2, y2, z2].join('_')];
+
+      if (tile && tile.active) {
+        tile.retain = true;
+        return true;
+      } else if (tile && tile.loaded) {
+        tile.retain = true;
+      }
+
+      if (z2 > minZoom) {
+        return this.retainParent(x2, y2, z2, minZoom);
+      }
+
+      return false;
+    }
+  }, {
+    key: "retainChildren",
+    value: function retainChildren(x, y, z, maxZoom) {
+      for (var i = 2 * x; i < 2 * x + 2; i++) {
+        for (var j = 2 * y; j < 2 * y + 2; j++) {
+          var key = [i, j, z + 1].join('_');
+          var tile = this.tileList[key];
+
+          if (tile && tile.active) {
+            tile.retain = true;
+            continue;
+          } else if (tile && tile.loaded) {
+            tile.retain = true;
+          }
+
+          if (z + 1 < maxZoom) {
+            this.retainChildren(i, j, z + 1, maxZoom);
+          }
+        }
+      }
+    }
+  }, {
+    key: "destroyTile",
+    value: function destroyTile(tile) {
+      var layerIndex = this.layer.layerChildren.indexOf(tile.imageLayer);
+
+      if (layerIndex > -1) {
+        this.layer.layerChildren.splice(layerIndex, 1);
+      }
+
+      tile.imageLayer.emit('remove', null);
+      tile.imageLayer.destroy();
+      this.layerService.renderLayers();
+      tile = null;
+    }
+  }, {
+    key: "removeOutTiles",
+    value: function removeOutTiles() {
+      for (var key in this.tileList) {
+        if (!this.tileList[key].retain) {
+          var tile = this.tileCache.getTile(key);
+
+          if (tile) {
+            tile.imageLayer.hide();
+          }
+
+          delete this.tileList[key];
+        }
+      }
+    }
+  }, {
+    key: "removeTiles",
+    value: function removeTiles() {
+      this.layer.layerChildren.forEach(function (layer) {
+        layer.emit('remove', null);
+        layer.destroy();
+      });
+      this.layer.layerChildren = [];
+      this.layerService.renderLayers();
+      this.tileList = {};
+      this.tileCache.destory();
+    }
+  }]);
+  return Tile;
+}();
+
+exports.default = Tile;
+//# sourceMappingURL=Tile.js.map