openlayer4设置地图的默认鼠标手势和拖拽鼠标手势

OpenLayers4手势设置

最新推荐文章于 2024-04-27 12:34:28 发布

fredricen

最新推荐文章于 2024-04-27 12:34:28 发布

阅读量3.1k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： JavaScript openlayers

本文链接：https://blog.youkuaiyun.com/fredricen/article/details/79668853

JavaScript 同时被 2 个专栏收录

39 篇文章

订阅专栏

openlayers

2 篇文章

订阅专栏

本文介绍如何在OpenLayers4中自定义地图鼠标手势，通过简单的CSS设置实现类似百度地图的手势效果。文章提供了具体代码示例，帮助开发者轻松实现手势交互。

openlayer2之后，openlayer3版本有较大升级。openlayers4是3的自然升级。openlayers4中默认的地图鼠标手势都是箭头。如果需要设置为像百度、高德之类的鼠标手势，需要自行定制。设置方法很简单，完全通过控制css就可以了。地图默认手势修改：

#map{
      cursor:url(openhand.cur),auto;
    }

地图交互手势修改：

/*鼠标样式设置*/
var target = map.getTarget();
var domTarget = typeof target === "string" ? document.getElementById(target) : target;
domTarget.onmousedown = function(e){
    domTarget.style.cursor = 'url(closedhand.cur),auto';
};
domTarget.onmouseup = function(e){
    domTarget.style.cursor = 'url(openhand.cur),auto';
};