197 lines
7.3 KiB
JavaScript
197 lines
7.3 KiB
JavaScript
|
import Dialog from '../BaseDialog';
|
||
|
|
import { Proj } from './proj';
|
||
|
|
import { legp } from '../Obj/Element/datalist';
|
||
|
|
import MouseEvent from '../Event/index'
|
||
|
|
import MouseTip from '../MouseTip'
|
||
|
|
import Tools from '../Tools'
|
||
|
|
let _DialogObject
|
||
|
|
const open = async (sdk, closeCallBack) => {
|
||
|
|
let topls = new Tools()
|
||
|
|
let proj = new Proj()
|
||
|
|
let tip
|
||
|
|
let event
|
||
|
|
if (_DialogObject && _DialogObject.close) {
|
||
|
|
_DialogObject.close()
|
||
|
|
_DialogObject = null
|
||
|
|
}
|
||
|
|
_DialogObject = await new Dialog(sdk.viewer._container, {
|
||
|
|
title: '投影转换', left: '180px', top: '100px',
|
||
|
|
closeCallBack: () => {
|
||
|
|
closeCallBack && closeCallBack()
|
||
|
|
},
|
||
|
|
})
|
||
|
|
await _DialogObject.init()
|
||
|
|
|
||
|
|
let html = `
|
||
|
|
<span class="custom-divider"></span>
|
||
|
|
<div style="width: 540px;display: flex;">
|
||
|
|
<div class="row left" style="flex: 1;margin-bottom: 0;">
|
||
|
|
<div style="margin: 10px 0;flex: 1;display: flex;align-items: center;flex: 1;justify-content: space-between;">
|
||
|
|
<span class="lable-left-line">源坐标</span>
|
||
|
|
<button class="btn pick" style="margin-left: 20px;"><svg class="icon-edit"><use xlink:href="#yj-icon-edit"></use></svg>坐标拾取</button>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div style="display: flex;margin-bottom: 12px;align-items: center;">
|
||
|
|
<span class="label" style="flex: 0 0 60px;">椭圆基准</span>
|
||
|
|
<div class="datalist_left"></div>
|
||
|
|
</div>
|
||
|
|
<div style="display: flex;margin-bottom: 12px;align-items: center;">
|
||
|
|
<span class="label" style="flex: 0 0 60px;">经度(x)</span>
|
||
|
|
<input class="input left-x" type="number" title="">
|
||
|
|
</div>
|
||
|
|
<div style="display: flex;margin-bottom: 10px;align-items: center;">
|
||
|
|
<span class="label" style="flex: 0 0 60px;">纬度(y)</span>
|
||
|
|
<input class="input left-y" type="number" title="">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style="display: flex;flex-direction: column;justify-content: center;margin: 28px 15px 0 15px;">
|
||
|
|
<button class="btn convert">坐标转换<i style="margin-top: 2px;margin-left: 5px;" class="el-icon-right"></i></button>
|
||
|
|
</div>
|
||
|
|
<div class="row right" style="flex: 1;margin-bottom: 0;">
|
||
|
|
<div style="margin: 10px 0;height: 32px; display: flex;align-items: center;flex: 1;justify-content: space-between;">
|
||
|
|
<span class="lable-left-line">目标坐标</span>
|
||
|
|
<button class="btn copy" data-clipboard-action="copy" data-clipboard-target=".input" style="margin-left: 20px;"><svg class="icon-copy"><use xlink:href="#yj-icon-copy"></use></svg>复制</button>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div style="display: flex;margin-bottom: 12px;align-items: center;">
|
||
|
|
<span class="label" style="flex: 0 0 60px;">椭圆基准</span>
|
||
|
|
<div class="datalist_right"></div>
|
||
|
|
</div>
|
||
|
|
<div style="display: flex;margin-bottom: 12px;align-items: center;">
|
||
|
|
<span class="label" style="flex: 0 0 60px;">经度(x)</span>
|
||
|
|
<input class="input right-x" readonly="readonly">
|
||
|
|
</div>
|
||
|
|
<div style="display: flex;margin-bottom: 10px;align-items: center;">
|
||
|
|
<span class="label" style="flex: 0 0 60px;">纬度(y)</span>
|
||
|
|
<input class="input right-y" readonly="readonly">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<span class="custom-divider"></span>
|
||
|
|
`
|
||
|
|
let contentElm = document.createElement('div');
|
||
|
|
contentElm.innerHTML = html
|
||
|
|
_DialogObject.contentAppChild(contentElm)
|
||
|
|
|
||
|
|
// legp(contentElm, ".datalist").legp_search(tagData)
|
||
|
|
|
||
|
|
let tagData = []
|
||
|
|
let i = 0
|
||
|
|
proj.epsg_map.forEach((value, key) => {
|
||
|
|
i++
|
||
|
|
tagData.push(
|
||
|
|
{
|
||
|
|
name: `${i}. ${key}(${value.name})`,
|
||
|
|
value: key
|
||
|
|
}
|
||
|
|
)
|
||
|
|
})
|
||
|
|
let legpObjectLeft = legp(contentElm.getElementsByClassName('left')[0], ".datalist_left")
|
||
|
|
legpObjectLeft.legp_search(tagData, true)
|
||
|
|
let legpObjectRight = legp(contentElm.getElementsByClassName('right')[0], ".datalist_right")
|
||
|
|
legpObjectRight.legp_search(tagData, true)
|
||
|
|
|
||
|
|
let pickElm = contentElm.getElementsByClassName('pick')[0]
|
||
|
|
let copyElm = contentElm.getElementsByClassName('copy')[0]
|
||
|
|
let datalistLeftInput = contentElm.getElementsByClassName('datalist_left')[0].getElementsByTagName('input')[0]
|
||
|
|
datalistLeftInput.value = tagData[0].value
|
||
|
|
legpObjectLeft.legp_searchActive(tagData[0].value)
|
||
|
|
let datalistRightInput = contentElm.getElementsByClassName('datalist_right')[0].getElementsByTagName('input')[0]
|
||
|
|
datalistRightInput.value = tagData[0].value
|
||
|
|
legpObjectRight.legp_searchActive(tagData[0].value)
|
||
|
|
let convertElm = contentElm.getElementsByClassName('convert')[0]
|
||
|
|
let leftXElm = contentElm.getElementsByClassName('left-x')[0]
|
||
|
|
let leftYElm = contentElm.getElementsByClassName('left-y')[0]
|
||
|
|
let rightXElm = contentElm.getElementsByClassName('right-x')[0]
|
||
|
|
let rightYElm = contentElm.getElementsByClassName('right-y')[0]
|
||
|
|
pickElm.addEventListener('click', () => {
|
||
|
|
tip && tip.destroy()
|
||
|
|
event && event.destroy()
|
||
|
|
tip = new MouseTip('左键选择起点坐标，右键取消', sdk)
|
||
|
|
event = new MouseEvent(sdk)
|
||
|
|
event.mouse_move((movement, cartesian) => {
|
||
|
|
tip.setPosition(
|
||
|
|
cartesian,
|
||
|
|
movement.endPosition.x,
|
||
|
|
movement.endPosition.y
|
||
|
|
)
|
||
|
|
})
|
||
|
|
event.mouse_left((movement, cartesian) => {
|
||
|
|
let pos84 = topls.cartesian3Towgs84(cartesian, sdk.viewer)
|
||
|
|
tip && tip.destroy()
|
||
|
|
event && event.destroy()
|
||
|
|
let result = proj.convert([{ x: Number(pos84.lng), y: Number(pos84.lat) }], 'EPSG:4326', datalistLeftInput.value)
|
||
|
|
if (result.code === 0) {
|
||
|
|
leftXElm.value = result.points[0].x
|
||
|
|
leftYElm.value = result.points[0].y
|
||
|
|
}
|
||
|
|
})
|
||
|
|
event.mouse_right((movement, cartesian) => {
|
||
|
|
tip && tip.destroy()
|
||
|
|
event && event.destroy()
|
||
|
|
})
|
||
|
|
})
|
||
|
|
convertElm.addEventListener('click', () => {
|
||
|
|
if (!leftXElm.value || !leftYElm.value) {
|
||
|
|
rightXElm.value = ''
|
||
|
|
rightYElm.value = ''
|
||
|
|
window.ELEMENT && window.ELEMENT.Message({
|
||
|
|
message: '请输入源坐标',
|
||
|
|
type: 'warning',
|
||
|
|
duration: 1500
|
||
|
|
});
|
||
|
|
return
|
||
|
|
}
|
||
|
|
let result = proj.convert([{ x: Number(leftXElm.value), y: Number(leftYElm.value) }], datalistLeftInput.value, datalistRightInput.value)
|
||
|
|
if (result.code === 0) {
|
||
|
|
rightXElm.value = result.points[0].x
|
||
|
|
rightYElm.value = result.points[0].y
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
window.ELEMENT && window.ELEMENT.Message({
|
||
|
|
message: result.message,
|
||
|
|
type: 'warning',
|
||
|
|
duration: 1500
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
// 复制目标坐标
|
||
|
|
let clipboard = new ClipboardJS(copyElm, {
|
||
|
|
text: (trigger) => {
|
||
|
|
if (!rightXElm.value || !rightYElm.value) {
|
||
|
|
rightXElm.value = ''
|
||
|
|
rightYElm.value = ''
|
||
|
|
window.ELEMENT && window.ELEMENT.Message({
|
||
|
|
message: '复制失败，目标坐标为空！',
|
||
|
|
type: 'warning',
|
||
|
|
duration: 1500
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
let text = `${rightXElm.value},${rightYElm.value}`
|
||
|
|
return text;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
clipboard.on('success', function (e) {
|
||
|
|
window.ELEMENT &&
|
||
|
|
window.ELEMENT.Message({
|
||
|
|
message: '已复制到剪切板',
|
||
|
|
type: 'success',
|
||
|
|
duration: 1500
|
||
|
|
})
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
const close = () => {
|
||
|
|
if (_DialogObject && _DialogObject.close) {
|
||
|
|
_DialogObject.close()
|
||
|
|
_DialogObject = null
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export { open, close }
|