一秒GET地理数据变化，如何制作地图卷帘效果？！-优快云博客

本文链接：https://blog.youkuaiyun.com/Mapmost/article/details/144511068

地图卷帘工具是GIS中非常实用的功能，它允许用户通过交互式的方式对比不同图层或同一图层在不同时间点的状态，广泛应用于图层对比、时间序列分析、地理特征变化观察等场景，为城市规划、环境监测、生态研究等领域的分析和可视化提供了强大的支持，为用户提供了一个直观且强大的对比和分析工具。

下面让我们使用 Mapmost SDK for WebGL来实现地图卷帘效果吧！

动图封面

地图卷帘对比效果，基于Mapmost SDK for WebGL实现

一、引入相关插件

在Mapmost SDK for WebGL中地图卷帘是一个插件工具，使用时需要引入这个插件，首先我们在创建的HTML页面中引入地图卷帘插件和样式文件，并添加放置地图的DOM元素。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <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;
      }
      .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>
    </script>
  </body>
</html>

上述代码中创建了一个HTML页面，在<body>元素中添加了id为comparison-wrapper的div元素，在这个div元素中创建了两个存放地图的div容器，随后添加的地图将分别在这两个容器中显示。

二、初始化地图

在创建好HTML页面和存放地图的容器之后就可以创建和显示地图了。

<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>

在上面代码中，通过mapmost.Map方法创建了两个地图，需要注意的是参数container的值需要对应存放地图容器元素的id属性，center为地图初次显示时的中心，zoom为地图的缩放层级，值越大地图视角越大，反之则越小。style为地图的样式，它决定了加载的地图是什么样的，它必须是一个符合 mapmost 样式规范中描述的模式的 JSON 对象，或者是此类 JSON 的 URL。userId是使用Mapmost SDK for WebGL地图引擎所必须的授权码，可以在官网中免费申请试用。

在两个地图加载完成后通过mapmost.Compare方法开启地图卷帘效果。

动图封面

矢量数据和栅格影像卷帘效果，基于Mapmost SDK for WebGL实现‍

三、卷帘配置

设置滑动条的位置

compareMap.setSlider(300)

上面代码通过setSlider方法设置滑动条的位置，从左/上算起，以像素为单位。

设置滑动条的起始位置，基于Mapmost SDK for WebGL实现

设置滑动条跟随光标移动

var compareMap = new mapmost.Compare(mapA, mapB, container, {
  。。。
  mousemove: true
});

在开启卷帘效果的方法中添加mousemove参数，并设置为true，卷帘效果会跟随着鼠标的移动而移动。

动图封面

设置滑动条鼠标跟随，来源：Mapmost平台

设置卷帘的方向

var compareMap = new mapmost.Compare(mapA, mapB, container, {
  。。。
  orientation: 'horizontal'
});

在开启卷帘效果的方法中添加orientation参数，orientation参数的默认值为"vertical"也就是滑动条是垂直的，将值修改为"horizontal"创建的是水平的滑动条。

设置滑动条方向为水平，来源：Mapmost平台

隐藏滑动条标签

创建地图卷帘时，为了美观会有不需要滑动条显示的需求，通过控制滑动条的样式控制显隐。

let slider = document.getElementsByClassName("mapmostgl-compare");
slider[0].style.display = "none"

上述代码通过滑动条元素的类名隐藏标签。

关注 Mapmost，持续更新 GIS、三维美术、计算机技术干货

Mapmost 是一套以三维地图和时空计算为特色的数字孪生底座平台，包含了空间数据管理工具（Studio）、应用开发工具（SDK）、应用创作工具（Alpha）。平台能力已覆盖城市时空数据的集成、多源数据资源的发布管理，以及数字孪生应用开发工具链，满足企业开发者用户快速搭建数字孪生场景的切实需求，助力实现行业领先。

点击前往Mapmost官网体验！