2016-06-07 71 views
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); 
上放大

,縮小橙色圓圈消失,但瓷磚電網呈現

如果變焦,然後將繪製出圓形磚的工作,迴圈子重繪

是這個傳單錯誤?

+1

這也許帆布覆蓋可以幫助你http://bl.ocks.org/sumbera/11114288 – HudsonPH

回答