VUE中使用mapbox插件 Compare 出现的问题

VUE中使用mapbox插件

# mapbox-gl-compare

实现在两个地图之间滑动和同步。

安装

npm i mapbox-gl-compare -D
npm i mapbox-gl-sync-move -D

导入

import mapboxgl from ‘mapbox-gl’
import Compare from ‘mapbox-gl-compare’

出现问题

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

依据官网的例子 发现mapboxgl上没有Compare方法 无法实现功能

原因

查看源码 Compare方法 没有绑定到mapboxgl上

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

解决

手动绑定

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

导入css

@import'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.4.0/mapbox-gl-compare.css';

实现