跳到主要内容
版本：9.2.0

地图卷帘

提供对两个地图之间滑动并同步视角比较的支持。

show
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src ='https://delivery.mapmost.com/cdn/sdk/webgl/v9.2.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' />
  <title>Compare</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    body * {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    .map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }

  </style>
</head>

<body>

  <div id='comparison-wrapper'>
    <div id='before' class='map'></div>
    <div id='after' class='map'></div>
  </div>

  <script>
    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
        });
    })

  </script>
</body>

</html>