openlayers3学习-创建地图，添加、移除监听事件

最新推荐文章于 2024-03-05 14:23:06 发布

暖酒与春风

最新推荐文章于 2024-03-05 14:23:06 发布

阅读量6.7k

点赞数 2

分类专栏： openlayers3 文章标签： ol

本文链接：https://blog.csdn.net/zforler/article/details/89455635

版权

openlayers3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、入门实例

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<link href="../ol.css" rel="stylesheet"/>

<script src="../ol.js"></script>

</head>

<body>

<div id="map"></div>

</body>

<script>

//view,layers,target是初始化地图的必须的三个属性，缺一不可。

let map = new ol.Map({

view: new ol.View({

center: [0, 0],

zoom: 1

}),

layers: [

new ol.layer.Tile({

source: new ol.source.OSM()

})

],

target: 'map',

//这俩参数是控制底图切片的加载时机，设置为true时在地图动画或者地图交互（放大缩小、漫游）时切片可以实时加载，提高用户体验。如果用户端性能较差的建议设置为false.默认false

loadTilesWhileAnimating:false,

loadTilesWhileInteracting:false,

});

//view属性也可以在地图初始后通过map.setView(ol.View)方法动态设置。

// let view= new ol.View({

// center: [0, 0],

// zoom: 1

// });

// map.setView(view)

</script>

</html>

效果图

二、添加地图事件监听

//鼠标点击

let clickEvent = map.on('click',(e)=>{

console.log(e)

})

//移除监听事件

ol.Observable.unByKey(clickEvent)

click,dblclick,singleclick 区别联系

dblclick 会触发两次click，不会触发singleclick.

singleclick会在click触发之后250毫秒后触发。

也就是说singleclick触发会有250毫秒的延迟，再使用此事件的时候一定要注意，不然会产生意想不到的问题。

暖酒与春风

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
10
评论
openlayers3学习-创建地图，添加、移除监听事件

一、入门实例<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><link href="../ol.css" rel="stylesheet"/><script src="....
复制链接

扫一扫

专栏目录