<template>
|
<div id="mapInfo" class="modelBox" v-drag>
|
<div>
|
<div class="modleTitle ">
|
<div>属性信息</div>
|
<div class="modelClose" @click="$store.state.isshowZhaiHai = false"> X</div>
|
</div>
|
</div>
|
<div class="modelContent ">
|
<div class="pdDialog" style="height: 100%;width: 100%; ">
|
<canvas id="pdCanvas">
|
</canvas>
|
</div>
|
</div>
|
|
|
</div>
|
</template>
|
|
<script>
|
|
|
|
|
export default {
|
name: "zhaiHaiInfo",
|
components: {
|
|
},
|
|
data() {
|
return {
|
properties: null,
|
|
};
|
},
|
mounted() {
|
this.setLayerStart();
|
},
|
destroyed() {
|
|
},
|
methods: {
|
|
setLayerStart() {
|
this.properties = this.$store.state.showZhaiHaiImg;
|
this.renderCanvas(this.properties)
|
},
|
renderCanvas(properties) {
|
// 图片加载成功后
|
const imgs = new Image()
|
let imgSrc = "http://222.128.27.75:18010/thumb/production/road_detection_v4/"
|
+ properties.projectId + "/distress_track_processor_v5/output/"
|
+ properties.trackId + "/bev_video/"
|
+ properties.trackId + ".mp4/thumb-"
|
+ (properties.frameNo - 1) * 10 + ".jpg"
|
imgs.crossOrigin = 'Anonymous'
|
imgs.setAttribute('crossOrigin', 'Anonymous')
|
imgs.src = imgSrc;
|
imgs.onerror = () => {
|
console.error('图片加载失败!');
|
return false
|
}
|
var that = this;
|
imgs.onload = () => {
|
let imgHeight = 0,
|
imgWidth = 0;
|
|
let gridSize = [
|
properties.G_WIDTH || 40, properties.G_WIDTH || 44
|
]
|
const canvas = document.getElementById('pdCanvas');
|
if (!canvas) { return }
|
const ctx = canvas.getContext('2d');
|
const _frame = document.getElementsByClassName('pdDialog')[0];
|
const canvasWidth = _frame.offsetWidth;
|
const canvasHeight = _frame.offsetHeight;
|
// console.log(imgs)
|
|
// var originalHeight = imgs.HEIGHT||761 / 1;
|
// var originalWidth = imgs.WIDTH||1523 / 1;
|
var originalHeight = Number(properties.HEIGHT) || 800 / 1;
|
var originalWidth = Number(properties.WIDTH) || 1600 / 1;
|
// 画布宽高比
|
const canvasRatio = canvasWidth / canvasHeight;
|
// 图片的宽高比
|
var whRatio = originalWidth / originalHeight;
|
// 图片相对于画布的尺寸进行调整
|
// 如果图片的宽高比大于画布的宽高比
|
if (whRatio > canvasRatio) {
|
imgWidth = canvasWidth;
|
imgHeight = imgWidth / whRatio;
|
} else {
|
imgHeight = canvasHeight;
|
imgWidth = imgHeight * whRatio;
|
}
|
whRatio = imgWidth / imgHeight;
|
canvas.height = imgHeight;
|
canvas.width = imgWidth;
|
//绘制背景图
|
ctx.drawImage(
|
imgs,
|
0,
|
0,
|
imgWidth,
|
imgHeight
|
)
|
|
var scaleGridSizeX = imgWidth / originalWidth * gridSize[0];
|
var scaleGridSizeY = imgHeight / originalHeight * gridSize[1];
|
var scaleGridSize = [
|
scaleGridSizeX, scaleGridSizeY
|
];
|
that.drawMarker(ctx, scaleGridSize, properties);
|
}
|
},
|
drawMarker(ctx, scaleGridSize, properties) {
|
let width = scaleGridSize[0];
|
let height = scaleGridSize[0];
|
let _grids = [];
|
|
var grid = properties.grids._value
|
if (!Array.isArray(grid)) {
|
_grids = JSON.parse(grid)
|
} else {
|
_grids =grid;
|
}
|
_grids.forEach(m => {
|
let x = m[0] * width;
|
let y = m[1] * height;
|
let markerImg = new Image();
|
|
let markerImgSrc = 'https://webapi.kuandeng.net/gs/pddemo/pdmarker/' + properties.type + '.png';
|
markerImg.crossOrigin = 'Anonymous'
|
markerImg.setAttribute('crossOrigin', 'Anonymous')
|
markerImg.src = markerImgSrc;
|
|
markerImg.onload = () => {
|
ctx.drawImage(markerImg,
|
x,
|
y,
|
width,
|
height)
|
}
|
|
})
|
}
|
}
|
};
|
</script>
|
|
<style scoped lang="less">
|
.modelBox {
|
width: 40%;
|
height: 50%;
|
border: 1px solid white;
|
top: 25%;
|
left: 30%;
|
|
background-color: rgba(0, 0, 0, 0.6); // #0048fd69 !important
|
z-index: 9999;
|
position: absolute;
|
|
|
.modleTitle {
|
height: 42px;
|
width: 90%;
|
background: #0048fd69 !important;
|
border-bottom: 1px solid white;
|
color: white;
|
font-weight: 700px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0% 5%;
|
|
.modelClose {
|
height: 16px;
|
width: 16px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background: rgba(128, 128, 128, 0.6);
|
font-size: 14x;
|
|
}
|
}
|
|
.modelContent {
|
width: 100%;
|
height: calc(100% - 42px);
|
// margin: 1%;
|
// display: flex;
|
// justify-content: space-between;
|
|
|
|
|
|
}
|
|
|
}
|
</style>
|
