openlayer在地图上渲染图标无法操作地图问题

        ol对于在地图上渲染图标,并且图标可以随着地图的缩放层级自适应,跟随地图移动,ol是提供了一个很好用的方法的---overlay

openlayer在地图上渲染图标无法操作地图问题_第1张图片

        但会有一个问题,那就是当鼠标移入到该图标上后,就无法操作地图了,无论是双击放大、滚轮缩放、鼠标拖动地图这些都会失效,起因是当前鼠标作用到了overlay所在的dom盒子上去了,没有作用到地图所在盒子的canvas上面。

        有一个配置项可以解决这个问题 :

        当你将一个overlay添加到地图上时,默认情况下,它会阻止鼠标事件透传到地图上,这就导致了无法拖动地图或进行缩放操作。这是因为overlay的元素会遮挡地图,并捕获所有与其相关的事件。

        如果你希望在拖动overlay时仍然能够拖动地图或进行缩放操作,可以通过设置overlay的stopEvent属性为false来解决这个问题。这样做会允许鼠标事件继续传递到地图上。

以下是示例代码片段,展示如何设置overlay的stopEvent属性:

    renderOverlay({
          eyemap: mapIns,
          option: {
            id: item.code,
            element: popupList[index],
            position: item.position,
            positioning: 'center center',
            stopEvent: false // 允许事件传递到地图,防止鼠标移动到悬浮图标上无法操作地图
          }
        })


const overlay = new ol.Overlay({
  element: marker,
  position: [lon, lat],
  positioning: 'center-center',
  stopEvent: false // 允许事件传递到地图
});

你可能感兴趣的:(前端,javascript,开发语言)