OpenLayers基础教程——常用的地图事件
1、前言前一篇博客介绍了事件的注册和取消注册，这篇博客就来介绍一下OpenLayers中常用的一些地图事件。2、地图点击事件地图点击事件如下所示：click——地图点击事件singleclick——地图单击事件dblclick——地图双击事件测试代码如下：<!DOCTYPE html><html><head><meta charset="utf-8" /&
·
1、前言
前一篇博客介绍了事件的注册和取消注册，这篇博客就来介绍一下OpenLayers中常用的一些地图事件。
2、地图点击事件
地图点击事件如下所示：
- click——地图点击事件
- singleclick——地图单击事件
- dblclick——地图双击事件
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>OpenLayers</title>
<link href="ol/ol.css" rel="stylesheet" />
<script src="ol/ol.js"></script>
</head>
<body>
<div id="map" style="width:400px;height:400px;"></div>
<script>
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
projection: 'EPSG:3857',
center: ol.proj.transform([120, 30], 'EPSG:4326', 'EPSG:3857'),
zoom: 10
})
});
// click事件
map.on('click', function (event) {
console.log('触发click事件');
});
// singleclick事件
map.on('singleclick', function (event) {
console.log('触发singleclick事件');
});
// dblclick事件
map.on('dblclick', function (event) {
console.log('触发dblclick事件');
});
</script>
</body>
</html>
运行结果如下图所示：
可以发现：
- 无论是
singleclick还是dblclick，都会首先触发click事件。 singleclick事件相当于执行一次click事件。dblclick事件相当于执行两次click事件。
3、地图渲染事件
地图渲染事件如下所示：
- precompose——准备渲染
- postcompose——开始渲染
- postrender——完成渲染
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>OpenLayers</title>
<link href="ol/ol.css" rel="stylesheet" />
<script src="ol/ol.js"></script>
</head>
<body>
<div id="map" style="width:400px;height:400px;"></div>
<script>
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
projection: 'EPSG:3857',
center: ol.proj.transform([120, 30], 'EPSG:4326', 'EPSG:3857'),
zoom: 10
})
});
// precompose事件
map.on('precompose', function (event) {
console.log('准备渲染');
});
// postcompose事件
map.on('postcompose', function (event) {
console.log('正在渲染中');
});
// postrender事件
map.on('postrender', function (event) {
console.log('完成渲染');
});
</script>
</body>
</html>
运行结果如下图所示：
4、地图移动事件
地图移动事件如下所示：
- moveend——移动结束
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>OpenLayers</title>
<link href="ol/ol.css" rel="stylesheet" />
<script src="ol/ol.js"></script>
</head>
<body>
<div id="map" style="width:400px;height:400px;"></div>
<script>
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
projection: 'EPSG:3857',
center: ol.proj.transform([120, 30], 'EPSG:4326', 'EPSG:3857'),
zoom: 10
})
});
// moveend事件
map.on('moveend', function (event) {
// 获取当前屏幕范围
let extent = map.getView().calculateExtent(map.getSize());
let xmin = extent[0];
let ymin = extent[1];
let xmax = extent[2];
let ymax = extent[3];
// 输出左下角和右上角坐标
console.log('左下角X：' + xmin);
console.log('左下角Y：' + ymin);
console.log('右上角X：' + xmax);
console.log('右上角Y：' + ymax);
console.log('---------------');
});
</script>
</body>
</html>
运行结果如下图所示：
可以发现：
- 当用户移动地图后就会触发
moveend事件，控制台实时记录了当前屏幕的坐标范围。 - 利用鼠标滚轮或是按钮实现地图的放大缩小也会触发
moveend事件。
5、鼠标事件
鼠标事件如下所示：
- pointermove——鼠标移动
- pointerdrag——鼠标拖拽
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>OpenLayers</title>
<link href="ol/ol.css" rel="stylesheet" />
<script src="ol/ol.js"></script>
</head>
<body>
<div id="map" style="width:400px;height:400px;"></div>
<script>
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
projection: 'EPSG:3857',
center: ol.proj.transform([120, 30], 'EPSG:4326', 'EPSG:3857'),
zoom: 10
})
});
// pointermove事件
map.on('pointermove', function (event) {
console.log('鼠标移动');
});
// pointerdrag事件
map.on('pointerdrag', function (event) {
console.log('鼠标拖拽');
});
</script>
</body>
</html>
运行结果如下图所示：
6、属性变更事件
属性变更事件如下所示：
- change:size——尺寸变更
- change:view——视图变更
- change:target——地图容器变更
- propertychange——属性变更
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>OpenLayers</title>
<link href="ol/ol.css" rel="stylesheet" />
<script src="ol/ol.js"></script>
</head>
<body>
<div id="map" style="width:200px;height:200px;"></div>
<div id="map1" style="width:400px;height:400px;"></div>
<button onclick="changeSize()">更改Size</button>
<button onclick="changeTarget()">更改Target</button>
<button onclick="changeView()">更改View</button>
<script>
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
projection: 'EPSG:3857',
center: ol.proj.transform([120, 30], 'EPSG:4326', 'EPSG:3857'),
zoom: 10
})
});
// change:size事件
map.on('change:size', function (event) {
console.log('size改变');
});
// change:view事件
map.on('change:view', function (event) {
console.log('view改变');
});
// change:target事件
map.on('change:target', function (event) {
console.log('target改变');
});
// propertychange事件
map.on('propertychange', function (event) {
console.log('property改变');
});
// 更改Div
function changeSize() {
console.log('-----------');
var div = document.getElementById('map');
div.style.width = '250px';
map.updateSize();
}
// 更改Target
function changeTarget() {
console.log('-----------');
map.setTarget('map1');
}
// 更改View
function changeView() {
console.log('-----------');
let view = new ol.View({
projection: 'EPSG:4326',
center: [110, 30],
zoom: 5
});
map.setView(view);
}
</script>
</body>
</html>
运行结果如下图所示：
可以发现：
change:size、change:target、change:view都会触发propertychange事件。- 地图首次加载就会触发
size和propertychange事件。 change:target触发的时间顺序为：change:size——propertychange——change:target——propertychange。
7、结语
这里介绍了一些常用的地图事件，合理选择地图事件能让你的开发工作事半功倍 。
开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！
更多推荐
6
0- 0
已为社区贡献8条内容
所有评论(0)