首页 / 浏览问题 / WebGIS / 问题详情
自定义鼠标事件相互影响,map.on(dblclick需要重复点击多次才生效
20EXP 2023年09月15日
使用产品:iserver 11i 操作系统:win10x64 数据类型: postgre sql 问题详细描述:1、

代码:

initMap() {
            this.map = L.map('map', {
                crs: L.CRS.EPSG4326,
                center: [35.585544, 105.690510],
                maxZoom: 18,
                zoom: 4,
            });
            L.control.scale().addTo(this.map)
            new L.supermap.TiledMapLayer(this.url, { noWrap: true, transparent: true }).addTo(this.map);
            // 鼠标移动显示经纬度
            var latlngDiv = document.getElementById('latlng')
            this.map.on('mousemove', function(e) {
                this.lat = e.latlng.lat;
                this.lng = e.latlng.lng;
                latlngDiv.innerHTML = `${this.lng}, ${this.lat}`
            })
            // 图形绘制
            this.polylinegroup = L.featureGroup([]) //创建图层
            this.map.addLayer(this.polylinegroup)
            this.nextlinegroup = L.featureGroup([]) //创建图层
            this.map.addLayer(this.nextlinegroup)
            this.rectgroup = L.featureGroup([]) //创建图层
            this.map.addLayer(this.rectgroup)
            this.testgroup = L.featureGroup([]) //创建图层
            this.map.addLayer(this.testgroup)

        },
// 画线
    draw_Line() {
      this.draw_Hand()
      this.draw_tool = 'draw_line'
      this.draw_Tools()
      let pointList = [];
      this.map.on('click', (e) => {
        pointList.push([e.latlng.lat, e.latlng.lng])
        this.map.on('dblclick', (ev) => {
          console.log(111)
          this.map.off('click')
          this.map.off('mousemove')
          pointList.push([ev.latlng.lat, ev.latlng.lng]);
          this.polylinegroup.clearLayers();
          this.nextlinegroup.clearLayers();
          if (pointList.length > 1) {
            L.polyline(pointList, {
              color: "#2260b4",
              weight: 3
            }).addTo(this.nextlinegroup);
          }
        })
        this.map.on('mousemove', (ev) => {
          let lastPoint = pointList[pointList.length - 1]
          let latlngs = [
              lastPoint,
              [ev.latlng.lat, ev.latlng.lng]
          ]
          this.polylinegroup.clearLayers();
          L.polyline(latlngs, {color: '#2260b4'}).addTo(this.polylinegroup)
        })
        if (pointList.length > 1) {
          this.nextlinegroup.clearLayers();
          L.polyline(pointList, {
            color: "#2260b4",
            weight: 3
          }).addTo(this.nextlinegroup);
        }
      })
    },
// 画矩形
    draw_Rectangle() {
      this.list = []
      let list = []
            let juxing;
            this.map.on("click", (e)=> {
                list.push([e.latlng.lat, e.latlng.lng])
                this.map.on('mousemove',(ev)=>{
                    if(list.length>1){
                        list.splice(1)
                    }
                    list.push([ev.latlng.lat, ev.latlng.lng])
                    this.testgroup.clearLayers()
                    juxing = L.rectangle(list, {//绘制矩形
                        color: "#ff7800",
                        weight: 1
                    }).addTo(this.testgroup);
                })
                if(list.length>1){
                    list.pop()//第二次点击会触发第一次的push()导致得到三个数据(后两个一样),所以删除最后一个
                    // this.list.push([list])//保存矩形数据
                    this.list.push({first:list[0],sec:list[1],name:'矩形'+(this.list.length+1)})//保存矩形数据
                    this.map.off('mousemove')//两点确定,移除鼠标移动事件
                    this.map.off('click')//两点确定,移除点击事件,
                    this.testgroup.clearLayers()
                    L.rectangle(list, {//绘制矩形
                        color: "#ff7800",
                        weight: 1
                    }).addTo(this.rectgroup);
                }
            })
      console.log(this.list)
    },
代码片段是这样的,这里有两个问题,第一个画矩形或者画线之后会影响鼠标移动显示经纬度功能,第二个问题是结束画线的时候双击功能需要双击很多次才能结束画线

问题重现步骤: 1.

1个回答

第一个问题,画矩形或画线之后影响鼠标移动显示经纬度功能的原因是因为在画矩形或画线时,绑定了mousemove事件,并且没有正确移除事件监听器。可以通过在结束画矩形或画线时,使用this.map.off('mousemove')来移除事件监听器,恢复鼠标移动显示经纬度功能。

第二个问题,结束画线时双击功能需要双击很多次才能结束画线的原因是因为每次双击时都会重新绑定一个新的双击事件监听器,导致之前绑定的双击事件监听器无效。可以将双击事件监听器的绑定放在画线功能的初始化方法中,在画线完成后移除双击事件监听器。

460EXP 2023年10月27日
...