mapbox 实现两个图层同步缩放功能的2种方法

1. 创建两个图层的容器

 <div id="map-wrap-init">
    <div id="map" ref="map"></div>
    <div id="map2" ref="map2"></div>
  </div>

2. 加载图层

案例1：style方式

 var style = {
        version: 8,
        name: 'Empty',
        metadata: {
          'mapbox:autocomposite': true,
          'mapbox:type': 'template'
        },
        //"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
        sources: {},
        layers: [
          {
            id: 'background',
            type: 'background',
            paint: {
              'background-color': 'rgba(0,255,0,0.4)'
            }
          }
        ]
      }
      var map = new mapboxgl.Map({
        container: 'map', // container id
        style: style,
        center: [-122.48369693756104, 37.83381888486939], // starting position [lng, lat]
        zoom: 14 // starting zoom
      })

      map.on('load', function () {
        map.addLayer({
          id: 'route',
          type: 'line',
          source: {
            type: 'geojson',
            data: {
              type: 'Feature',
              properties: {},
              geometry: {
                type: 'LineString',
                coordinates: [
                  [-122.48369693756104, 37.83381888486939],
                  [-122.48348236083984, 37.83317489144141],
                  [-122.48339653015138, 37.83270036637107],
                  [-122.48356819152832, 37.832056363179625],
                  [-122.48404026031496, 37.83114119107971],
                  [-122.48404026031496, 37.83049717427869],
                  [-122.48348236083984, 37.829920943955045],
                  [-122.48356819152832, 37.82954808664175],
                  [-122.48507022857666, 37.82944639795659],
                  [-122.48610019683838, 37.82880236636284],
                  [-122.48695850372314, 37.82931081282506],
                  [-122.48700141906738, 37.83080223556934],
                  [-122.48751640319824, 37.83168351665737],
                  [-122.48803138732912, 37.832158048267786],
                  [-122.48888969421387, 37.83297152392784],
                  [-122.48987674713133, 37.83263257682617],
                  [-122.49043464660643, 37.832937629287755],
                  [-122.49125003814696, 37.832429207817725],
                  [-122.49163627624512, 37.832564787218985],
                  [-122.49223709106445, 37.83337825839438],
                  [-122.49378204345702, 37.83368330777276]
                ]
              }
            }
          },
          layout: {
            'line-join': 'round',
            'line-cap': 'round'
          },
          paint: {
            'line-color': '#333',
            'line-width': 8
          }
        })
      })

案例2：瓦片方式

var style = {
      version: 8,
      name: 'Empty',
      metadata: {
        'mapbox:autocomposite': true,
        'mapbox:type': 'template',
      },
      //"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
      sources: {
        'global-ditu': {
          type: 'raster',
          tiles: ['瓦片地址'],
          tileSize: 256,
          zoomOffset: -1,
        },
        'land-ditu': {
          type: 'raster',
          tiles: ['瓦片地址'],
          tileSize: 256,
          zoomOffset: -1,
        },
      },
      layers: [
        {
          id: 'global-ditu-layer',
          type: 'raster',
          source: 'global-ditu',
        },
        {
          id: 'land-ditu-layer',
          type: 'raster',
          source: 'land-ditu',
        },
      ],
    };

    var map = new mapboxgl.Map({
      container: 'cesiumContainer', // container id
      style: style,
      center: [-122.48369693756104, 37.83381888486939], // starting position [lng, lat]
      zoom: 1.2, // starting zoom
    });
    
     map.on('load', function () { });
    

3. 实现同步缩放

• 方法一：使用 mapbox-gl-sync-move 插件

引入：import syncMove from 'mapbox-gl-sync-move';

使用：syncMove(...[this.map, this.map2]);

• 方法二：使用 getCenter + getZoom + getBearing + getPitch

使用：

     map2.on('move', function () {
        map.jumpTo({
          center: map2.getCenter(),
          zoom: map2.getZoom(),
          bearing: map2.getBearing(),
          pitch: map2.getPitch(),
        });
      });

4. 完整代码块：

  var style = {
      version: 8,
      name: 'Empty',
      metadata: {
        'mapbox:autocomposite': true,
        'mapbox:type': 'template',
      },
      //"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
      sources: {
        'global-ditu': {
          type: 'raster',
          tiles: ['瓦片地址'],
          tileSize: 256,
          zoomOffset: -1,
        },
        'land-ditu': {
          type: 'raster',
          tiles: ['瓦片地址'],
          tileSize: 256,
          zoomOffset: -1,
        },
      },
      layers: [
        {
          id: 'global-ditu-layer',
          type: 'raster',
          source: 'global-ditu',
        },
        {
          id: 'land-ditu-layer',
          type: 'raster',
          source: 'land-ditu',
        },
      ],
    };

    var map = new mapboxgl.Map({
      container: 'cesiumContainer', // container id
      style: style,
      center: [-122.48369693756104, 37.83381888486939], // starting position [lng, lat]
      zoom: 1.2, // starting zoom
    });

    map.on('load', function () { });

    // ---------------
    var style2 = {
      version: 8,
      name: 'Empty2',
      metadata: {
        'mapbox:autocomposite': true,
        'mapbox:type': 'template',
      },
      glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
      sources: {
        'land-ditu': {
          type: 'raster',
          tiles: ['瓦片地址'],
          tileSize: 256,
          zoomOffset: -1,
        },
      },
      layers: [
        {
          id: 'land-ditu-layer',
          type: 'raster',
          source: 'land-ditu',
        },
      ],
    };

    var map2 = new mapboxgl.Map({
      container: 'topLayerContainer', // container id
      style: style2,
      center: [-122.48369693756104, 37.83381888486939], // starting position [lng, lat]
      zoom: 1.2, // starting zoom
    });


    核心代码：
    map2.on('load', function () {
      map2.on('move', function () {
        map.jumpTo({
          center: map2.getCenter(),
          zoom: map2.getZoom(),
          bearing: map2.getBearing(),
          pitch: map2.getPitch(),
        });
      });

      //   syncMove(...[this.map, this.map2]);
    });