1
這裏例如:http://jsfiddle.net/alekzonder/kvs3rb9t/leaflet.js 1.0-rc網格層。沒有重繪帆布圓圈變焦
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);
上放大
,縮小橙色圓圈消失,但瓷磚電網呈現
如果變焦,然後將繪製出圓形磚的工作,迴圈子重繪
是這個傳單錯誤?
這也許帆布覆蓋可以幫助你http://bl.ocks.org/sumbera/11114288 – HudsonPH