0

我正在尝试这个小提琴来显示 mbtiles 文件，但是当你缩放它时它有一个小问题......它不会加载一些图像。我想知道如何解决这个问题。

jsfiddle.net/kochizufan/rj4Eh/

小提琴的代码如下。

HTML：

<div id="map" ></div>

CSS：

#map {
  position:absolute;
  width:100%;
  height:100%;
}

Javascript：

var mbt = MBTiles.load(
  'http://t.tilemap.jp/jcp_maps/shimabara.mbtiles',
  function(me) {
    var centerVal = me.metadata('center').split(",");
    var boundVal  = me.metadata('bounds').split(",");
    var bounds    = new L.LatLngBounds( new L.LatLng(boundVal[1],boundVal[0]), new L.LatLng(boundVal[3],boundVal[2]) );
    console.log(boundVal);
    var MBLayer = L.TileLayer.extend({
      options: {
        minZoom: me.metadata('minzoom'),
        maxZoom: me.metadata('maxzoom'),
        tileSize: 256,
        tms: true,
        errorTileUrl: '',
        attribution: me.metadata('attribution'),
        zoomOffset: 0,
        opacity: 1,
        bounds: bounds,
        continuousWorld: true,
        unloadInvisibleTiles: L.Browser.mobile,
        updateWhenIdle: L.Browser.mobile
      },
      getTileUrl: function (tilePoint) {
        this._adjustTilePoint(tilePoint);
        var tile = me.getTileImage(tilePoint.x, tilePoint.y, this._getZoomForUrl());
        return tile;
      }
    }); 

    var MBLayerObj = new MBLayer('dummy',{tms:true});
    var map = new L.Map('map',
      {
        minZoom: me.metadata('minzoom'),
        maxZoom: me.metadata('maxzoom')
      }
    );
    console.log(me.metadata('minzoom'));
    map.addLayer(MBLayerObj);
    console.log(centerVal);
    //map.setView(new L.LatLng(parseFloat(centerVal[1]),parseFloat(centerVal[0])),parseInt(centerVal[2]));
    map.fitBounds(bounds);
  }
);
4

0 回答 0