代码之家 › 专栏 › 技术社区 › edaus

L.GridLayer上的传单JS setOpacity

leaflet javascript

edaus · 技术社区 · 6 年前

如何动态更改palejs L.GridLayer的不透明度级别?

这适用于普通层,例如:

<input id="slide" type="range" min="0" max="1" step="0.1" value="0.5" onchange="updateOpacity(this.value)">


var layer =L.tileLayer(url).addTo(map);

function updateOpacity(value) {
   layer.setOpacity(value);
}

但同样的方法不适用于定义为的画布层,例如:

L.GridLayer.CanvasCircles = L.GridLayer.extend({... or
CanvasCircles = L.GridLayer.extend({...


CanvasCircles = L.GridLayer.extend({
        createTile: function (coords) {
            var tile = document.createElement('canvas');
            var tileSize = this.getTileSize();
            tile.setAttribute('width', tileSize.x);
            tile.setAttribute('height', tileSize.y);

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

            // Draw whatever is needed in the canvas context
            // For example, circles which get bigger as we zoom in
            ctx.arc(tileSize.x/2, tileSize.x/2, 4 + coords.z*4, 0, 2*Math.PI, false);
            ctx.fill();

            return tile;
        }
    });

    canvasCircles = function(opts) {

       return new CanvasCircles(opts);

    };

   map.addLayer( canvasCircles() );

1 回复 | 直到 6 年前

edaus 6 年前

解决方案,感谢 IvanSanchez ,是将启动层的函数引用到变量。然后,可以在不透明度更改函数中引用该变量。扩展原始的传单JS示例( http://leafletjs.com/examples/extending/extending-2-layers.html ),完整代码如下:

HTML:

<input id="slide" type="range" min="0" max="1" step="0.1" value="1" onchange="updateOpacity(this.value)">

JS公司:

CanvasCircles = L.GridLayer.extend({
  createTile: function(coords) {
    var tile = document.createElement('canvas');
    var tileSize = this.getTileSize();
    tile.setAttribute('width', tileSize.x);
    tile.setAttribute('height', tileSize.y);

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

    // Draw whatever is needed in the canvas context
    // For example, circles which get bigger as we zoom in
    ctx.arc(tileSize.x / 2, tileSize.x / 2, 4 + coords.z * 4, 0, 2 * Math.PI, false);
    ctx.fill();

    return tile;
  }
});

canvasCircles = function(opts) {
  return new CanvasCircles(opts);
};

var canvasCirclesLayer = canvasCircles(); //This is what makes the difference!

map.addLayer(canvasCirclesLayer);


function updateOpacity(value) {

canvasCirclesLayer.setOpacity(value);

}

推荐文章

Krubkj lkjlökg · UTMREF/MGRS传单中的地图网格

1 年前

Kiki · TypeError:无法读取null的属性(读取“\u传单\u禁用\u单击”)

2 年前

Murali · 如何将Rshiny select输入带到前一层?目前传单图例阻碍了选择

6 年前

user5405873 · 如何缩放距离标记15km半径内的区域

6 年前

Stefan · 实际需要时,单击即可填写传单弹出窗口

6 年前

Marc Coll · 如何使用sliderInput值选择列并使用它更改映射R?

6 年前

val · 在Shiny中应用传单贴图边界过滤数据

6 年前

edaus · L.GridLayer上的传单JS setOpacity

6 年前

Cezar B · 用于扩展信息框的传单事件侦听器

6 年前

wuk986 · 传单:刷新不带缓存的tilelayer

6 年前