webgis画多边形结束之后的异步事件

最新推荐文章于 2025-07-19 02:19:28 发布

q124467623

最新推荐文章于 2025-07-19 02:19:28 发布

阅读量314

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript 前端 asynchronous

本文链接：https://blog.csdn.net/q124467623/article/details/122449293

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在GIS开发中使用Promise+async技术解决图形绘制异步问题的方法，通过具体实例展示了如何确保图形绘制完成后能正确获取到绘制结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

0 前言

在GIS开发中，尝尝有一种需求：判断一个图形是否绘制结束，因为是画图形是异步事件，因此采用Promise+async方式解决；

1 不使用Promise+async时，问题如下：

A.js中有封装画多边形的代码：

const drawPolygon = function (map) {
    ...
    map.on('click', onClick); //点击地图
    map.on('dblclick', onDoubleClick); //双击完成
    map.on('mousemove', onMove)

    function onClick(e) {
      ...
    }

    function onMove(e) {
      ...
    }

    function onDoubleClick(e) {
      ...
      L.polygon([points]).addTo(map)
      return points
    }
}

B.vue中使用A封装的画多边形事件，因为是异步事件，得到的值为空：

drawPoly() {
  const pointsArr = mapUtils.drawPolygon(state.map);
  console.log(pointsArr);//null
},

2 采用Promise+async 可以解决此问题

A.js修改如下：

const drawPolygon = function (map) {
   return new Promise(function(resolve){
         ...
    map.on('click', onClick); //点击地图
    map.on('dblclick', onDoubleClick); //双击完成
    map.on('mousemove', onMove)

    function onClick(e) {
      ...
    }

    function onMove(e) {
      ...
    }

    function onDoubleClick(e) {
      ...
      L.polygon([points]).addTo(map)
      resolve(points)
    }
   }
 )
}

B.vue修改如下：

async drawPoly() {
  const pointsArr = await mapUtils.drawPolygon(state.map);
  console.log(pointsArr);//[[125.23,33.44],[122.21,35.23]]
},