在实际需求中需要做到刚进入首页加载一个图层,但是在地图扩大或者缩小到某个级别后需要隐藏图层,因此我们需要对地图的缩放级别进行监听,用到的是moveend事件:
map.on("moveend",function(e){
var zoom = map.getView().getZoom(); //获取当前地图的缩放级别
console.log(zoom);
if(zoom >= 12){
tianjinlayer.getSource().clear(); //控制地图图层不可见
}else{
addTianjinSource("./areajson/tianjin.geojson",tianjinlayer); //重新加载地图图层
通过moveend事件,无论是通过鼠标滚轮放大或者缩小地图,还是通过openlayers自带的+(地图放大)或者-(地图缩小),均能触发moveend事件,
但是,鼠标拖动地图停止的时候也会触发,因此会影响某些操作。。。
在实际需求中需要做到刚进入首页加载一个图层,但是在地图扩大或者缩小到某个级别后需要隐藏图层,因此我们需要对地图的缩放级别进行监听,用到的是moveend事件:map.on("moveend",function(e){ var zoom = map.getView().getZoom(); //获取当前地图的缩放级别 console.log(zoom); if(zoom ...
本身是想使用moveend事件来监听地图的缩放级别,但是初始化实例之后一直不能正常监听到缩放结束的变化。
后再文档中查到change:resolution可以同样实现相同效果。因此以此文记录使用和实现方案。
监听事件
mounted() {
this.$map = this.$refs.baseMap.getMap()
this.$map.getView().on('change:resolution', () => {
if (this.$map.getView(
目录地图事件监听概述1.鼠标触发事件2.地图移动事件3.图层渲染事件4.change事件5.其它事件地图事件监听的部分简单应用监听鼠标触发获取地图坐标监听指针移动获取指针位置矢量要素的属性值监听地图移动实现图层的动态显隐
地图事件监听概述
地图能够监听的事件主要包括:
1.鼠标触发事件
click:鼠标单击地图触发的事件(鼠标单击多少次地图,该事件就触发多少次);
singleclick:鼠标单击...
在实际项目中,好多地图不需要从第0级开始缩放,因为第0级地图太小了,没有实际意 义。那么就需要设置从中间某个级别开始缩放。该如何做呢。由于openlayrs2中没有直接属性进行控制,也因此需要自己注册事件通过监听事件来控制地 图的最小缩放级别。对于openlayers3来说,直接通过view的属性进行控制即可。
openlayers中需要注册缩放事件来解决,在该事件中监听缩放后地图的级...
在OpenLayers中,移除地图的监听事件可以通过两种方式实现。
第一种方式是使用具名函数作为事件的处理函数,然后使用un方法来移除事件监听。示例如下:
```javascript
function handleMapClick(event) {
// 处理地图点击事件的逻辑
// 添加地图点击事件监听
map.on('click', handleMapClick);
// 移除地图点击事件监听
map.un('click', handleMapClick);
在该示例中,首先定义了一个具名函数`handleMapClick`,它用来处理地图的点击事件。然后使用`map.on`方法将该函数作为点击事件的处理函数进行注册。最后使用`map.un`方法来移除点击事件的监听。
第二种方式是使用匿名函数作为事件的处理函数,然后使用key参数来获取监听事件的唯一标识,进而移除事件监听。示例如下:
```javascript
// 添加地图点击事件监听,并将返回的唯一标识key保存
var key = map.on('click', function(event) {
// 处理地图点击事件的逻辑
// 移除地图点击事件监听
map.unByKey(key);
在该示例中,使用`map.on`方法注册了一个匿名函数作为点击事件的处理函数,并将返回的唯一标识key保存起来。然后使用`map.unByKey`方法通过该标识key来移除点击事件的监听。
无论使用哪种方式,都可以实现在OpenLayers中移除地图的监听事件。根据实际需求,选择适合的方式进行操作即可。