マップ レベルの設定/取得公式 Web サイトのアドレス: https://lbsyun.baidu.com/jsdemo.htm#bSetGetMapZoom
解決
//创建一个地图
let map = new BMapGL.Map("container");
//这里还需定位下位置，这里就不详细说明了，官方文档有示例
//开启鼠标滚轮缩放功能。仅对PC上有效
map.enableScrollWheelZoom(true);
//滚动开始触发事件，可通过map.getZoom() 获取缩放比例
map.addEventListener("zoomstart", function (e) {
console.log(e.target.zoomLevel.toFixed(2));
});
//滚动动画及 步进入 触发事件 此事件在 zoomend 后 还会触发 ,不建议在此处进行任何操作，该位置仅做测试
map.addEventListener("zoom_changed", function (e) {
console.log(e.target.zoomLevel.toFixed(2));
});
//滚动结束触发事件，如不想频繁触发，可通过节流函数控制
map.addEventListener("zoomend", function (e) {
console.log(e.target.zoomLevel.toFixed(2));
});
//滚动动画开始时触发，在zoomstart事件后执行
map.addEventListener("animation_start", function (e) {
//加try 的原因 该方法不是zoom 唯一所有
try {
//zoom 包含三个参数 current 当前缩放比例 ，target 目标缩放比例 diff 比例差值
let _zoom = this._animationInfo.zoom;
//绝对值验证 放大 还是 缩小
//0.75 是为了防止 缩放控件 +1 -1 或其他缩放方法影响
if (!(Math.abs(_zoom.diff) > 0.75)) {
// o.5 步进值
if (_zoom.diff > 0) {
this._animationInfo.zoom.diff = 0.5;
} else {
this._animationInfo.zoom.diff = -0.5;
}
this._animationInfo.zoom.current = _zoom.current;
//改变目标值
this._animationInfo.zoom.target = _zoom.current + this._animationInfo.zoom.diff;
}
} catch (error) {
}
});
ソースコード分析
//动画触发事件
_startInfiniteZoomAnimation: function(t) {
var e = this;
e._ani && e._ani.stop(!!t.goToEnd, {
stopCurrentAnimation: t.stopCurrentAnimation
}),
e._infiniteAni || (this.fire(new aB("onanimation_start")),
e._infiniteAni = new l({
duration: 1e4,
transition: bq.linear,
render: function() {
//步进值
var i = e._animationInfo.zoom;
return Math.abs(i.current - i.target) < .001 ? (e._setValue("zoom", i.target),
void e._infiniteAni.stop()) : (i.current += .35 * (i.target - i.current),
e._setValue("zoom", i.current),
void (t.renderCallback && t.renderCallback()))
},
finish: function() {
e._infiniteAni = null,
e._animationInfo = {
},
e.fire(new aB("onanimation_end")),
t.callback && t.callback()
},
onStop: function() {
e._infiniteAni = null,
e._animationInfo = {
},
e.fire(new aB("onanimation_end")),
t.callback && t.callback()
}
}))
}
// zoom_changed 触发事件
_setValue: function (e, T) {
if (e === "zoom") {
this._preZoomLevel = this.zoomLevel;
var i = this._getProperZoom(T);
T = i.zoom;
if (T !== this.zoomLevel) {
this.zoomLevel = T;
if (T < 5) {
this.restrictCenter(this.centerPoint)
}
this.fire(new fS("on" + e + "_changed"))
}
return
} else {
if (e === "center") {
this.centerPoint = T
}
}
this["_" + e] = T;
this.fire(new fS("on" + e + "_changed"))
}