概述
前面的文章mapboxGL卷帘里面实现的时候已经有涉及多图联动了，本文在此基础上进一步优化，加入鼠标位置展示。
效果
GIF.gif
实现思路
- 注册map的
mouseover事件，给当前移入的地图注册map的move事件； - 注册map的
mouseout事件，给当前移出的地图取消map的move事件； - 注册map的
mousemove事件，获取当前的鼠标位置，在其他地图上展示鼠标位置，鼠标位置的展示通过marker来实现；
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
<style>
html,
body,
.map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.map {
width: 50%;
height: 50%;
float: left;
}
</style>
</head>
<body>
<div id="map1" class="map"></div>
<div id="map2" class="map"></div>
<div id="map3" class="map"></div>
<div id="map4" class="map"></div>
<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<script>
const style = {
"version": 8,
"name": "lzugis",
"sources": {
"nav": {
"type": "raster",
"tiles": ['https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'],
"tileSize": 256
}
},
"layers": [{
"id": "nav",
"type": "raster",
"source": "nav",
"minzoom": 0,
"maxzoom": 17
}]
}
let maps = []
let markers = {}
const doms = document.getElementsByClassName('map');
for (let i = 0; i < doms.length; i++) {
maps.push(new mapboxgl.Map({
container: doms[i],
style: style,
center: [103.081163, 37.1612],
zoom: 3.5,
minZoom: 2,
maxZoom: 18
}));
}
maps.forEach(map => {
const mapDom = map.getContainer().getAttribute('id')
// 添加鼠标位置
const ele = document.createElement('div');
ele.setAttribute('class', 'mouse-position');
const img = new Image()
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABdklEQVQ4T53Uy0sWURjH8e+X/BMiiMCV2sXbylaBBa0LIhEk27tOV7oWt9GmvS6jRREt2tSmRRcytYvmTgJBEUHESO2JE68wHe0983ZgYM7M73yYmeeZI5UREaeBX+pW9Xor52ZgP/AMuKW+aQU6yuZgH/AR2AfuqQ9aRXOwF1ioII+Au+peXbgEJucLcFP9VgfNwR5g8YSFu8CI+qSE5mA3sNRk0X1gXD34VyYHLwGfCk/xFrihrp+U+x8wORvAkPoqR3PwIvC59J0a9w+BKXWmms/BC42q1jT/xJ4Dw+pOmuTgeeBrE+0D8Bh4nQ71R+mVS+B7YECNulXuApYb4Z/p9wPagYkKMKY+rAt2AivAGnA7bRARcQb4DrQ1kG2gU92s0zYdQNplLqurRwsiYha4UwHm1NE64FngnPquGo6ItK3NZ8DVYh8265WIeAkMVjKT6nTTKhfAa8AL4BSQCtavHmuxv/qw1M0RcQW4DjxVUwsdG78BOI+EFVyMx4EAAAAASUVORK5CYII='
ele.appendChild(img)
const option = {
element: ele
};
const marker = new mapboxgl.Marker(option).setLngLat([0, 0]).addTo(map)
markers[mapDom] = marker;
// 鼠标进入的时候注册事件
map.on('mouseover', e => {
map.on('move', moveEvent)
})
// 鼠标移除的时候关闭事件
map.on('mouseout', e => {
map.off('move', moveEvent)
})
map.on('mousemove', mouseMoveEvent)
})
function mouseMoveEvent(e) {
const d = e.target.getContainer().getAttribute('id')
maps.forEach(map => {
const mapDom = map.getContainer().getAttribute('id')
const lngLat = d !== mapDom ? e.lngLat : [0, 0]
markers[mapDom].setLngLat(lngLat)
})
}
function moveEvent(e) {
const c = e.target.getCenter()
const z = e.target.getZoom()
const p = e.target.getPitch()
const b = e.target.getBearing()
const d = e.target.getContainer().getAttribute('id')
maps.forEach(map => {
if(d !== map.getContainer().getAttribute('id')) {
map.jumpTo({
center: c,
zoom: z,
pitch: p,
bearing: b
});
}
})
}
</script>
</body>
</html>
网友评论