佛山市官网网站建设公司,工业品网络营销,专业的网站建设案例,网页优化包括leaflet呼吸闪烁效果
1.功能背景
这个效果一把用于点击选中#xff0c;报警提升效果。
2.功能开发
2.1 marker
这个效果还是很好实现#xff0c;主要通过计时器设置透明度的组合实现。
function setTargetSelect(e){var i 1var int setInterval(() {if(!e._map…leaflet呼吸闪烁效果
1.功能背景
这个效果一把用于点击选中报警提升效果。
2.功能开发
2.1 marker
这个效果还是很好实现主要通过计时器设置透明度的组合实现。
function setTargetSelect(e){var i 1var int setInterval(() {if(!e._map) clearInterval(int)if (i -1) {i 1}i i - 0.08if (i 0) e.setOpacity(i * -1)else e.setOpacity(i)},50)
}写成了一个function当需要呼吸闪烁的marker添加到地图时将marker传入这个方法就可以了。这个marker在地图移除时也会自动停止这个计时器。 var marker L.marker(evt.latlng).addTo(map);setTargetSelect(marker)Marker可以其他要素也当然可以就是方法不同。
2.2 其他要素 其他要素例如面需要设置方法为 e.setStyle({opacity:i ,fillOpacity:j}opacity为对线的透明度的修改fillOpacity是对面中间的填充颜色透明的的修改。 但是在最终实现上发现使用setInterval会产生迷之卡顿经过一顿百度后通过别的方法解决参考链接聊聊使用 JavaScript 做动画出现卡顿的原因 最后代码如下
function setTargetSelect2(e) {let timer nullvar i 1var j 0.2 //注意要和线的透明度同步修改保持开始和结束时间一致function updateAnimation() {if (i -1) {i 1}i i - 0.01if (j -0.2) {j 0.2}j j - 0.002 //注意要和线的透明度同步修改保持开始和结束时间一致if (i 0) e.setStyle({opacity:i * -1,fillOpacity:j*-1})else e.setStyle({opacity:i,fillOpacity:j})if (!e._map) return cancelAnimationFrame(timer)window.requestAnimationFrame(updateAnimation)}window.requestAnimationFrame(updateAnimation)}调用方法 var polygon L.polygon([[0, 20], [-30, 20], [-10, 50], [0, 20]], {color: red});setTargetSelect2(polygon)
