mapbox-gl-compare在vue中的引用

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-compare官网样例：https://www.mapbox.com/mapbox-gl-js/example/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
});