---
title: 卷帘对比组件
date: 2023-07-17
---
[[toc]]

## 1. jt-mapSplit 简介
- 同一大球左右两侧展示不同的图层信息，进行对比

## 2.Warning 

::: warning 注意
- 获取图层数据代码参考CIM平台！
- 使用ref标记组件时，同时需要定义标记名称！具体可参考CIM平台卷帘对比组件写法！
:::


## 3. jt-mapSplit API
| 属性名   | 说明 |     类型 |    是否必须  |
| :----- | :-------: | :-------: | :-------: |
| viewer |  从jtMap3d实例获取  | obj |   是 |
| leftModel |  左侧默认打开图层  | obj |   是 |
| rightModel | 右侧默认打开图层  | obj |   是 |
| leftData | 左侧图层列表  | obj |   是 |
| rightData | 右侧图层列表  | obj |   是 |




## 4. 代码示例
```
<jt-popup title="卷帘对比" showfooter="false" height="120rem" width="620rem" :isEmit="true">
	<JtMapSplit ref="mapSplitRef" :viewer="viewer" :leftModel="leftModel" :leftData="leftData" :rightModel="rightModel" :rightData="rightData"></JtMapSplit>
</jt-popup>

```

<style>
    blockquote {
  line-height: 22px;
  border-radius: 5px;
  display: block;
  margin-bottom: 0.8em;
  font-family: "黑体";
  background: rgba(230,162,60,.1) !important;
  border-color: #f56c6c;
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 85%;
  color: #000;
  padding-left: 1em;
}


blockquote p {
  padding-left: 3px; 
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 85%;
  color: #000;
}

blockquote code {
  background: rgba(230,162,60,.1) !important;
  font-weight: bold;
}
</style>