JT-CIM-API/docs/theme-reco/jtbasemaps.md

---

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>