leaflet.js 1.0-rc gridlayer。缩放时没有重绘画布圆圈

时间:2016-06-07 06:42:59

标签: javascript canvas maps leaflet

此处示例: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);

放大时,缩小橙色圆圈消失,但平铺网格渲染

如果缩放,则将地图移出圆形图块并返回圆圈重绘

是这个传单错误吗?

1 个答案:

答案 0 :(得分:0)

<强>固定

将zoom参数传递给this._map.project函数

{
  "query": {
    "filtered": {
      "filter": {
        "or": [
          {
            "and": [
              {
                "not": {
                  "term": {
                    "field1": "1"
                  }
                }
              },
              {
                "not": {
                  "term": {
                    "field2": "1"
                  }
                }
              },
              {
                "not": {
                  "term": {
                    "field3": "1"
                  }
                }
              }
            ]
          },
          {
            "and": [
              {
                "not": {
                  "term": {
                    "field1": "2"
                  }
                }
              },
              {
                "not": {
                  "term": {
                    "field2": "2"
                  }
                }
              },
              {
                "not": {
                  "term": {
                    "field3": "2"
                  }
                }
              }
            ]
          }
        ]
      }
    }
  }
}

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