<template>
|
<div class="scene_bookmark">
|
<div class="bookmark_ctrl">
|
<el-input v-model="bookmarkName" placeholder="请输入标签名称" maxlength="15" show-word-limit clearable></el-input>
|
<el-button type="primary" @click="addBookmark()">新增</el-button>
|
</div>
|
<div class="bookmark_list">
|
<div class="bookmark_item" v-for="(item, index) in bookmarkList" :key="index">
|
<div class="bookmark_img"><img class="imgs" :src="item.imageUrl" :alt="item.name" @click="flyTo(item)">
|
</div>
|
<div class="bookmark_info">
|
{{ item.name }}
|
<el-tooltip class="item" effect="dark" content="清除涂鸦" placement="bottom">
|
<i class="el-icon-refresh" @click="refrush(item)"></i>
|
</el-tooltip>
|
<el-tooltip class="item" effect="dark" content="开始涂鸦" placement="bottom">
|
<i class="el-icon-picture-outline" @click="openInfo(item)"></i>
|
</el-tooltip>
|
<el-tooltip class="item" effect="dark" content="删除标签" placement="bottom">
|
<i class="el-icon-delete" @click="delInfo(item)"></i>
|
</el-tooltip>
|
</div>
|
</div>
|
</div>
|
|
<el-dialog title="涂鸦" :visible.sync="dialogVisible" width="80%" top="5vh" append-to-body
|
:close-on-click-modal="false" class="tuyaDiag">
|
<div class="drawing-container">
|
<div id="tui-image-editor"></div>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="save()">下 载</el-button>
|
<el-button @click="cancel()">取 消</el-button>
|
<el-button type="primary" @click="submit()">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import "tui-image-editor/dist/tui-image-editor.css";
|
import "tui-color-picker/dist/tui-color-picker.css";
|
import ImageEditor from "tui-image-editor";
|
import canvas2image from '@/utils/Canvas2Image'
|
import Base64ImgtoFile from '@/utils/Base64ImgtoFile'
|
import { supplementFile } from "@/api/usercenter";
|
import { saveOrUpdate, getBookmarkList, deleteById } from "@/api/sceneBookmark"
|
// 中文菜单
|
const locale_zh = {
|
ZoomIn: '放大',
|
ZoomOut: '缩小',
|
Hand: '手掌',
|
History: '历史',
|
Resize: '调整宽高',
|
Crop: '裁剪',
|
DeleteAll: '全部删除',
|
Delete: '删除',
|
Undo: '撤销',
|
Redo: '反撤销',
|
Reset: '重置',
|
Flip: '镜像',
|
Rotate: '旋转',
|
Draw: '画',
|
Shape: '形状标注',
|
Icon: '图标标注',
|
Text: '文字标注',
|
Mask: '遮罩',
|
Filter: '滤镜',
|
Bold: '加粗',
|
Italic: '斜体',
|
Underline: '下划线',
|
Left: '左对齐',
|
Center: '居中',
|
Right: '右对齐',
|
Color: '颜色',
|
'Text size': '字体大小',
|
Custom: '自定义',
|
Square: '正方形',
|
Apply: '应用',
|
Cancel: '取消',
|
'Flip X': 'X 轴',
|
'Flip Y': 'Y 轴',
|
Range: '区间',
|
Stroke: '描边',
|
Fill: '填充',
|
Circle: '圆',
|
Triangle: '三角',
|
Rectangle: '矩形',
|
Free: '曲线',
|
Straight: '直线',
|
Arrow: '箭头',
|
'Arrow-2': '箭头2',
|
'Arrow-3': '箭头3',
|
'Star-1': '星星1',
|
'Star-2': '星星2',
|
Polygon: '多边形',
|
Location: '定位',
|
Heart: '心形',
|
Bubble: '气泡',
|
'Custom icon': '自定义图标',
|
'Load Mask Image': '加载蒙层图片',
|
Grayscale: '灰度',
|
Blur: '模糊',
|
Sharpen: '锐化',
|
Emboss: '浮雕',
|
'Remove White': '除去白色',
|
Distance: '距离',
|
Brightness: '亮度',
|
Noise: '噪音',
|
'Color Filter': '彩色滤镜',
|
Sepia: '棕色',
|
Sepia2: '棕色2',
|
Invert: '负片',
|
Pixelate: '像素化',
|
Threshold: '阈值',
|
Tint: '色调',
|
Multiply: '正片叠底',
|
Blend: '混合色',
|
Width: '宽度',
|
Height: '高度',
|
'Lock Aspect Ratio': '锁定宽高比例'
|
}
|
|
// 画布组件自定义样式
|
const customTheme = {
|
"common.bi.image": "", // 左上角logo图片
|
"common.bisize.width": "0px",
|
"common.bisize.height": "0px",
|
"common.backgroundImage": "none",
|
"common.backgroundColor": "#f3f4f6",
|
"common.border": "1px solid #333",
|
|
// header
|
"header.backgroundImage": "none",
|
"header.backgroundColor": "#f3f4f6",
|
"header.border": "0px",
|
|
// load button
|
"loadButton.backgroundColor": "#fff",
|
"loadButton.border": "1px solid #ddd",
|
"loadButton.color": "#222",
|
"loadButton.fontFamily": "NotoSans, sans-serif",
|
"loadButton.fontSize": "12px",
|
"loadButton.display": "none", // 可以直接隐藏掉
|
|
// download button
|
"downloadButton.backgroundColor": "#fdba3b",
|
"downloadButton.border": "1px solid #fdba3b",
|
"downloadButton.color": "#fff",
|
"downloadButton.fontFamily": "NotoSans, sans-serif",
|
"downloadButton.fontSize": "12px",
|
"downloadButton.display": "none", // 可以直接隐藏掉
|
|
// icons default
|
"menu.normalIcon.color": "#8a8a8a",
|
"menu.activeIcon.color": "#555555",
|
"menu.disabledIcon.color": "#ccc",
|
"menu.hoverIcon.color": "#e9e9e9",
|
"submenu.normalIcon.color": "#8a8a8a",
|
"submenu.activeIcon.color": "#e9e9e9",
|
|
"menu.iconSize.width": "24px",
|
"menu.iconSize.height": "24px",
|
"submenu.iconSize.width": "32px",
|
"submenu.iconSize.height": "32px",
|
|
// submenu primary color
|
"submenu.backgroundColor": "#1e1e1e",
|
"submenu.partition.color": "#858585",
|
|
// submenu labels
|
"submenu.normalLabel.color": "#858585",
|
"submenu.normalLabel.fontWeight": "lighter",
|
"submenu.activeLabel.color": "#fff",
|
"submenu.activeLabel.fontWeight": "lighter",
|
|
// checkbox style
|
"checkbox.border": "1px solid #ccc",
|
"checkbox.backgroundColor": "#fff",
|
|
// rango style
|
"range.pointer.color": "#fff",
|
"range.bar.color": "#666",
|
"range.subbar.color": "#d1d1d1",
|
|
"range.disabledPointer.color": "#414141",
|
"range.disabledBar.color": "#282828",
|
"range.disabledSubbar.color": "#414141",
|
|
"range.value.color": "#fff",
|
"range.value.fontWeight": "lighter",
|
"range.value.fontSize": "11px",
|
"range.value.border": "1px solid #353535",
|
"range.value.backgroundColor": "#151515",
|
"range.title.color": "#fff",
|
"range.title.fontWeight": "lighter",
|
|
// colorpicker style
|
"colorpicker.button.border": "1px solid #1e1e1e",
|
"colorpicker.title.color": "#fff",
|
};
|
export default {
|
name: 'SceneBookmark',
|
data() {
|
return {
|
bookmarkName: "",
|
bookmarkList: [],
|
dialogVisible: false,
|
instance: {},
|
currentData: null
|
}
|
},
|
mounted() {
|
this.init()
|
},
|
methods: {
|
init() {
|
getBookmarkList("1").then(res => {
|
if (res.code === 200) {
|
this.bookmarkList = res.data
|
console.log(this.bookmarkList)
|
}
|
})
|
},
|
refrush(param) {
|
param.imageUrl = param.sceneUrl
|
saveOrUpdate(param).then(saveRes => {
|
if (saveRes.code === 200) {
|
this.init()
|
this.$message({
|
message: "修改成功！",
|
type: "success",
|
});
|
}
|
})
|
},
|
openInfo(param) {
|
this.currentData = param
|
this.dialogVisible = true
|
this.$nextTick(() => {
|
this.instance = new ImageEditor(
|
document.querySelector("#tui-image-editor"),
|
{
|
includeUI: {
|
loadImage: {
|
path: param.imageUrl.replace("http://103.85.165.99:9020/picture/", "/picture/") || 'https://img2.baidu.com/it/u=3768357380,1366719202&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
|
name: "image",
|
},
|
// initMenu: "draw",
|
menuBarPosition: "left",
|
locale: locale_zh,
|
theme: customTheme
|
},
|
cssMaxWidth: 1000,
|
cssMaxHeight: 800,
|
}
|
);
|
document.getElementsByClassName("tui-image-editor-main")[0].style.top = "0px"; // 图片距顶部工具栏的距离
|
})
|
},
|
delInfo(param) {
|
deleteById(param.id).then(res => {
|
if (res.code === 200) {
|
this.init()
|
}
|
})
|
},
|
cancel() {
|
this.dialogVisible = false
|
this.currentData = null
|
},
|
submit() {
|
const base64String = this.instance.toDataURL() // base64 文件
|
let fd = new FormData();
|
fd.append("file", Base64ImgtoFile(base64String, this.currentData.name.trim()));
|
supplementFile(fd).then(res => {
|
if (res.code === 200) {
|
this.currentData.imageUrl = res.data
|
saveOrUpdate(this.currentData).then(saveRes => {
|
if (saveRes.code === 200) {
|
this.init()
|
this.$message({
|
message: "修改成功！",
|
type: "success",
|
});
|
}
|
})
|
}
|
})
|
this.dialogVisible = false
|
},
|
save() {
|
const base64String = this.instance.toDataURL() // base64 文件
|
const data = window.atob(base64String.split(',')[1])
|
const ia = new Uint8Array(data.length)
|
for (let i = 0; i < data.length; i++) {
|
ia[i] = data.charCodeAt(i)
|
}
|
const blob = new Blob([ia], { type: 'image/png' }) // blob 文件
|
const form = new FormData()
|
form.append('image', blob)
|
let url = URL.createObjectURL(blob);
|
|
let eleLink = document.createElement('a');
|
eleLink.download = this.currentData.name;
|
eleLink.href = url;
|
eleLink.click();
|
eleLink.remove();
|
URL.revokeObjectURL(url);
|
},
|
addBookmark() {
|
if (this.bookmarkName.trim().length <= 0) {
|
this.$message.warning("标签名称不能为空!")
|
return
|
}
|
let sameBookmark = this.bookmarkList.find(res => {
|
return res.name.trim() === this.bookmarkName.trim()
|
})
|
if (sameBookmark && Object.keys(sameBookmark).length > 0) {
|
this.$message.warning("标签名已存在!")
|
return
|
}
|
|
//将场景出图
|
let earthCtrl = window.sgworld
|
var imageWidth = 1200;
|
let canvas = earthCtrl.Viewer.scene.canvas
|
var genimg = canvas2image.Canvas2Image.convertToImage(canvas, imageWidth, imageWidth * canvas.height / canvas.width, 'png');
|
|
let fd = new FormData();
|
fd.append("file", Base64ImgtoFile(genimg.src, this.bookmarkName.trim()));
|
supplementFile(fd).then(res => {
|
if (res.code === 200) {
|
let option = {
|
createTime:res.data.createTime,
|
userId: "1",
|
name: this.bookmarkName,
|
imageUrl: res.data.url,
|
sceneUrl: res.data.url,
|
longitude: earthCtrl.camera.position.longitude,
|
latitude: earthCtrl.camera.position.latitude,
|
height: earthCtrl.camera.position.height,
|
pitch: earthCtrl.camera.pitch,
|
heading: earthCtrl.camera.heading,
|
roll: earthCtrl.camera.roll,
|
id:"0"
|
}
|
saveOrUpdate(option).then(saveRes => {
|
if (saveRes.code === 200) {
|
this.init()
|
this.$message({
|
message: "上传成功！",
|
type: "success",
|
});
|
this.bookmarkName = ''
|
}
|
})
|
}
|
})
|
},
|
flyTo(param) {
|
console.log(param)
|
let earthCtrl = window.sgworld
|
earthCtrl.camera.flyTo(parseFloat(param.longitude),
|
parseFloat(param.latitude),
|
parseFloat(param.height),
|
parseFloat(param.heading),
|
parseFloat(param.pitch),
|
parseFloat(param.roll), 3)
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.tuyaDiag {
|
/deep/ .el-dialog__body {
|
padding: 0px;
|
}
|
}
|
|
.drawing-container {
|
height: 750px;
|
}
|
|
.scene_bookmark {
|
padding-top: 20px;
|
max-height: 605px;
|
|
.bookmark_ctrl {
|
display: flex;
|
justify-content: space-around;
|
|
/deep/ .el-input {
|
width: 70%;
|
}
|
}
|
|
|
.bookmark_list::-webkit-scrollbar {
|
width: 5px;
|
height: 1px;
|
}
|
|
.bookmark_list::-webkit-scrollbar-thumb {
|
border-radius: 10px;
|
background-color: #3384C6;
|
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
|
}
|
|
.bookmark_list::-webkit-scrollbar-track {
|
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
background: #ededed;
|
border-radius: 10px;
|
}
|
|
.bookmark_list {
|
max-height: 460px;
|
width: 100%;
|
overflow: auto;
|
overflow-x: hidden;
|
margin-top: 10px;
|
|
.bookmark_item {
|
margin: 3%;
|
height: 200px;
|
border-radius: 5px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
|
.bookmark_img {
|
border-radius: 5px;
|
height: 80%;
|
|
}
|
|
.imgs {
|
border-radius: 5px;
|
width: 100%;
|
height: 100%;
|
background-size: 100% 100%;
|
cursor: pointer;
|
}
|
|
.bookmark_info {
|
text-align: center;
|
line-height: 40px;
|
position: relative;
|
}
|
|
.el-icon-refresh {
|
position: absolute;
|
right: 70px;
|
top: 10px;
|
cursor: pointer;
|
}
|
|
.el-icon-picture-outline {
|
position: absolute;
|
right: 40px;
|
top: 10px;
|
cursor: pointer;
|
}
|
|
.el-icon-delete {
|
position: absolute;
|
right: 10px;
|
top: 10px;
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
</style>
|
