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

---

title: 视角书签组件

date: 2023-07-17

[[toc]]

1. jt-bookmark 简介

• 用于展示视角书签的组件
• 添加、查询、删除视角书签功能，书签定位

2.Warning

::: warning 注意

• 此页面写法基本固定，可直接使用，仅在业务需求改变或者是数据库更改时有变动！！所有传递参数皆由数据库或者store内获取！！！
• 使用ref标记组件时，同时需要定义标记名称！具体可参考CIM平台视角标签组件写法！ :::

3. jt-bookmark API

属性名	说明	类型	是否必须
viewer	从jtMap3d实例获取	obj	是
imgurlList	书签列表	array	是
runtimeEnvironment	运行环境PC(默认)/APP	string	否

4. jt-bookmark methods API

方法名	说明	类型	是否必须
addBookmark	添加书签方法	methods	是
queryBookmark	查询书签方法	methods	是
deleteBookmark	删除书签方法	methods	是

5. 代码示例

<template>
	<jt-popup title="视角书签">
		<jt-bookMark :imgurlList="imgurlList" :viewer="viewer" @addBookmark="addBookmark" @queryBookmark="searchBookmark" @deleteBookmark="deleteBookmark" :runtimeEnvironment="runtimeEnvironment"></jt-bookMark>
	</jt-popup>
</template>

<script setup>
	import {
		onMounted,
		onBeforeUnmount,
		ref,
		inject
	} from "vue";
	import {
		ElMessage
	} from 'element-plus';
	import {
		useWidget
	} from "@/common/store/widget"
	const {
		disable,
		currentWidget
	} = useWidget();

	import $http from '@/utils/http.js';
	import store from '@/store/index';

	/**
	 * 获取地图对象
	 */
	const getMapInstance = inject("getMapInstance");
	let jtMap3d = getMapInstance();
	let viewer = jtMap3d._viewer;

	// 定义属性
	let runtimeEnvironment = store.appStore.runtimeEnvironment; //运行环境
	const bookmarkName = ref(''); //视角标签名称
	const imgurlList = ref([]); //截图地址列表

	onMounted(() => {
		//查询书签
		queryBookmark({
			tableName: 'map_angle', //表名
			sqlWhere: '', //查询条件
			orderByField: '', //排序字段
		});
	})

	/**
	 * 查询书签
	 */
	const queryBookmark = (options) => {
		getBookmark(options).then(res => {
			imgurlList.value = [];
			res.map(item => {
				let info = {
					latitude: item.x,
					longitude: item.y,
					height: item.z,
					pitch: item.pitch,
					roll: item.roll,
					heading: item.heading
				}

				imgurlList.value.push({
					url: item.screenshot,
					name: item.name,
					info: info,
					id: item.id
				})
			})
		});
	}

	/**
	 * 查询按钮事件
	 */
	const searchBookmark = (value) => {
		//添加底图图集
		queryBookmark({
			tableName: 'map_angle', //表名
			sqlWhere: "name like '%" + value + "%'", //查询条件
			orderByField: '' //排序字段
		});
	}

	/**
	 * 添加方法
	 */
	const addBookmark = (data) => {

		//在这里获取账户信息密码
		let person = store.userStore.user;
		data.userId = person.id

		//添加数据接口
		$http.post('/postSubmit', {
			tableName: 'map_angle',
			keyValue: '',
			formData: data,
		}).then(res => {
			if (res.success == true) {
				// document.getElementById("inputValue").value = ''
				ElMessage.success('添加成功！')
			}
		})
	}

	/**
	 * 删除方法
	 */
	const deleteBookmark = (id) => {
		$http.get('/delete', {
			tableName: 'map_angle',
			keyValue: id,
		}).then(res => {
			ElMessage.success('删除成功！')
		})
	}

	//获取默认标签列表
	const getBookmark = (options) => {
		return new Promise((resolve, reject) => {
			//获取
			$http.get('/getTableList', options).then(res => {
				if (res.data.length > 0) {
					resolve(res.data)
				}
			});
		});
	}

	/**
	 * 即将销毁
	 */
	onBeforeUnmount(() => {
		disable(currentWidget.name);
	});
</script>

<style lang="scss" scoped>
	.iconfont{
		font-size: 16rem !important;
	}
</style>