概述

前面的文章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多圖對比概述效果實作思路實作代碼

概述

效果

實作思路

實作代碼