修改文本框
This commit is contained in:
@ -6,7 +6,17 @@ import { getTemplateData } from './dataSource.js'
|
||||
let tools = new Tools();
|
||||
|
||||
|
||||
async function MapPrint(sdk, thumbnailImg, rectangle, originalImg) {
|
||||
class MapPrint {
|
||||
constructor(sdk, thumbnailImg, rectangle, originalImg, modify) {
|
||||
this.sdk = sdk
|
||||
this.thumbnailImg = thumbnailImg
|
||||
this.rectangle = rectangle
|
||||
this.originalImg = originalImg
|
||||
this.modify = modify
|
||||
this.load()
|
||||
}
|
||||
async load() {
|
||||
let _this = this
|
||||
let exporting = false;
|
||||
let templateData = getTemplateData(tools)
|
||||
let _DialogObject
|
||||
@ -84,7 +94,7 @@ async function MapPrint(sdk, thumbnailImg, rectangle, originalImg) {
|
||||
_DialogObject.close()
|
||||
_DialogObject = null
|
||||
}
|
||||
_DialogObject = await new Dialog(sdk, {}, {
|
||||
_DialogObject = await new Dialog(this.sdk, {}, {
|
||||
title: '地图打印', left: '5%', top: '10%', ismove: false
|
||||
})
|
||||
_DialogObject._element.body.className = _DialogObject._element.body.className + ' map-print'
|
||||
@ -184,7 +194,7 @@ async function MapPrint(sdk, thumbnailImg, rectangle, originalImg) {
|
||||
let ctx = canvas.getContext('2d');
|
||||
rightElm.appendChild(canvas)
|
||||
let imgElm = new Image();
|
||||
imgElm.src = thumbnailImg
|
||||
imgElm.src = this.thumbnailImg
|
||||
|
||||
imgElm.onload = function () {
|
||||
isLoad = false
|
||||
@ -528,6 +538,7 @@ async function MapPrint(sdk, thumbnailImg, rectangle, originalImg) {
|
||||
margin = ((!templateData[i].margin && templateData[i].margin != 0) ? margin : templateData[i].margin)
|
||||
data = templateData[i].data || data
|
||||
border = templateData[i].border || border
|
||||
border.show = _this.modify
|
||||
border.color = border.color || '#000000'
|
||||
plottingScale = templateData[i].plottingScale || plottingScale
|
||||
break
|
||||
@ -1126,7 +1137,6 @@ async function MapPrint(sdk, thumbnailImg, rectangle, originalImg) {
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
updateCanvas();
|
||||
}
|
||||
});
|
||||
@ -1161,13 +1171,13 @@ async function MapPrint(sdk, thumbnailImg, rectangle, originalImg) {
|
||||
});
|
||||
|
||||
function getPlottingScale() {
|
||||
if (!rectangle) {
|
||||
if (!_this.rectangle) {
|
||||
return
|
||||
}
|
||||
let westLng = Cesium.Math.toDegrees(rectangle.west)
|
||||
let eastLng = Cesium.Math.toDegrees(rectangle.east)
|
||||
let northLat = Cesium.Math.toDegrees(rectangle.north)
|
||||
let southLat = Cesium.Math.toDegrees(rectangle.south)
|
||||
let westLng = Cesium.Math.toDegrees(_this.rectangle.west)
|
||||
let eastLng = Cesium.Math.toDegrees(_this.rectangle.east)
|
||||
let northLat = Cesium.Math.toDegrees(_this.rectangle.north)
|
||||
let southLat = Cesium.Math.toDegrees(_this.rectangle.south)
|
||||
|
||||
let from = turf.point([westLng, northLat]);
|
||||
let to = turf.point([eastLng, northLat]);
|
||||
@ -1202,7 +1212,7 @@ async function MapPrint(sdk, thumbnailImg, rectangle, originalImg) {
|
||||
let canvas2 = document.createElement('canvas');
|
||||
let ctx2 = canvas2.getContext('2d');
|
||||
let imgElm2 = new Image();
|
||||
imgElm2.src = originalImg
|
||||
imgElm2.src = _this.originalImg
|
||||
imgElm2.onload = function () {
|
||||
if (isLoad) {
|
||||
return
|
||||
@ -1337,13 +1347,13 @@ async function MapPrint(sdk, thumbnailImg, rectangle, originalImg) {
|
||||
}
|
||||
|
||||
function getPlottingScale() {
|
||||
if (!rectangle) {
|
||||
if (!_this.rectangle) {
|
||||
return
|
||||
}
|
||||
let westLng = Cesium.Math.toDegrees(rectangle.west)
|
||||
let eastLng = Cesium.Math.toDegrees(rectangle.east)
|
||||
let northLat = Cesium.Math.toDegrees(rectangle.north)
|
||||
let southLat = Cesium.Math.toDegrees(rectangle.south)
|
||||
let westLng = Cesium.Math.toDegrees(_this.rectangle.west)
|
||||
let eastLng = Cesium.Math.toDegrees(_this.rectangle.east)
|
||||
let northLat = Cesium.Math.toDegrees(_this.rectangle.north)
|
||||
let southLat = Cesium.Math.toDegrees(_this.rectangle.south)
|
||||
|
||||
let from = turf.point([westLng, northLat]);
|
||||
let to = turf.point([eastLng, northLat]);
|
||||
@ -1443,7 +1453,7 @@ async function MapPrint(sdk, thumbnailImg, rectangle, originalImg) {
|
||||
// });
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
export default MapPrint
|
||||
@ -76,11 +76,19 @@ async function ScreenShot(sdk, cd = () => { }) {
|
||||
}
|
||||
|
||||
let _DialogObject
|
||||
let startScreenShotObject
|
||||
|
||||
async function ScreenShotHD(sdk, options = {}, cd = () => { }) {
|
||||
async function ScreenShotHD(sdk, confirm = true, params, cd = () => { }) {
|
||||
if (!sdk) {
|
||||
return
|
||||
}
|
||||
if (!confirm) {
|
||||
if (startScreenShotObject) {
|
||||
startScreenShotObject.desist()
|
||||
startScreenShotObject = null
|
||||
}
|
||||
return
|
||||
}
|
||||
offSplitScreen(sdk)
|
||||
offMultiViewportMode(sdk)
|
||||
if (_DialogObject) {
|
||||
@ -92,84 +100,84 @@ async function ScreenShotHD(sdk, options = {}, cd = () => { }) {
|
||||
let enableTilt = sdk.viewer.scene.screenSpaceCameraController.enableTilt
|
||||
let enableLook = sdk.viewer.scene.screenSpaceCameraController.enableLook
|
||||
|
||||
let scale = 1
|
||||
let scale = params.scaleV * 1
|
||||
let level
|
||||
|
||||
let progressInputElm
|
||||
let progressBarElm
|
||||
let rangeNodeActive
|
||||
let rangeNodeActiveText
|
||||
let startScreenShotObject
|
||||
// let startScreenShotObject
|
||||
let tools = new Tools();
|
||||
_DialogObject = await new Dialog(sdk, {}, {
|
||||
title: '高清出图', left: '180px', top: '100px',
|
||||
confirmCallBack: (options) => {
|
||||
if (startScreenShotObject) {
|
||||
startScreenShotObject.desist()
|
||||
startScreenShotObject = null
|
||||
}
|
||||
progressInputElm && (progressInputElm.style.width = '0%')
|
||||
rangeNodeActive && (rangeNodeActive.style.left = '0%')
|
||||
progressBarElm && (progressBarElm.style.width = '0%')
|
||||
rangeNodeActiveText && (rangeNodeActiveText.innerHTML = '0%')
|
||||
startScreenShotObject = new startScreenShot()
|
||||
},
|
||||
closeCallBack: () => {
|
||||
sdk.viewer.scene.screenSpaceCameraController.enableTranslate = enableTranslate;
|
||||
sdk.viewer.scene.screenSpaceCameraController.enableTilt = enableTilt;
|
||||
sdk.viewer.scene.screenSpaceCameraController.enableLook = enableLook;
|
||||
sdk.viewer._element.getElementsByClassName('compass')[0].style.pointerEvents = 'auto'
|
||||
if (startScreenShotObject) {
|
||||
startScreenShotObject.desist()
|
||||
startScreenShotObject = null
|
||||
}
|
||||
_DialogObject = undefined
|
||||
}
|
||||
})
|
||||
_DialogObject._element.body.className = _DialogObject._element.body.className + ' screenShotHD'
|
||||
let contentElm = document.createElement('div');
|
||||
contentElm.innerHTML = `
|
||||
<span class="custom-divider"></span>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row scale-box" style="align-items: flex-start;">
|
||||
<div class="col">
|
||||
<span class="label">图片大小</span>
|
||||
<div class="input input-select scale"></div>
|
||||
<span>倍窗口</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row text" style="align-items: flex-start;">
|
||||
<div class="col">
|
||||
<span>输出图片长宽:<span class="output-width">${sdk.viewer.canvas.width * scale}</span>*<span class="output-height">${sdk.viewer.canvas.height * scale}</span>像素</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="align-items: flex-start; margin-bottom: 20px;">
|
||||
<div class="col">
|
||||
<span class="label">输出进度</span>
|
||||
<div class="range-box">
|
||||
<div class="range-bg">
|
||||
<div class="range-process-box">
|
||||
<div class="range-process"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="range-node-box">
|
||||
<span class="range-node-text">0%</span>
|
||||
<span class="range-node-text">100%</span>
|
||||
<div class="range-node-active"><span class="range-node-active-text">0%</span></div>
|
||||
</div>
|
||||
<input class="progress-input" type="range" max="100" min="0" step="0.01">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
`
|
||||
_DialogObject.contentAppChild(contentElm)
|
||||
// _DialogObject = await new Dialog(sdk, {}, {
|
||||
// title: '高清出图', left: '180px', top: '100px',
|
||||
// confirmCallBack: (options) => {
|
||||
// if (startScreenShotObject) {
|
||||
// startScreenShotObject.desist()
|
||||
// startScreenShotObject = null
|
||||
// }
|
||||
// progressInputElm && (progressInputElm.style.width = '0%')
|
||||
// rangeNodeActive && (rangeNodeActive.style.left = '0%')
|
||||
// progressBarElm && (progressBarElm.style.width = '0%')
|
||||
// rangeNodeActiveText && (rangeNodeActiveText.innerHTML = '0%')
|
||||
// startScreenShotObject = new startScreenShot()
|
||||
// },
|
||||
// closeCallBack: () => {
|
||||
// sdk.viewer.scene.screenSpaceCameraController.enableTranslate = enableTranslate;
|
||||
// sdk.viewer.scene.screenSpaceCameraController.enableTilt = enableTilt;
|
||||
// sdk.viewer.scene.screenSpaceCameraController.enableLook = enableLook;
|
||||
// sdk.viewer._element.getElementsByClassName('compass')[0].style.pointerEvents = 'auto'
|
||||
// if (startScreenShotObject) {
|
||||
// startScreenShotObject.desist()
|
||||
// startScreenShotObject = null
|
||||
// }
|
||||
// _DialogObject = undefined
|
||||
// }
|
||||
// })
|
||||
// _DialogObject._element.body.className = _DialogObject._element.body.className + ' screenShotHD'
|
||||
// let contentElm = document.createElement('div');
|
||||
// contentElm.innerHTML = `
|
||||
// <span class="custom-divider"></span>
|
||||
// <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>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div class="row scale-box" style="align-items: flex-start;">
|
||||
// <div class="col">
|
||||
// <span class="label">图片大小</span>
|
||||
// <div class="input input-select scale"></div>
|
||||
// <span>倍窗口</span>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div class="row text" style="align-items: flex-start;">
|
||||
// <div class="col">
|
||||
// <span>输出图片长宽:<span class="output-width">${sdk.viewer.canvas.width * scale}</span>*<span class="output-height">${sdk.viewer.canvas.height * scale}</span>像素</span>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div class="row" style="align-items: flex-start; margin-bottom: 20px;">
|
||||
// <div class="col">
|
||||
// <span class="label">输出进度</span>
|
||||
// <div class="range-box">
|
||||
// <div class="range-bg">
|
||||
// <div class="range-process-box">
|
||||
// <div class="range-process"></div>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div class="range-node-box">
|
||||
// <span class="range-node-text">0%</span>
|
||||
// <span class="range-node-text">100%</span>
|
||||
// <div class="range-node-active"><span class="range-node-active-text">0%</span></div>
|
||||
// </div>
|
||||
// <input class="progress-input" type="range" max="100" min="0" step="0.01">
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// <span class="custom-divider"></span>
|
||||
// `
|
||||
// _DialogObject.contentAppChild(contentElm)
|
||||
|
||||
sdk.viewer.scene.screenSpaceCameraController.enableTranslate = false;
|
||||
sdk.viewer.scene.screenSpaceCameraController.enableTilt = false;
|
||||
@ -210,28 +218,30 @@ async function ScreenShotHD(sdk, options = {}, cd = () => { }) {
|
||||
value: i
|
||||
})
|
||||
}
|
||||
progressInputElm = document.getElementsByClassName('progress-input')[0]
|
||||
progressBarElm = document.getElementsByClassName('range-process')[0]
|
||||
rangeNodeActive = contentElm.getElementsByClassName('range-node-active')[0]
|
||||
rangeNodeActiveText = contentElm.getElementsByClassName('range-node-active-text')[0]
|
||||
let scaleDataLegpObject = legp(_DialogObject._element.content.getElementsByClassName('scale-box')[0], ".scale")
|
||||
if (scaleDataLegpObject) {
|
||||
scaleDataLegpObject.legp_search(scaleData)
|
||||
let scaleDataLegpElm = _DialogObject._element.content.getElementsByClassName('scale')[0].getElementsByTagName('input')[0]
|
||||
scale = scaleData[0].value
|
||||
scaleDataLegpObject.legp_searchActive(scaleData[0].value)
|
||||
scaleDataLegpElm.value = scaleData[0].value
|
||||
scaleDataLegpElm.addEventListener('input', () => {
|
||||
for (let i = 0; i < scaleData.length; i++) {
|
||||
if (scaleData[i].value == scaleDataLegpElm.value) {
|
||||
scale = scaleData[i].value
|
||||
_DialogObject._element.content.getElementsByClassName('output-width')[0].innerHTML = sdk.viewer.canvas.width * scale
|
||||
_DialogObject._element.content.getElementsByClassName('output-height')[0].innerHTML = sdk.viewer.canvas.height * scale
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
// progressInputElm = document.getElementsByClassName('progress-input')[0]
|
||||
// progressBarElm = document.getElementsByClassName('range-process')[0]
|
||||
// rangeNodeActive = contentElm.getElementsByClassName('range-node-active')[0]
|
||||
// rangeNodeActiveText = contentElm.getElementsByClassName('range-node-active-text')[0]
|
||||
// let scaleDataLegpObject = legp(_DialogObject._element.content.getElementsByClassName('scale-box')[0], ".scale")
|
||||
// if (scaleDataLegpObject) {
|
||||
// scaleDataLegpObject.legp_search(scaleData)
|
||||
// let scaleDataLegpElm = _DialogObject._element.content.getElementsByClassName('scale')[0].getElementsByTagName('input')[0]
|
||||
// scale = scaleData[0].value
|
||||
// scaleDataLegpObject.legp_searchActive(scaleData[0].value)
|
||||
// scaleDataLegpElm.value = scaleData[0].value
|
||||
// scaleDataLegpElm.addEventListener('input', () => {
|
||||
// for (let i = 0; i < scaleData.length; i++) {
|
||||
// if (scaleData[i].value == scaleDataLegpElm.value) {
|
||||
// scale = scaleData[i].value
|
||||
// _DialogObject._element.content.getElementsByClassName('output-width')[0].innerHTML = sdk.viewer.canvas.width * scale
|
||||
// _DialogObject._element.content.getElementsByClassName('output-height')[0].innerHTML = sdk.viewer.canvas.height * scale
|
||||
// break
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
|
||||
|
||||
class startScreenShot {
|
||||
constructor() {
|
||||
@ -498,9 +508,10 @@ async function ScreenShotHD(sdk, options = {}, cd = () => { }) {
|
||||
for (const key in progress) {
|
||||
totalProgress = totalProgress + progress[key].value
|
||||
}
|
||||
progressBarElm.style.width = totalProgress * 0.99 + '%';
|
||||
rangeNodeActive.style.left = totalProgress * 0.99 + '%';
|
||||
rangeNodeActiveText.innerHTML = Math.floor(totalProgress * 0.99 * 100) / 100 + '%';
|
||||
// progressBarElm.style.width = totalProgress * 0.99 + '%';
|
||||
// rangeNodeActive.style.left = totalProgress * 0.99 + '%';
|
||||
// rangeNodeActiveText.innerHTML = Math.floor(totalProgress * 0.99 * 100) / 100 + '%';
|
||||
cd({ width: totalProgress * 0.99, left: totalProgress * 0.99, value: Math.floor(totalProgress * 0.99 * 100) / 100 })
|
||||
if (count === (MaxTileX - MinTileX + 1) * (MaxTileY - MinTileY + 1)) {
|
||||
let ctx = canvas.getContext('2d');
|
||||
let cloneCanvas = canvas.cloneNode(true);
|
||||
@ -525,10 +536,11 @@ async function ScreenShotHD(sdk, options = {}, cd = () => { }) {
|
||||
tempCanvas.width = totalCanvas.width / scale
|
||||
tempCanvas.height = totalCanvas.height / scale
|
||||
tempCtx.drawImage(totalCanvas, 0, 0, tempCanvas.width, tempCanvas.height);
|
||||
MapPrint(sdk, tempCanvas.toDataURL('image/jpeg', 0.95), rectangle, imgBlobData)
|
||||
progressBarElm.style.width = '100%';
|
||||
rangeNodeActive.style.left = '100%';
|
||||
rangeNodeActiveText.innerHTML = '100%';
|
||||
new MapPrint(sdk, tempCanvas.toDataURL('image/jpeg', 0.95), rectangle, imgBlobData, params.modify)
|
||||
// progressBarElm.style.width = '100%';
|
||||
// rangeNodeActive.style.left = '100%';
|
||||
// rangeNodeActiveText.innerHTML = '100%';
|
||||
cd({ value: 100 })
|
||||
_this.state = false
|
||||
}
|
||||
}
|
||||
@ -548,10 +560,11 @@ async function ScreenShotHD(sdk, options = {}, cd = () => { }) {
|
||||
tempCtx.drawImage(canvas, 0, 0, tempCanvas.width, tempCanvas.height);
|
||||
// canvas.width = canvas.width / scale
|
||||
// canvas.height = canvas.height / scale
|
||||
MapPrint(sdk, tempCanvas.toDataURL('image/jpeg', 0.95), rectangle, imgBlobData)
|
||||
progressBarElm.style.width = '100%';
|
||||
rangeNodeActive.style.left = '100%';
|
||||
rangeNodeActiveText.innerHTML = '100%';
|
||||
new MapPrint(sdk, tempCanvas.toDataURL('image/jpeg', 0.95), rectangle, imgBlobData, params.modify)
|
||||
// progressBarElm.style.width = '100%';
|
||||
// rangeNodeActive.style.left = '100%';
|
||||
// rangeNodeActiveText.innerHTML = '100%';
|
||||
cd({ value: 100 })
|
||||
_this.state = false
|
||||
}
|
||||
}
|
||||
@ -706,6 +719,8 @@ async function ScreenShotHD(sdk, options = {}, cd = () => { }) {
|
||||
}
|
||||
}
|
||||
|
||||
startScreenShotObject = new startScreenShot()
|
||||
|
||||
}
|
||||
|
||||
export { ScreenShot, ScreenShotHD }
|
||||
|
||||
@ -117,7 +117,6 @@ class TextBox extends Base {
|
||||
// alt: height
|
||||
}
|
||||
let posi = Cesium.Cartesian3.fromDegrees(longitude, latitude, cartographic.height)
|
||||
|
||||
that.handler = function () {
|
||||
const position = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
|
||||
that.sdk.viewer.scene, posi
|
||||
@ -150,7 +149,6 @@ class TextBox extends Base {
|
||||
let that = this
|
||||
that.sdk.viewer.scene.postRender.removeEventListener(that.handler);
|
||||
let posi = Cesium.Cartesian3.fromDegrees(position.lng, position.lat, position.alt)
|
||||
|
||||
that.handler = function () {
|
||||
const position = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
|
||||
that.sdk.viewer.scene, posi
|
||||
|
||||
@ -472,8 +472,10 @@ class YJEarth {
|
||||
_this.isLeftClick = true
|
||||
_this.entityMap.get(_this.clickTextDom.id).isClick(movement.position, _this.clickTextDom.id)
|
||||
|
||||
_this.blurFun && _this.clickTextDom.querySelector('textarea').removeEventListener('blur', _this.blurFun)
|
||||
_this.blurFun = () => {
|
||||
_this.entityMap.get(_this.clickTextDom.id).isClick((movement && movement.position) || null, _this.clickTextDom.id)
|
||||
|
||||
_this.entityMap.get(_this.clickTextDom.id).getwords(_this.clickTextDom.getElementsByTagName('textarea')[0].value)
|
||||
}
|
||||
_this.clickTextDom.querySelector('textarea').addEventListener('blur', _this.blurFun)
|
||||
@ -531,7 +533,10 @@ class YJEarth {
|
||||
_this.clickTextDom.removeEventListener('mousedown', mousedown);
|
||||
_this.viewer._element.removeEventListener('mousemove', mousemove);
|
||||
_this.viewer._element.removeEventListener('mouseup', mouseup);
|
||||
_this.entityMap.get(_this.clickTextDom.id).getwords(_this.clickTextDom.getElementsByTagName('textarea')[0].value)
|
||||
// if (!returnMsg) {
|
||||
// _this.entityMap.get(_this.clickTextDom.id).getwords(_this.clickTextDom.getElementsByTagName('textarea')[0].value)
|
||||
// returnMsg = true
|
||||
// }
|
||||
|
||||
_this.clickTextDom.style['pointer-events'] = 'none'
|
||||
_this.clickTextDom = undefined
|
||||
|
||||
Reference in New Issue
Block a user