leaflet.js 1.0-rc слой сетки. не перерисовывать круг холста при увеличении

вот пример: http://jsfiddle.net/alekzonder/kvs3rb9t/

var lc = L.latLng(55.73948169869349, 37.88566589355469);

var map = L.map(document.getElementById('map'));

map.addLayer(L.marker(lc));

map.setView(lc, 10);

L.Util.extend(L.LatLng, {
  DEG_TO_RAD: Math.PI / 180,
  RAD_TO_DEG: 180 / Math.PI
});





var tiles = new L.GridLayer();

L.Util.setOptions(tiles, {
  radius: 13000,
  opacity: 1
});

tiles.createTile = function(coords) {
  var tile = L.DomUtil.create('canvas', 'leaflet-tile');
  var size = this.getTileSize();
  tile.width = size.x;
  tile.height = size.y;

  var ctx = tile.getContext('2d');



  // draw tile grid
  ctx.fillStyle = 'white';
  ctx.fillRect(0, 0, 255, 255);
  ctx.fillStyle = 'black';
  ctx.fillText('x: ' + coords.x + ', y: ' + coords.y + ', zoom: ' + coords.z, 20, 20);
  ctx.strokeStyle = 'red';
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(255, 0);
  ctx.lineTo(255, 255);
  ctx.lineTo(0, 255);
  ctx.closePath();
  ctx.stroke();





  // draw orange circle
  var lat = lc.lat;
  var lng = lc.lng;

  var lngRadius = (this.options.radius / 40075017) * 360 / Math.cos(L.LatLng.DEG_TO_RAD * lat),
    latlng2 = new L.LatLng(lat, lng - lngRadius),
    point2 = this._map.latLngToLayerPoint(latlng2),
    point1 = this._map.latLngToLayerPoint([lat, lng]);

  var size = Math.max(Math.round(point1.x - point2.x), 1);

  var s = coords.multiplyBy(this.options.tileSize);
  var p = this._map.project(new L.LatLng(lc.lat, lc.lng));
  var x = Math.round(p.x - s.x);
  var y = Math.round(p.y - s.y);
  var point = [x, y];

  ctx.beginPath();
  ctx.arc(point[0], point[1], size, 0, 2 * Math.PI, false);
  ctx.closePath();
  ctx.fillStyle = 'orange';
  ctx.fill();

  return tile;
};



map.addLayer(tiles);

при увеличении, уменьшении оранжевый круг исчезает, но отображается сетка плитки

Если масштабировать, то переместите карту из плиток круга и вернитесь к перерисовке круга.

это ошибка листовки?


person alekzonder    schedule 07.06.2016    source источник
comment
возможно, это наложение холста поможет вам bl.ocks.org/sumbera/11114288   -  person HudsonPH    schedule 07.06.2016


Ответы (1)


исправлено

передать аргумент масштабирования в функцию this._map.project

  //...

  var p = this._map.project(new L.LatLng(lc.lat, lc.lng), coords.z);

  //...

http://jsfiddle.net/alekzonder/kvs3rb9t/5/

person alekzonder    schedule 07.06.2016