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

---

title: 地图标绘组件

date: 2023-07-17

[[toc]]

1. jt-plot 简介

• 可实现点标绘类、二维平面类、三维立体类、军事标绘等类型的地图标绘

2.Warning

::: warning 注意

• 使用ref标记组件时，同时需要定义标记名称！具体可参考CIM平台地图标绘组件写法！ :::

3. jt-plot API

属性名	说明	类型	是否必须
viewer	视图	obj	是
currentSelect	默认展开类型(可选值点标绘类、二维平面类、三维立体类、军事标绘类)	string	否

4. 代码示例

<jt-popup title="地图标绘">
	<jt-plot ref="plotRef" :viewer="viewer" :currentSelect="currentSelect"></jt-plot>
</jt-popup>


<script setup>
	import {
		onMounted,
		onBeforeUnmount,
		ref,
		inject 
	} from "vue";
	
	import {
		useWidget
	} from "@/common/store/widget"
	const {
		disable,
		currentWidget
	} = useWidget();
	
	/**
	 * 获取地图对象
	 */
	const getMapInstance = inject("getMapInstance");
	let jtMap3d = getMapInstance();
	let viewer = jtMap3d._viewer

	//定义子组件实例，名称要和上面的ref相同
	const plotRef = ref(null);
	const currentSelect= ref('二维平面类');
	
	/**
	 * 即将销毁
	 */
	onBeforeUnmount(() => {
		// 释放当前的widget
		disable(currentWidget.name);
	});
	
</script>