Question

使用产品：iserver 11i 操作系统：win10x64 数据类型： postgre sql 问题详细描述：1、自定义绘点、线、圆、矩形、多边形，各个功能的结束绘制功能是什么

问题重现步骤： 1.

Answer 1

您好，您可以通过监听 Leaflet 地图的 dblclick（双击）事件来结束绘制，示例代码如下：

var isDrawing = false; // 是否正在绘制
var tempLayer; // 临时图层

// 监听地图的双击事件
map.on('dblclick', function(event) {
  if (isDrawing) { // 如果正在绘制
    isDrawing = false; // 结束绘制

    // 在这里执行结束绘制的操作
    // 例如添加绘制完成的图层到地图上或进行其他操作

    map.removeLayer(tempLayer); // 移除临时图层
    tempLayer = null;
  }
});

请注意，上述代码只是一个示例，具体实现需要根据您代码的实际情况进行调整。

希望能够帮助到您！

Answer 2

您好，看你昨天发的代码，是那个问题还没有解决吗？调用 this.map.off('click') 将会取消之前注册的点击事件监听器。此后，当点击地图时将不再触发该回调函数。有具体的代码片段吗，如果有需要的话我可以给您看一下。

Comments

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)
    },
代码片段是这样的，这里有两个问题，第一个画矩形或者画线之后会影响鼠标移动显示经纬度功能，第二个问题是结束画线的时候双击功能需要双击很多次才能结束画线