提交
This commit is contained in:
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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');
|
||||
|
||||
@ -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(
|
||||
|
||||
@ -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)
|
||||
|
||||
Reference in New Issue
Block a user