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

```

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