This commit is contained in:
zh
2025-11-17 17:12:03 +08:00
parent df2c1735bc
commit 7e6b6c0fca
38 changed files with 1460 additions and 379 deletions

View File

@ -14,15 +14,15 @@ function html() {
<div class="div-item">
<div class="row">
<div class="col">
<input type="checkbox" name="isTotalTime" style="width: 16px; line-height: 15px; height: 15px; cursor: pointer; width: auto; margin-right: 5px;">
<span class="label">设置总时长</span>
<div class="input-number input-number-unit-3">
<input class="input total-time" type="number" title="" min="0" max="999999.99" step="0.01" name="totalTime" value="0">
<span class="unit" style="top: 6px;">秒(s)</span>
<span class="arrow"></span>
</div>
<button class="set-total-time-btn" style="margin-left: 5px;">应用</button>
</div>
<div class="col">
<div class="col" style="justify-content: flex-end;">
<input type="checkbox" name="repeat" style="width: 16px; line-height: 15px; height: 15px; cursor: pointer; width: auto; margin-right: 5px;">
<span class="label">是否循环播放</span>
</div>

View File

@ -139,11 +139,10 @@ const open = async (sdk, options = {}, _Dialog = {}) => {
})
let totalTimeElm = contentElm.querySelector("input[name='totalTime']")
let isTotalTimeElm = contentElm.querySelector("input[name='isTotalTime']")
let repeatElm = contentElm.querySelector("input[name='repeat']")
isTotalTimeElm.addEventListener('change', () => {
let trList = tableBody.getElementsByClassName('tr')
if (isTotalTimeElm.checked && trList.length > 0) {
let setTotalTimeBtn = contentElm.getElementsByClassName('set-total-time-btn')[0]
setTotalTimeBtn.addEventListener('click', () => {
if (points.length > 0) {
let trList = tableBody.getElementsByClassName('tr')
let time = Number((Number(totalTimeElm.value) / (trList.length - 1)).toFixed(2))
for (let i = 0; i < trList.length - 1; i++) {
points[i].duration = time
@ -152,20 +151,12 @@ const open = async (sdk, options = {}, _Dialog = {}) => {
trList[trList.length - 1].querySelector("input[name='time']").value = 0
}
})
let repeatElm = contentElm.querySelector("input[name='repeat']")
totalTimeElm.addEventListener('blur', () => {
let trList = tableBody.getElementsByClassName('tr')
totalTimeElm.value = Number(totalTimeElm.value)
if (totalTimeElm.value < 0) {
totalTimeElm.value = 0
}
if (isTotalTimeElm.checked && trList.length > 0) {
let time = Number((Number(totalTimeElm.value) / (trList.length - 1)).toFixed(2))
for (let i = 0; i < trList.length - 1; i++) {
points[i].duration = time
trList[i].querySelector("input[name='time']").value = time
}
trList[trList.length - 1].querySelector("input[name='time']").value = 0
}
})
repeatElm.checked = (repeat === Infinity ? true : false)
repeatElm.addEventListener('change', () => {
@ -286,7 +277,6 @@ const open = async (sdk, options = {}, _Dialog = {}) => {
// }
})
e_time.addEventListener('input', (v) => {
isTotalTimeElm.checked = false
data.duration = Number(e_time.value)
if (data.duration < 0) {
data.duration = 0

View File

@ -6,7 +6,7 @@ import { getTemplateData } from './dataSource.js'
let tools = new Tools();
async function MapPrint(sdk, thumbnailImg, rectangle, originalImg) {
async function MapPrint(sdk, thumbnailImg, rectangle, originalImg, totalCanvas, scale) {
let exporting = false;
let templateData = getTemplateData(tools)
let _DialogObject
@ -290,21 +290,48 @@ async function MapPrint(sdk, thumbnailImg, rectangle, originalImg) {
let closeBtn
let exportBtn
let saveBtn
setTimeout(() => {
closeBtn = _DialogObject._element.foot.getElementsByClassName('close')[0]
exportBtn = document.createElement('button')
exportBtn.className = 'export';
exportBtn.innerHTML = '打印';
exportBtn.style.right = '150px'
leftElm.appendChild(closeBtn)
leftElm.appendChild(exportBtn)
saveBtn = document.createElement('button')
saveBtn.className = 'export';
saveBtn.innerHTML = '保存';
leftElm.appendChild(closeBtn)
leftElm.appendChild(saveBtn)
exportBtn.addEventListener('click', function () {
if (exporting) {
return
}
exporting = true
exportBtn.innerHTML = '<span style="position: absolute;width:100%;height:100%;top: 0;left: 0;border-radius: 3px;background-color: #6f89848f;"><svg class="icon-load"><use xlink:href="#yj-icon-load"></use></svg></span>打印'
exportMap()
saveBtn.innerHTML = '<span style="position: absolute;width:100%;height:100%;top: 0;left: 0;border-radius: 3px;background-color: #6f89848f;"><svg class="icon-load"><use xlink:href="#yj-icon-load"></use></svg></span>保存'
exportMap('export')
// exporting = true
// exportBtn.innerHTML = '<span style="position: absolute;width:100%;height:100%;top: 0;left: 0;border-radius: 3px;background-color: #6f89848f;"><svg class="icon-load"><use xlink:href="#yj-icon-load"></use></svg></span>打印'
// let imgBlobData = canvas.toDataURL();
// let downloadElement = document.createElement('a');
// downloadElement.href = imgBlobData;
// downloadElement.download = `高清出图-${getDateTimeString()}.png`;
// document.body.appendChild(downloadElement);
// downloadElement.click();
// document.body.removeChild(downloadElement);
// URL.revokeObjectURL(imgBlobData);
})
saveBtn.addEventListener('click', function () {
if (exporting) {
return
}
exporting = true
exportBtn.innerHTML = '<span style="position: absolute;width:100%;height:100%;top: 0;left: 0;border-radius: 3px;background-color: #6f89848f;"><svg class="icon-load"><use xlink:href="#yj-icon-load"></use></svg></span>打印'
saveBtn.innerHTML = '<span style="position: absolute;width:100%;height:100%;top: 0;left: 0;border-radius: 3px;background-color: #6f89848f;"><svg class="icon-load"><use xlink:href="#yj-icon-load"></use></svg></span>保存'
exportMap('save')
// exporting = true
// exportBtn.innerHTML = '<span style="position: absolute;width:100%;height:100%;top: 0;left: 0;border-radius: 3px;background-color: #6f89848f;"><svg class="icon-load"><use xlink:href="#yj-icon-load"></use></svg></span>打印'
// let imgBlobData = canvas.toDataURL();
@ -1197,12 +1224,52 @@ async function MapPrint(sdk, thumbnailImg, rectangle, originalImg) {
return `${year}${month}${day}${hours}${minutes}${seconds}${milliseconds}`;
}
function exportMap() {
function exportMap(type) {
let iframeDoc = document
let unitDistance2
let canvas2 = document.createElement('canvas');
let iframe
if (type === 'export') {
iframe = document.createElement('iframe');
iframe.id = 'printIframe';
// iframe.src = 'print.html';
iframe.frameborder = '0';
iframe.style.position = 'absolute';
iframe.style.zIndex = '-9999999';
iframe.style.width = '100vw';
iframe.style.height = '100vh';
iframe.style.left = '0';
iframe.style.top = '0';
document.body.appendChild(iframe);
iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
}
let canvas2 = iframeDoc.createElement('canvas');
if (type === 'export') {
canvas2.style.width = '100%'
canvas2.style.height = '100%'
canvas2.style.objectFit = 'contain';
iframeDoc.body.appendChild(canvas2);
}
let ctx2 = canvas2.getContext('2d');
let imgElm2 = new Image();
imgElm2.src = originalImg
if (type === 'export') {
const tempCanvas = document.createElement('canvas');
const tempCtx = tempCanvas.getContext('2d');
if(scale>=3) {
tempCanvas.width = totalCanvas.width / scale * 2
tempCanvas.height = totalCanvas.height / scale * 2
tempCtx.drawImage(totalCanvas, 0, 0, tempCanvas.width, tempCanvas.height);
imgElm2.src = tempCanvas.toDataURL('image/jpeg', 0.95)
}
else {
imgElm2.src = originalImg
}
}
else {
imgElm2.src = originalImg
}
imgElm2.onload = function () {
if (isLoad) {
return
@ -1416,17 +1483,36 @@ async function MapPrint(sdk, thumbnailImg, rectangle, originalImg) {
// 在释放资源后执行回调
canvas2.toBlob(function (blob) {
const url = URL.createObjectURL(blob);
let downloadElement = document.createElement('a');
downloadElement.href = url;
downloadElement.download = `高清出图-${getDateTimeString()}.png`;
document.body.appendChild(downloadElement);
downloadElement.click();
document.body.removeChild(downloadElement);
}, 'image/png', 0.95);
if (type === 'export') {
const iframeWindow = iframe.contentWindow;
if (iframeWindow && typeof iframeWindow.print === 'function') {
iframeWindow.addEventListener('afterprint', function () {
document.body.removeChild(iframe)
})
iframeWindow.print();
} else {
console.error('打印失败,请手动保存截图');
}
}
else {
canvas2.toBlob(function (blob) {
const url = URL.createObjectURL(blob);
let downloadElement = document.createElement('a');
downloadElement.href = url;
downloadElement.download = `高清出图-${getDateTimeString()}.png`;
document.body.appendChild(downloadElement);
downloadElement.click();
document.body.removeChild(downloadElement);
URL.revokeObjectURL(url);
}, 'image/png', 0.95);
}
exporting = false;
exportBtn.innerHTML = '打印';
saveBtn.innerHTML = '保存';
// canvas2.toBlob(function (blob) {
// let imgBlobData = URL.createObjectURL(blob);
// let downloadElement = document.createElement('a');

View File

@ -123,6 +123,7 @@ async function ScreenShotHD(sdk, options = {}, cd = () => { }) {
startScreenShotObject.desist()
startScreenShotObject = null
}
window.removeEventListener('resize', resize)
_DialogObject = undefined
}
})
@ -133,7 +134,7 @@ async function ScreenShotHD(sdk, options = {}, cd = () => { }) {
<div class="div-item">
<div class="row text" style="align-items: flex-start;">
<div class="col">
<span>当前窗口长宽:<span class="input-width">${sdk.viewer.canvas.width}</span>*<span class="input-height">${sdk.viewer.canvas.height}</span>像素</span>
<span>当前窗口长宽:<span class="input-width canvas-width-span">${sdk.viewer.canvas.width}</span>*<span class="input-height canvas-height-span">${sdk.viewer.canvas.height}</span>像素</span>
</div>
</div>
<div class="row scale-box" style="align-items: flex-start;">
@ -176,6 +177,17 @@ async function ScreenShotHD(sdk, options = {}, cd = () => { }) {
sdk.viewer.scene.screenSpaceCameraController.enableLook = false;
sdk.viewer._element.getElementsByClassName('compass')[0].style.pointerEvents = 'none'
window.addEventListener('resize', resize);
function resize() {
setTimeout(() => {
contentElm.getElementsByClassName('canvas-width-span')[0].innerHTML = sdk.viewer.canvas.width
contentElm.getElementsByClassName('canvas-height-span')[0].innerHTML = sdk.viewer.canvas.height
contentElm.getElementsByClassName('output-width')[0].innerHTML = sdk.viewer.canvas.width * scale
contentElm.getElementsByClassName('output-height')[0].innerHTML = sdk.viewer.canvas.height * scale
}, 500);
}
let centerResult = sdk.viewer.camera.pickEllipsoid(
new Cesium.Cartesian2(

View File

@ -166,6 +166,9 @@ function open(sdk) {
}
let isChanged = false
let rectangle = getViewExtend();
if(!rectangle) {
return
}
let minLng = Cesium.Math.toDegrees(rectangle.west)
let minLat = Cesium.Math.toDegrees(rectangle.south)