概述

前面的文章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>

复制

mapboxGL多图对比概述效果实现思路实现代码

概述

效果

实现思路

实现代码