---
title: 底图切换组件
date: 2023-07-17
---
[[toc]]

## 1. jt-basemaps 简介
- 用于切换底图功能的组件
- 标注层与地形的显隐控制

## 2.Warning 

::: warning 注意
- 获取底图与标注、地形数据的js接口写在Map3DMain.vue页面中，图层及底图数据存储在store内，加载大球时需要加载默认底图等图层！！！
- 使用ref标记组件时，同时需要定义标记名称！具体可参考CIM平台地形分析组件写法！
:::


## 3. jt-basemaps API
| 属性名   | 说明 |     类型 |    是否必须  |
| :----- | :-------: | :-------: | :-------: |
| basemaps |  全部底图数组  | array |   是 |
| selectImg |  选中底图图片  | num |   是 |
| selectBaseMap |  选中的底图图层  | obj |   是 |
| isTerrain |  是否显示地形  | boolean |   是 |
| terrainData |  地形数据  | obj |   是 |
| isMark |  是否显示标注层  | boolean |   是 |
| markData |  标注数据  | obj |   是 |


## 4. jt-basemaps methods API
| 方法名   | 说明 |     类型 |    是否必须  |
| :----- | :-------: | :-------: | :-------: |
| changeTerrain |  控制地形显示隐藏方法  | methods |   是 |
| changeMark |  控制标注显示隐藏方法  | methods |   是 |
| changeBasemaps |  选中的底图图层  | methods |   是 |



## 5. 代码示例
```
<template>
	<jt-popup title="底图切换">
		<jt-basemaps :basemaps="basemaps" :selectImg="selectImg" :selectBaseMap="selectBaseMap" :isTerrain="isTerrain" :terrainData="terrainData" :isMark="isMark" :markData="markData" @changeTerrain="changeTerrain" @changeMark="changeMark" @changeBasemaps="changeBasemaps"></jt-basemaps>
	</jt-popup>
</template>

<script setup>
	import store from '@/store/index';
	const basemaps = computed(() => store.basemap.basemaps);
	const selectImg = computed(() => store.basemap.selectImg);
	const selectBaseMap = computed(() => store.basemap.selectBaseMap);
	const isTerrain = computed(() => store.terrain.isTerrain);
	const terrainData = computed(() => store.terrain.terrainData);
	const isMark = computed(() => store.mark.isMark);
	const markData = computed(() => store.mark.markData);
	
	onMounted(() => {
		basemaps.value = store.map3dStore.basemap.basemaps;
		selectImg.value = store.map3dStore.basemap.selectImg;
		selectBaseMap.value = store.map3dStore.basemap.selectBaseMap;
	
		isTerrain.value = store.map3dStore.terrain.isTerrain;
		terrainData.value = store.map3dStore.terrain.terrainData;
	
		isMark.value = store.map3dStore.mark.isMark;
		markData.value = store.map3dStore.mark.markData;
	
		isDataOnload.value = true;
	
	})
	
	//地形显示隐藏
	const changeTerrain = (isTerrain) => {
		store.terrain.isTerrain = isTerrain;
	}
	//标注显示隐藏
	const changeMark = (isMark) => {
		store.mark.isMark = isMark;
	}
	//底图切换事件
	const changeBasemaps = (options) => {
		store.basemap.selectImg = options.selectImg;
	}
</script>
```

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