mapboxGL多图对比

2024-02-08 22:59

文章标签 对比 mapboxgl 多图

本文主要是介绍mapboxGL多图对比，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

概述

前面的文章mapboxGL卷帘里面实现的时候已经有涉及多图联动了，本文在此基础上进一步优化，加入鼠标位置展示。

效果

在这里插入图片描述

实现思路

注册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>