|
|
@@ -0,0 +1,233 @@
|
|
|
+<template>
|
|
|
+ <div class="sm-panel sm-function-module-content" v-if="BookmarkShow">
|
|
|
+ <div class="sm-panel-header">
|
|
|
+ <span>{{ Resource.BookMark }}</span>
|
|
|
+ <span class="closeBtn" @click="toggleVisibility">×</span>
|
|
|
+ </div>
|
|
|
+ <div class="flexbox">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入查询关键字"
|
|
|
+ prefix-icon="el-icon-search"
|
|
|
+ v-model="bookmarkSearchText"
|
|
|
+ size="small"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <el-button
|
|
|
+ @click="dialogVisible = true"
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ style="margin-left: 5px"
|
|
|
+ >添加</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ @click="clear"
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ style="margin-left: 5px"
|
|
|
+ >清除</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="flexbox" style="height: 260px; width: 100%">
|
|
|
+ <el-table
|
|
|
+ :show-header="false"
|
|
|
+ :data="tableData"
|
|
|
+ height="260"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ @row-click="handleRowClick"
|
|
|
+ >
|
|
|
+ <el-table-column prop="name" label="名称" width="230">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column fixed="right" label="操作" width="80">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ @click.stop="handleClickDel(scope.row)"
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-pagination
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handlePageChange"
|
|
|
+ :current-page="page"
|
|
|
+ :page-sizes="[10, 20, 50, 100]"
|
|
|
+ :page-size="size"
|
|
|
+ layout="total, sizes, prev, next"
|
|
|
+ :total="total"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ <el-dialog title="书签信息" :visible.sync="dialogVisible" width="300px">
|
|
|
+ <el-form ref="form" :model="form" label-width="80px" :rules="rules">
|
|
|
+ <el-form-item label="书签名称" prop="name">
|
|
|
+ <el-input v-model="form.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-button type="primary" size="mini" @click="onSubmit('form')"
|
|
|
+ >保存</el-button
|
|
|
+ >
|
|
|
+ <el-button size="mini" @click="dialogVisible = false">取消</el-button>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { BookmarkList, BookmarkAdd, BookmarkDel } from "@/api/map";
|
|
|
+export default {
|
|
|
+ name: "Bookmark",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableData: [],
|
|
|
+ bookmarkSearchText: "",
|
|
|
+ MapViewer: window.viewer,
|
|
|
+ total: 100,
|
|
|
+ page: 1,
|
|
|
+ size: 10,
|
|
|
+ billboardHeight: 10,
|
|
|
+ type: "bookmark",
|
|
|
+ dialogVisible: false,
|
|
|
+ form: {
|
|
|
+ name: "",
|
|
|
+ type: "bookmark",
|
|
|
+ info: "",
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ name: [{ required: true, message: "请输入书签名称", trigger: "blur" }],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ mounted() {
|
|
|
+ this.bookmarkquery();
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ BookmarkShow() {
|
|
|
+ return store.state.toolBar[11];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ toggleVisibility() {
|
|
|
+ store.setToolBarAction(11);
|
|
|
+ this.clear();
|
|
|
+ },
|
|
|
+ handlePageChange(cur, a, b) {
|
|
|
+ this.page = cur;
|
|
|
+ this.bookmarkquery();
|
|
|
+ },
|
|
|
+ handleSizeChange(cur, a, b) {
|
|
|
+ this.size = cur;
|
|
|
+ this.bookmarkquery();
|
|
|
+ },
|
|
|
+ bookmarkquery() {
|
|
|
+ BookmarkList({
|
|
|
+ name: this.bookmarkSearchText,
|
|
|
+ type: this.type,
|
|
|
+ limit: this.size,
|
|
|
+ offset: (this.page - 1) * this.size,
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.statuscode == 200) {
|
|
|
+ this.total = res.data.count;
|
|
|
+ this.tableData = res.data.data;
|
|
|
+ } else {
|
|
|
+ this.$message.error(e);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleClickDel(item) {
|
|
|
+ console.log(item);
|
|
|
+ this.$alert("确定删除吗？", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ callback: (action) => {
|
|
|
+ if (action != "cancel") {
|
|
|
+ BookmarkDel({ id: item.id }).then((res) => {
|
|
|
+ if (res.statuscode == 200) {
|
|
|
+ this.$message.success(res.message);
|
|
|
+ this.bookmarkquery();
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.message);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onSubmit(item) {
|
|
|
+ this.$refs[item].validate((valid) => {
|
|
|
+ let param = JSON.stringify({
|
|
|
+ camera: JSON.stringify({
|
|
|
+ position: viewer.camera.position,
|
|
|
+ heading: viewer.camera.heading,
|
|
|
+ roll: viewer.camera.roll,
|
|
|
+ pitch: viewer.camera.pitch,
|
|
|
+ }),
|
|
|
+ name: this.form.name,
|
|
|
+ });
|
|
|
+ this.form.info = param;
|
|
|
+ BookmarkAdd(this.form).then((res) => {
|
|
|
+ if (res.statuscode == 200) {
|
|
|
+ this.$message.success(res.message);
|
|
|
+ this.dialogVisible = false;
|
|
|
+ this.bookmarkquery();
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.message);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ clear() {
|
|
|
+ viewer.entities.removeAll();
|
|
|
+ this.bookmarkSearchText = "";
|
|
|
+ },
|
|
|
+ handleRowClick(row) {
|
|
|
+ let camera = JSON.parse(JSON.parse(row.info).camera);
|
|
|
+ viewer.camera.flyTo({
|
|
|
+ destination: new Cesium.Cartesian3(
|
|
|
+ camera.position.x,
|
|
|
+ camera.position.y,
|
|
|
+ camera.position.z
|
|
|
+ ),
|
|
|
+ orientation: {
|
|
|
+ heading: camera.heading, //绕垂直于地心的轴旋转
|
|
|
+ pitch: camera.pitch, //绕纬度线旋转
|
|
|
+ roll: camera.roll,
|
|
|
+ },
|
|
|
+ duration: 3,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 飞行定位
|
|
|
+ * @param {{destination:object,orientation:object|undefined}} param0
|
|
|
+ * @param {boolean} isLonLat -是否是经纬度坐标
|
|
|
+ */
|
|
|
+ flyTo({ destination, orientation }, isLonLat = false) {
|
|
|
+ if (isLonLat)
|
|
|
+ destination = Cesium.Cartesian3.fromDegrees(
|
|
|
+ destination.x,
|
|
|
+ destination.y,
|
|
|
+ destination.z || 0
|
|
|
+ );
|
|
|
+
|
|
|
+ viewer.camera.flyTo({
|
|
|
+ destination,
|
|
|
+ orientation,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ bookmarkSearchText: function () {
|
|
|
+ this.page = 1;
|
|
|
+ this.bookmarkquery();
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.el-input__inner {
|
|
|
+ color: black !important;
|
|
|
+}
|
|
|
+</style>
|
