1.安裝包：

npm i mapbox-gl-compare -D

npm i mapbox-gl-sync-move -D

npm i events -D

在vue檔案中import包

import mapboxgl from  'mapbox-gl'
import Compare from 'mapbox-gl-compare'

在普通頁面中引入mapbox-gl和mapbox-gl-compare和mapbox-gl-compare.css即可使用

在vue頁面中使用import引入後mapboxgl.Compare()並不可用；

原始碼中最後一段是：

if (window.mapboxgl) {
  mapboxgl.Compare = Compare;
} else if (typeof module !== 'undefined') {
  module.exports = Compare;
}

可以看出因為mapboxgl沒有繫結到window上，所以此時mapbox.Compare也不能繫結到maoboxgl上；

此時我們可以手動繫結：執行下面樣例程式碼之前

新增--》 mapboxgl.Compare = Compare;手動將mapbox-gl-compare繫結到mapboxgl上就可以使用new mapboxgl.Compare了;

樣式檔案內容可以引入或者直接將樣式內容copy到頁面中（因為樣式檔案內容非常少，不想通過引用可以直接寫在頁面裡）

mapbox-gl-compare的js包和樣式檔案可以在官網樣例中獲取；

var beforeMap = new mapboxgl.Map({
    container: 'before',
    style: 'mapbox://styles/mapbox/light-v9',
    center: [0, 0],
    zoom: 0
});

var afterMap = new mapboxgl.Map({
    container: 'after',
    style: 'mapbox://styles/mapbox/dark-v9',
    center: [0, 0],
    zoom: 0
});

var map = new mapboxgl.Compare(beforeMap, afterMap, {
    // Set this to enable comparing two maps by mouse movement:
    // mousemove: true
});