@mapmost/mapmost-webgl-compare

为Mapmost SDK for WebGL的定制插件，提供地图卷帘功能。

依赖 Mapmost SDK for WebGL，版本对应关系如下：

compare版本	SDK版本
v 1.0.0	v 3.3.0+

安装

npm install @mapmost/mapmost-webgl-compare

使用方式

使用modules

import mapmost from '@mapmost/mapmost-webgl';
import MapmostCompare from '@mapmost/mapmost-webgl-compare';
import '@mapmost/mapmost-webgl-compare/dist/mapmost-webgl-compare.css'

使用CDN

<script src ='https://delivery.mapmost.com/cdn/sdk/webgl/v9.0.0/mapmost-webgl-min.js'></script>
<script src='https://delivery.mapmost.com/cdn/sdk/plugins/mapmost-webgl-compare/v1.0.0/mapmost-webgl-compare.js'></script>
<link rel='stylesheet' href='https://delivery.mapmost.com/cdn/sdk/plugins/mapmost-webgl-compare/v1.0.0/mapmost-webgl-compare.css' type='text/css' />

参数

名称	类型	描述
mapA	Object	必填地图实例对象一。
mapB	Object	必填地图实例对象二。
container	String	必填放置两个地图的元素 id。
options	Object	可选参数 名称 类型 默认值 描述 mousemove Boolean false 可选如果为true，滑动条将随着光标移动，否则需要拖动滑动条才能移动。 orientation String vertical 可选设置滑动条的方向。"vertical"表示创建一个垂直滑动条，用于比较左边和右边的两个地图；"horizontal"表示创建一个水平滑动条，用于比较顶部和底部的两个地图。

方法

setSlider

设置滑动条的位置。

参数

名称	类型	描述
x	Number	必填滑动条位置，从左/上算起，以像素为单位。

案例

var compareMap = new mapmost.Compare(mapA, mapB, "comparison-wrapper", {});
compareMap.setSlider(100)

on

为指定类型的事件添加侦听器,返回值为Compare对象本身（this）。

参数

名称	类型	描述
type	String	必填要监听的事件类型，可以是slideend（滑动结束事件）。
listener	Function	必填当事件触发时要调用的函数。

案例

var compareMap = new mapmost.Compare(mapA, mapB, "comparison-wrapper", {});
compareMap.on('slideend', function() {

  // 在滑动结束事件触发时执行的代码
  console.log('滑动结束');
});

fire

触发指定类型的事件,返回值为Compare对象本身（this）。

参数

名称	类型	描述
type	String	必填要触发的事件类型，可以是slideend（滑动结束事件）。
data	Object	必填传递给事件监听器的数据。

案例

var compareMap = new mapmost.Compare(mapA, mapB, "comparison-wrapper", {});
compareMap.on('slideend', function (event) {
  console.log(event.message)
});
compareMap.fire('slideend', { message: 'Slide ended' }); // 触发滑动结束事件

off

移除先前使用Compare#on方法添加的事件监听器,返回值为Compare对象本身（this）。

参数

名称	类型	描述
type	String	必填先前用于安装监听器的事件类型。
listener	Function	必填先前安装的监听器函数

案例

var compareMap = new mapmost.Compare(mapA, mapB, "comparison-wrapper", {});
function slideEndHandler() {

  // 在滑动结束事件触发时执行的代码
  console.log('Slide ended');
}

compareMap.on('slideend', slideEndHandler);

compareMap.off('slideend', slideEndHandler);

使用示例

var mapA = new mapmost.Map({
    container: "before",
    center: [120.70899820084962, 31.339048513540533],
    zoom: 14,
    style: "<your style url one>",
    userId: '***', // 授权码
});

var mapB = new mapmost.Map({
    container: "after",
    center: [120.70899820084962, 31.339048513540533],
    zoom: 14,
    style: "<your style url two>",
    userId: '***', // 授权码
});

mapB.on('load', function () {
    var container = "comparison-wrapper";
    var compareMap = new mapmost.Compare(mapA, mapB, container, {
        orientation: 'vertical',
        mousemove: true
    });
})

参考 示例。