Merge branch 'develop' of http://xny.yj-3d.com:3000/zh/sdk4.0 into develop
This commit is contained in:
109
src/Global/Contour/_element.js
Normal file
109
src/Global/Contour/_element.js
Normal file
@ -0,0 +1,109 @@
|
||||
function html() {
|
||||
return `
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row" style="align-items: flex-start;">
|
||||
<div class="col" style="flex: 0 0 120px;">
|
||||
<span class="label">等高线</span>
|
||||
<input class="btn-switch show" type="checkbox">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col input-select-unit-box">
|
||||
<span class="label">等高距</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input equal-height-distance" type="number" title="" min="1" max="1000">
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col input-select-unit-box" style="flex: 0 0 60px;">
|
||||
</div>
|
||||
<div class="col input-select-unit-box" style="flex: 0 0 157px;">
|
||||
<span class="label">选中线颜色</span>
|
||||
<div class="active-color"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row" style="align-items: flex-start;">
|
||||
<div class="col" style="flex: 0 0 120px;">
|
||||
<span class="label">计曲线</span>
|
||||
<input class="btn-switch index-contour-switch" type="checkbox">
|
||||
</div>
|
||||
<div class="col input-select-unit-box" style="flex: 0 0 120px;">
|
||||
<span class="label">计曲线颜色</span>
|
||||
<div class="index-contour-color"></div>
|
||||
</div>
|
||||
<div class="col input-select-unit-box">
|
||||
<span class="label">计曲线宽度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input index-contour-width" type="number" title="" step="0.1" min="1" max="10">
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="align-items: flex-start;">
|
||||
<div class="col" style="flex: 0 0 120px;">
|
||||
<span class="label">首曲线</span>
|
||||
<input class="btn-switch intermediate-contour-switch" type="checkbox">
|
||||
</div>
|
||||
<div class="col input-select-unit-box" style="flex: 0 0 120px;">
|
||||
<span class="label">首曲线颜色</span>
|
||||
<div class="intermediate-contour-color"></div>
|
||||
</div>
|
||||
<div class="col input-select-unit-box">
|
||||
<span class="label">首曲线宽度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input intermediate-contour-width" type="number" step="0.1" title="" min="1" max="10">
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="align-items: flex-start;">
|
||||
<div class="col" style="flex: 0 0 120px;">
|
||||
<span class="label">间曲线</span>
|
||||
<input class="btn-switch halfInterval-contour-switch" type="checkbox">
|
||||
</div>
|
||||
<div class="col input-select-unit-box" style="flex: 0 0 120px;">
|
||||
<span class="label">间曲线颜色</span>
|
||||
<div class="halfInterval-contour-color"></div>
|
||||
</div>
|
||||
<div class="col input-select-unit-box">
|
||||
<span class="label">间曲线宽度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input halfInterval-contour-width" type="number" title="" min="1" max="10">
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="align-items: flex-start;">
|
||||
<div class="col" style="flex: 0 0 120px;">
|
||||
<span class="label">助曲线</span>
|
||||
<input class="btn-switch supplementary-contour-switch" type="checkbox">
|
||||
</div>
|
||||
<div class="col input-select-unit-box" style="flex: 0 0 120px;">
|
||||
<span class="label">助曲线颜色</span>
|
||||
<div class="supplementary-contour-color"></div>
|
||||
</div>
|
||||
<div class="col input-select-unit-box">
|
||||
<span class="label">助曲线宽度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input supplementary-contour-width" type="number" title="" min="1" max="10">
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
export { html }
|
||||
@ -3,12 +3,35 @@
|
||||
*/
|
||||
import Dialog from "../../Obj/Element/Dialog";
|
||||
import Tools from "../../Tools";
|
||||
import { flyTo } from '../global'
|
||||
import YJColorPicker from "../../Obj/Element/yj-color-picker";
|
||||
|
||||
import { html } from "./_element";
|
||||
|
||||
let _DialogObject = null;
|
||||
let material = null;
|
||||
let handler = null;
|
||||
let activeHeightElm = null;
|
||||
let tools
|
||||
let _sdk
|
||||
let secondaryLinesCount = 19
|
||||
let show = false
|
||||
let equalHeightDistance = 10
|
||||
let activeColor = '#ffd000'
|
||||
let indexContourShow = true
|
||||
let indexContourWidth = 2.5
|
||||
let indexContourColor = '#43cf7c'
|
||||
let intermediateContourShow = true
|
||||
let intermediateContourWidth = 1.8
|
||||
let intermediateContourColor = '#ff0000'
|
||||
let halfIntervalContourShow = false
|
||||
let halfIntervalContourWidth = 1.0
|
||||
let halfIntervalContourColor = '#64b6d9'
|
||||
let supplementaryContourShow = false
|
||||
let supplementaryContourWidth = 1.0
|
||||
let supplementaryContourColor = '#d084d1'
|
||||
|
||||
|
||||
activeHeightElm = document.createElement('div')
|
||||
activeHeightElm.className = 'YJ-customize-active-height-elm'
|
||||
activeHeightElm.style.position = 'absolute'
|
||||
@ -20,7 +43,39 @@ activeHeightElm.style.textAlign = 'center'
|
||||
activeHeightElm.style.pointerEvents = 'none'
|
||||
activeHeightElm.style.color = '#ff0000'
|
||||
activeHeightElm.style.display = 'none'
|
||||
|
||||
|
||||
|
||||
function accordingToCameraHeight() {
|
||||
if (_sdk) {
|
||||
const camera = _sdk.viewer.camera;
|
||||
const position = camera.positionCartographic;
|
||||
|
||||
// 计算相机高度（相对于椭球面）
|
||||
let cameraHeight = Cesium.Math.toDegrees(position.height);
|
||||
if (cameraHeight < 1000000) {
|
||||
if (!_sdk.viewer.scene.globe.material && show === true) {
|
||||
showContour(_sdk)
|
||||
}
|
||||
// if (material) {
|
||||
// if (cameraHeight > 450000) {
|
||||
// material.uniforms.supplementaryContourShow = false
|
||||
// }
|
||||
// else if (supplementaryContourShow) {
|
||||
// material.uniforms.supplementaryContourShow = true
|
||||
// }
|
||||
// }
|
||||
}
|
||||
else {
|
||||
hideContour(_sdk)
|
||||
}
|
||||
// console.log(cameraHeight)
|
||||
}
|
||||
|
||||
}
|
||||
async function dialog(sdk) {
|
||||
_sdk = sdk
|
||||
|
||||
if (!sdk || _DialogObject) {
|
||||
return
|
||||
}
|
||||
@ -28,13 +83,12 @@ async function dialog(sdk) {
|
||||
createMaterial()
|
||||
}
|
||||
if (!tools) {
|
||||
tools = new Tools()
|
||||
tools = new Tools(sdk)
|
||||
}
|
||||
|
||||
_DialogObject = await new Dialog(sdk, {}, {
|
||||
title: "等高线", left: '180px',
|
||||
title: "全局等高线", left: '180px',
|
||||
top: '100px',
|
||||
confirmCallBack: options => { },
|
||||
closeCallBack: () => {
|
||||
_DialogObject = null
|
||||
}
|
||||
@ -43,125 +97,374 @@ async function dialog(sdk) {
|
||||
_DialogObject._element.body.className =
|
||||
_DialogObject._element.body.className + ' contour'
|
||||
let contentElm = document.createElement('div')
|
||||
contentElm.innerHTML = `
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col input-select-unit-box">
|
||||
<span class="label">高差</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input gap" type="number" title="" min="0" max="1000">
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col input-select-unit-box" style="flex: 0 0 120px;">
|
||||
<span class="label">主线颜色</span>
|
||||
<div class="primary-lice-color"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col input-select-unit-box">
|
||||
<span class="label">次线条数</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input gap2" type="number" title="" min="0" max="10">
|
||||
<span class="unit"></span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col input-select-unit-box" style="flex: 0 0 120px;">
|
||||
<span class="label">次线颜色</span>
|
||||
<div class="secondary-lice-color"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="align-items: flex-start;">
|
||||
<div class="col">
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 120px;">
|
||||
<span class="label">开关</span>
|
||||
<input class="btn-switch" type="checkbox">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
`
|
||||
contentElm.innerHTML = `
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row" style="align-items: flex-start;">
|
||||
<div class="col" style="flex: 0 0 120px;">
|
||||
<span class="label">开关</span>
|
||||
<input class="btn-switch" type="checkbox">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
contentElm.innerHTML = html(this)
|
||||
|
||||
_DialogObject.contentAppChild(contentElm)
|
||||
|
||||
contentElm.getElementsByClassName('btn-switch')[0].addEventListener('change', (e) => {
|
||||
if (e.target.checked) {
|
||||
if (handler) {
|
||||
handler.destroy()
|
||||
}
|
||||
if (!sdk.viewer.container.getElementsByClassName('YJ-customize-active-height-elm')[0]) {
|
||||
sdk.viewer.container.appendChild(activeHeightElm)
|
||||
}
|
||||
sdk.viewer.scene.postRender.removeEventListener(accordingToCameraHeight)
|
||||
sdk.viewer.scene.postRender.addEventListener(accordingToCameraHeight)
|
||||
|
||||
handler = new Cesium.ScreenSpaceEventHandler(
|
||||
sdk.viewer.canvas
|
||||
)
|
||||
handler.setInputAction((movement) => {
|
||||
let cartesian = sdk.viewer.scene.pickPosition(movement.endPosition)
|
||||
if (cartesian) {
|
||||
let top = 0
|
||||
let left = 0
|
||||
if (sdk.viewer && sdk.viewer._element) {
|
||||
let element = sdk.viewer._element.getElementsByClassName('cesium-widget')[0].getElementsByTagName('canvas')[0]
|
||||
top = element.getBoundingClientRect().top + window.scrollY
|
||||
left = element.getBoundingClientRect().left + window.scrollX
|
||||
}
|
||||
activeHeightElm.style.left = movement.endPosition.x - 50 + left + 'px'
|
||||
activeHeightElm.style.top = movement.endPosition.y - 40 + top + 'px'
|
||||
activeHeightElm.style.display = 'block'
|
||||
let pos84 = tools.cartesian3Towgs84(cartesian, sdk.viewer)
|
||||
let mainContourHeight = Math.floor(pos84.alt / material.uniforms.spacing) * material.uniforms.spacing
|
||||
let gap = pos84.alt - mainContourHeight
|
||||
let gap2 = material.uniforms.spacing / (material.uniforms.secondaryLinesCount + 1)
|
||||
let activeHeight = Math.floor(gap / gap2) * gap2 + mainContourHeight
|
||||
if ((pos84.alt - activeHeight) > gap2 / 2) {
|
||||
activeHeight = activeHeight + gap2
|
||||
}
|
||||
material.uniforms.mouseHeight = pos84.alt
|
||||
material.uniforms.mousePosition = cartesian
|
||||
activeHeightElm.innerHTML = `${activeHeight.toFixed(0)}`
|
||||
// 显示
|
||||
let showBtn = contentElm.getElementsByClassName('show')[0]
|
||||
showBtn.checked = show
|
||||
showBtn.addEventListener('change', (e) => {
|
||||
if (e.target.checked) {
|
||||
show = true
|
||||
let height = sdk.viewer.camera.positionCartographic.height
|
||||
if (height > 16360) {
|
||||
let cartographic = sdk.viewer.camera.positionCartographic
|
||||
let options = {
|
||||
position: {
|
||||
lng: Cesium.Math.toDegrees(cartographic.longitude),
|
||||
lat: Cesium.Math.toDegrees(cartographic.latitude),
|
||||
alt: 16360,
|
||||
},
|
||||
}
|
||||
else {
|
||||
activeHeightElm.style.display = 'none'
|
||||
}
|
||||
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
||||
sdk.viewer.scene.globe.material = material;
|
||||
flyTo(sdk, options, 0.5)
|
||||
}
|
||||
showContour(sdk)
|
||||
} else {
|
||||
if (handler) {
|
||||
handler.destroy()
|
||||
handler = null
|
||||
}
|
||||
if (sdk.viewer.container.getElementsByClassName('YJ-customize-active-height-elm')[0]) {
|
||||
activeHeightElm.style.display = 'none'
|
||||
sdk.viewer.container.removeChild(activeHeightElm)
|
||||
}
|
||||
sdk.viewer.scene.globe.material = null;
|
||||
show = false
|
||||
hideContour(sdk)
|
||||
}
|
||||
})
|
||||
// 等高距
|
||||
let equalHeightDistanceInput = contentElm.getElementsByClassName('equal-height-distance')[0]
|
||||
equalHeightDistanceInput.value = equalHeightDistance
|
||||
equalHeightDistanceInput.addEventListener('blur', (e) => {
|
||||
let value = initInputValue(e)
|
||||
equalHeightDistance = value
|
||||
equalHeightDistanceInput.value = value
|
||||
if (material) {
|
||||
material.uniforms.spacing = equalHeightDistance * 5
|
||||
}
|
||||
})
|
||||
|
||||
// 选中颜色
|
||||
// let activeColorPicker = new YJColorPicker({
|
||||
// el: contentElm.getElementsByClassName('active-color')[0],
|
||||
// size: "mini",
|
||||
// isLog: false,
|
||||
// alpha: true, //是否开启透明度
|
||||
// disabled: false, //是否禁止打开颜色选择器
|
||||
// predefineColor: true, // 预定义颜色
|
||||
// defaultColor: '#ffffff',
|
||||
// sure: color => {
|
||||
// activeColor = color
|
||||
// if (material) {
|
||||
// material.uniforms.activeColor = Cesium.Color.fromCssColorString(activeColor)
|
||||
// }
|
||||
// },
|
||||
// clear: () => {
|
||||
// activeColor = 'rgba(255,255,255,1)'
|
||||
// if (material) {
|
||||
// material.uniforms.activeColor = Cesium.Color.fromCssColorString(activeColor)
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
let activeColorPicker = new ewPlugins('colorpicker', {
|
||||
el: contentElm.getElementsByClassName('active-color')[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
defaultColor: activeColor,
|
||||
disabled: false,//是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity',//打开颜色选择器动画
|
||||
sure: color => {
|
||||
activeColor = color
|
||||
if (material) {
|
||||
material.uniforms.activeColor = Cesium.Color.fromCssColorString(activeColor)
|
||||
}
|
||||
},
|
||||
clear: () => {
|
||||
activeColor = 'rgba(255,255,255,1)'
|
||||
if (material) {
|
||||
material.uniforms.activeColor = Cesium.Color.fromCssColorString(activeColor)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 计曲线开关
|
||||
let indexContourSwitch = contentElm.getElementsByClassName('index-contour-switch')[0]
|
||||
indexContourSwitch.checked = indexContourShow
|
||||
indexContourSwitch.addEventListener('change', (e) => {
|
||||
indexContourShow = e.target.checked
|
||||
if (material) {
|
||||
material.uniforms.indexContourShow = indexContourShow
|
||||
}
|
||||
})
|
||||
// 计曲线颜色
|
||||
let indexContourColorPicker = new ewPlugins('colorpicker', {
|
||||
el: contentElm.getElementsByClassName('index-contour-color')[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
defaultColor: indexContourColor,
|
||||
disabled: false,//是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity',//打开颜色选择器动画
|
||||
sure: color => {
|
||||
indexContourColor = color
|
||||
if (material) {
|
||||
material.uniforms.indexContourColor = Cesium.Color.fromCssColorString(indexContourColor)
|
||||
}
|
||||
},
|
||||
clear: () => {
|
||||
indexContourColor = 'rgba(255,255,255,1)'
|
||||
if (material) {
|
||||
material.uniforms.indexContourColor = Cesium.Color.fromCssColorString(indexContourColor)
|
||||
}
|
||||
}
|
||||
})
|
||||
// 计曲线宽度
|
||||
let indexContourWidthInput = contentElm.getElementsByClassName('index-contour-width')[0]
|
||||
indexContourWidthInput.value = indexContourWidth
|
||||
indexContourWidthInput.addEventListener('blur', (e) => {
|
||||
let value = initInputValue(e)
|
||||
indexContourWidth = value
|
||||
indexContourWidthInput.value = value
|
||||
if (material) {
|
||||
material.uniforms.indexContourWidth = indexContourWidth
|
||||
}
|
||||
})
|
||||
|
||||
// 首曲线开关
|
||||
let intermediateContourSwitch = contentElm.getElementsByClassName('intermediate-contour-switch')[0]
|
||||
intermediateContourSwitch.checked = intermediateContourShow
|
||||
intermediateContourSwitch.addEventListener('change', (e) => {
|
||||
intermediateContourShow = e.target.checked
|
||||
if (material) {
|
||||
material.uniforms.intermediateContourShow = intermediateContourShow
|
||||
}
|
||||
})
|
||||
// 首曲线颜色
|
||||
let intermediateContourColorPicker = new ewPlugins('colorpicker', {
|
||||
el: contentElm.getElementsByClassName('intermediate-contour-color')[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
defaultColor: intermediateContourColor,
|
||||
disabled: false,//是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity',//打开颜色选择器动画
|
||||
sure: color => {
|
||||
intermediateContourColor = color
|
||||
if (material) {
|
||||
material.uniforms.intermediateContourColor = Cesium.Color.fromCssColorString(intermediateContourColor)
|
||||
}
|
||||
},
|
||||
clear: () => {
|
||||
intermediateContourColor = 'rgba(255,255,255,1)'
|
||||
if (material) {
|
||||
material.uniforms.intermediateContourColor = Cesium.Color.fromCssColorString(intermediateContourColor)
|
||||
}
|
||||
}
|
||||
})
|
||||
// 首曲线宽度
|
||||
let intermediateContourWidthInput = contentElm.getElementsByClassName('intermediate-contour-width')[0]
|
||||
intermediateContourWidthInput.value = intermediateContourWidth
|
||||
intermediateContourWidthInput.addEventListener('blur', (e) => {
|
||||
let value = initInputValue(e)
|
||||
intermediateContourWidth = value
|
||||
intermediateContourWidthInput.value = value
|
||||
if (material) {
|
||||
material.uniforms.intermediateContourWidth = intermediateContourWidth
|
||||
}
|
||||
})
|
||||
|
||||
// 间曲线开关
|
||||
let halfIntervalContourSwitch = contentElm.getElementsByClassName('halfInterval-contour-switch')[0]
|
||||
halfIntervalContourSwitch.checked = halfIntervalContourShow
|
||||
halfIntervalContourSwitch.addEventListener('change', (e) => {
|
||||
halfIntervalContourShow = e.target.checked
|
||||
if (material) {
|
||||
material.uniforms.halfIntervalContourShow = halfIntervalContourShow
|
||||
}
|
||||
})
|
||||
// 间曲线颜色
|
||||
let halfIntervalContourColorPicker = new ewPlugins('colorpicker', {
|
||||
el: contentElm.getElementsByClassName('halfInterval-contour-color')[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
defaultColor: halfIntervalContourColor,
|
||||
disabled: false,//是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity',//打开颜色选择器动画
|
||||
sure: color => {
|
||||
halfIntervalContourColor = color
|
||||
if (material) {
|
||||
material.uniforms.halfIntervalContourColor = Cesium.Color.fromCssColorString(halfIntervalContourColor)
|
||||
}
|
||||
},
|
||||
clear: () => {
|
||||
halfIntervalContourColor = 'rgba(255,255,255,1)'
|
||||
if (material) {
|
||||
material.uniforms.halfIntervalContourColor = Cesium.Color.fromCssColorString(halfIntervalContourColor)
|
||||
}
|
||||
}
|
||||
})
|
||||
// 间曲线宽度
|
||||
let halfIntervalContourWidthInput = contentElm.getElementsByClassName('halfInterval-contour-width')[0]
|
||||
halfIntervalContourWidthInput.value = halfIntervalContourWidth
|
||||
halfIntervalContourWidthInput.addEventListener('blur', (e) => {
|
||||
let value = initInputValue(e)
|
||||
halfIntervalContourWidth = value
|
||||
halfIntervalContourWidthInput.value = value
|
||||
if (material) {
|
||||
material.uniforms.halfIntervalContourWidth = halfIntervalContourWidth
|
||||
}
|
||||
})
|
||||
|
||||
// 助曲线开关
|
||||
let supplementaryContourSwitch = contentElm.getElementsByClassName('supplementary-contour-switch')[0]
|
||||
supplementaryContourSwitch.checked = supplementaryContourShow
|
||||
supplementaryContourSwitch.addEventListener('change', (e) => {
|
||||
supplementaryContourShow = e.target.checked
|
||||
if (material) {
|
||||
material.uniforms.supplementaryContourShow = supplementaryContourShow
|
||||
}
|
||||
})
|
||||
// 助曲线颜色
|
||||
let supplementaryContourColorPicker = new ewPlugins('colorpicker', {
|
||||
el: contentElm.getElementsByClassName('supplementary-contour-color')[0],
|
||||
size: 'mini',//颜色box类型
|
||||
alpha: true,//是否开启透明度
|
||||
defaultColor: supplementaryContourColor,
|
||||
disabled: false,//是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity',//打开颜色选择器动画
|
||||
sure: color => {
|
||||
supplementaryContourColor = color
|
||||
if (material) {
|
||||
material.uniforms.supplementaryContourColor = Cesium.Color.fromCssColorString(supplementaryContourColor)
|
||||
}
|
||||
},
|
||||
clear: () => {
|
||||
supplementaryContourColor = 'rgba(255,255,255,1)'
|
||||
if (material) {
|
||||
material.uniforms.supplementaryContourColor = Cesium.Color.fromCssColorString(supplementaryContourColor)
|
||||
}
|
||||
}
|
||||
})
|
||||
// 助曲线宽度
|
||||
let supplementaryContourWidthInput = contentElm.getElementsByClassName('supplementary-contour-width')[0]
|
||||
supplementaryContourWidthInput.value = supplementaryContourWidth
|
||||
supplementaryContourWidthInput.addEventListener('blur', (e) => {
|
||||
let value = initInputValue(e)
|
||||
supplementaryContourWidth = value
|
||||
supplementaryContourWidthInput.value = value
|
||||
if (material) {
|
||||
material.uniforms.supplementaryContourWidth = supplementaryContourWidth
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function initInputValue(e) {
|
||||
let value = e.target.value
|
||||
if (e.target.value || (e.target.dataset.null !== 'undefined' && e.target.dataset.null !== '' && !Boolean(e.target.dataset.null))) {
|
||||
value = Number(value)
|
||||
if ((e.target.max) && value > Number(e.target.max)) {
|
||||
value = Number(e.target.max)
|
||||
}
|
||||
if ((e.target.min) && value < Number(e.target.min)) {
|
||||
value = Number(e.target.min)
|
||||
}
|
||||
if ((e.target.dataset.min) && value < Number(e.target.dataset.min)) {
|
||||
value = Number(e.target.dataset.min)
|
||||
}
|
||||
}
|
||||
return value
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function showContour(sdk) {
|
||||
const camera = sdk.viewer.camera;
|
||||
const position = camera.positionCartographic;
|
||||
// 计算相机高度（相对于椭球面）
|
||||
let cameraHeight = Cesium.Math.toDegrees(position.height);
|
||||
if (cameraHeight > 1000000) {
|
||||
return
|
||||
}
|
||||
if (handler) {
|
||||
handler.destroy()
|
||||
}
|
||||
if (!sdk.viewer.container.getElementsByClassName('YJ-customize-active-height-elm')[0]) {
|
||||
sdk.viewer.container.appendChild(activeHeightElm)
|
||||
}
|
||||
|
||||
handler = new Cesium.ScreenSpaceEventHandler(
|
||||
sdk.viewer.canvas
|
||||
)
|
||||
handler.setInputAction((movement) => {
|
||||
let cartesian = sdk.viewer.scene.pickPosition(movement.endPosition)
|
||||
if (cartesian) {
|
||||
let top = 0
|
||||
let left = 0
|
||||
if (sdk.viewer && sdk.viewer._element) {
|
||||
let element = sdk.viewer._element.getElementsByClassName('cesium-widget')[0].getElementsByTagName('canvas')[0]
|
||||
top = element.getBoundingClientRect().top + window.scrollY
|
||||
left = element.getBoundingClientRect().left + window.scrollX
|
||||
}
|
||||
activeHeightElm.style.left = movement.endPosition.x - 50 + left + 'px'
|
||||
activeHeightElm.style.top = movement.endPosition.y - 40 + top + 'px'
|
||||
activeHeightElm.style.display = 'block'
|
||||
// let pos = sdk.viewer.scene.clampToHeight(cartesian)
|
||||
let pos84 = tools.cartesian3Towgs84(cartesian, sdk.viewer)
|
||||
// pos84.alt = height
|
||||
let mainContourHeight = Math.floor(pos84.alt / material.uniforms.spacing) * material.uniforms.spacing
|
||||
let gap = pos84.alt - mainContourHeight
|
||||
let gap2 = material.uniforms.spacing / (material.uniforms.secondaryLinesCount + 1)
|
||||
let activeHeight = Math.floor(gap / gap2) * gap2 + mainContourHeight
|
||||
if (pos84.alt < 0) {
|
||||
pos84.alt = 0
|
||||
}
|
||||
if ((pos84.alt - activeHeight) > gap2 / 2) {
|
||||
activeHeight = activeHeight + gap2
|
||||
}
|
||||
material.uniforms.mouseHeight = pos84.alt
|
||||
material.uniforms.mousePosition = cartesian
|
||||
activeHeightElm.innerHTML = `${activeHeight.toFixed(0)}`
|
||||
}
|
||||
else {
|
||||
activeHeightElm.style.display = 'none'
|
||||
}
|
||||
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
||||
sdk.viewer.scene.globe.material = material;
|
||||
}
|
||||
function hideContour(sdk) {
|
||||
if (handler) {
|
||||
handler.destroy()
|
||||
handler = null
|
||||
}
|
||||
if (sdk.viewer.container.getElementsByClassName('YJ-customize-active-height-elm')[0]) {
|
||||
activeHeightElm.style.display = 'none'
|
||||
sdk.viewer.container.removeChild(activeHeightElm)
|
||||
}
|
||||
sdk.viewer.scene.globe.material = null;
|
||||
}
|
||||
|
||||
function createMaterial() {
|
||||
Cesium.Material._materialCache._materials.ElevationContour.fabric.source = `
|
||||
uniform vec4 color;
|
||||
uniform vec4 secondaryLinesColor;
|
||||
uniform float spacing;
|
||||
uniform float width;
|
||||
uniform float secondaryLinesWidth;
|
||||
uniform vec4 activeColor; // 选中颜色
|
||||
uniform float spacing; // 等高距
|
||||
|
||||
// 计曲线
|
||||
uniform bool indexContourShow;
|
||||
uniform float indexContourWidth;
|
||||
uniform vec4 indexContourColor;
|
||||
// 首曲线
|
||||
uniform bool intermediateContourShow;
|
||||
uniform float intermediateContourWidth;
|
||||
uniform vec4 intermediateContourColor;
|
||||
// 间曲线
|
||||
uniform bool halfIntervalContourShow;
|
||||
uniform float halfIntervalContourWidth;
|
||||
uniform vec4 halfIntervalContourColor;
|
||||
// 助曲线
|
||||
uniform bool supplementaryContourShow;
|
||||
uniform float supplementaryContourWidth;
|
||||
uniform vec4 supplementaryContourColor;
|
||||
|
||||
uniform float mouseHeight;
|
||||
|
||||
uniform float secondaryLinesCount; // 0=无次线, 1=1条次线, 2=2条次线...
|
||||
|
||||
czm_material czm_getMaterial(czm_materialInput materialInput)
|
||||
@ -175,24 +478,60 @@ czm_material czm_getMaterial(czm_materialInput materialInput)
|
||||
#if (__VERSION__ == 300 || defined(GL_OES_standard_derivatives))
|
||||
float dxc = abs(dFdx(materialInput.height));
|
||||
float dyc = abs(dFdy(materialInput.height));
|
||||
float dFMain = max(dxc, dyc) * czm_pixelRatio * width;
|
||||
float dFMain = max(dxc, dyc) * czm_pixelRatio * indexContourWidth;
|
||||
#else
|
||||
float dFMain = czm_pixelRatio * width;
|
||||
float dFMain = czm_pixelRatio * indexContourWidth;
|
||||
#endif
|
||||
|
||||
bool isMainContour = distanceToMainContour < dFMain;
|
||||
bool isSecondaryContour = false;
|
||||
float dFSecondary = 0.0;
|
||||
float secondarySpacing = 0.0;
|
||||
bool isHalfInterval = false;
|
||||
bool isIntermediate= false;
|
||||
|
||||
// 计算当前高度所属的等高线高度
|
||||
float mainContourHeight = floor(materialInput.height / spacing) * spacing;
|
||||
float secondaryContourHeight = floor(materialInput.height / spacing * (secondaryLinesCount + 1.0)) * spacing / (secondaryLinesCount + 1.0);
|
||||
|
||||
// 计算次线在两条主等高线之间的相对位置
|
||||
float relativeHeight = materialInput.height - mainContourHeight;
|
||||
float normalizedPosition = relativeHeight / spacing;
|
||||
|
||||
// 计算次线索引（从主等高线开始计数）
|
||||
float lineIndex = floor(normalizedPosition * (secondaryLinesCount + 1.0));
|
||||
|
||||
// 只有当存在次线时才计算次线
|
||||
if(secondaryLinesCount > 0.0) {
|
||||
float secondaryLinesWidth = supplementaryContourWidth;
|
||||
secondarySpacing = spacing / (secondaryLinesCount + 1.0);
|
||||
float distanceToSecondaryContour = mod(materialInput.height, secondarySpacing);
|
||||
|
||||
// 确保次线不会与主线重叠
|
||||
float minDistanceToMain = min(distanceToMainContour, spacing - distanceToMainContour);
|
||||
bool notCloseToMain = minDistanceToMain > dFMain * 2.0; // 2倍线宽缓冲
|
||||
|
||||
|
||||
if (lineIndex > 0.0 && lineIndex < secondaryLinesCount) {
|
||||
// 使用mod函数检查余数是否接近0（考虑浮点数精度问题）
|
||||
isHalfInterval = abs(mod(lineIndex, 2.0)) < 0.01;
|
||||
if(isHalfInterval) {
|
||||
secondaryLinesWidth = halfIntervalContourWidth;
|
||||
}
|
||||
// 使用mod函数检查余数是否接近0（考虑浮点数精度问题）
|
||||
isIntermediate = abs(mod(lineIndex, 4.0)) < 0.01;
|
||||
if(isIntermediate) {
|
||||
secondaryLinesWidth = intermediateContourWidth;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#if (__VERSION__ == 300 || defined(GL_OES_standard_derivatives))
|
||||
dFSecondary = max(dxc, dyc) * czm_pixelRatio * secondaryLinesWidth;
|
||||
@ -203,10 +542,6 @@ czm_material czm_getMaterial(czm_materialInput materialInput)
|
||||
isSecondaryContour = (distanceToSecondaryContour < dFSecondary) && notCloseToMain;
|
||||
}
|
||||
|
||||
// 计算当前高度所属的等高线高度
|
||||
float mainContourHeight = floor(materialInput.height / spacing) * spacing;
|
||||
float secondaryContourHeight = floor(materialInput.height / spacing * (secondaryLinesCount + 1.0)) * spacing / (secondaryLinesCount + 1.0);
|
||||
|
||||
// 高亮判断
|
||||
bool shouldHighlight = false;
|
||||
if(isMainContour && abs(mainContourHeight - mouseHeight) < 0.5 * (spacing/(secondaryLinesCount+1.0))) {
|
||||
@ -218,15 +553,41 @@ czm_material czm_getMaterial(czm_materialInput materialInput)
|
||||
// 颜色输出
|
||||
vec4 outColor;
|
||||
if(shouldHighlight) {
|
||||
outColor = vec4(1.0, 0.0, 0.0, 1.0);
|
||||
outColor = czm_gammaCorrect(vec4(activeColor.rgb, activeColor.a));
|
||||
} else if(isMainContour) {
|
||||
outColor = czm_gammaCorrect(vec4(color.rgb, color.a));
|
||||
float a = indexContourColor.a;
|
||||
if(!indexContourShow) {
|
||||
a = 0.0;
|
||||
}
|
||||
outColor = czm_gammaCorrect(vec4(indexContourColor.rgb, a));
|
||||
} else if(isSecondaryContour) {
|
||||
outColor = czm_gammaCorrect(vec4(secondaryLinesColor.rgb, secondaryLinesColor.a));
|
||||
float a = supplementaryContourColor.a;
|
||||
if(!supplementaryContourShow) {
|
||||
a = 0.0;
|
||||
}
|
||||
outColor = czm_gammaCorrect(vec4(supplementaryContourColor.rgb, a));
|
||||
if(isHalfInterval) {
|
||||
float a = halfIntervalContourColor.a;
|
||||
if(!halfIntervalContourShow) {
|
||||
a = 0.0;
|
||||
}
|
||||
outColor = czm_gammaCorrect(vec4(halfIntervalContourColor.rgb, a));
|
||||
}
|
||||
if(isIntermediate) {
|
||||
float a = intermediateContourColor.a;
|
||||
if(!intermediateContourShow) {
|
||||
a = 0.0;
|
||||
}
|
||||
outColor = czm_gammaCorrect(vec4(intermediateContourColor.rgb, a));
|
||||
}
|
||||
} else {
|
||||
outColor = vec4(0.0);
|
||||
}
|
||||
|
||||
if(materialInput.height<0.0) {
|
||||
outColor = vec4(0.0);
|
||||
}
|
||||
|
||||
material.diffuse = outColor.rgb;
|
||||
material.alpha = outColor.a;
|
||||
return material;
|
||||
@ -237,14 +598,25 @@ czm_material czm_getMaterial(czm_materialInput materialInput)
|
||||
fabric: {
|
||||
type: "ElevationContour",
|
||||
uniforms: {
|
||||
width: 2,
|
||||
secondaryLinesWidth: 1, // 次级线宽度
|
||||
spacing: 200,
|
||||
color: Cesium.Color.fromCssColorString('#ffd000'),
|
||||
secondaryLinesColor: Cesium.Color.fromCssColorString('#0dff00').withAlpha(0.5),
|
||||
spacing: 10 * 5,
|
||||
activeColor: Cesium.Color.fromCssColorString(activeColor),
|
||||
mouseHeight: -100000,
|
||||
mousePosition: new Cesium.Cartesian3(0, 0, 0),
|
||||
secondaryLinesCount: 3
|
||||
secondaryLinesCount: secondaryLinesCount,
|
||||
cameraHeight: 0,
|
||||
|
||||
indexContourShow: indexContourShow,
|
||||
indexContourWidth: indexContourWidth,
|
||||
indexContourColor: Cesium.Color.fromCssColorString(indexContourColor),
|
||||
intermediateContourShow: intermediateContourShow,
|
||||
intermediateContourWidth: intermediateContourWidth,
|
||||
intermediateContourColor: Cesium.Color.fromCssColorString(intermediateContourColor),
|
||||
halfIntervalContourShow: halfIntervalContourShow,
|
||||
halfIntervalContourWidth: halfIntervalContourWidth,
|
||||
halfIntervalContourColor: Cesium.Color.fromCssColorString(halfIntervalContourColor),
|
||||
supplementaryContourShow: supplementaryContourShow,
|
||||
supplementaryContourWidth: supplementaryContourWidth,
|
||||
supplementaryContourColor: Cesium.Color.fromCssColorString(supplementaryContourColor),
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
@ -111,7 +111,7 @@ function CesiumContainer(sdk, options) {
|
||||
}
|
||||
containerObject[sdk.viewer._element.className] || (containerObject[sdk.viewer._element.className] = {})
|
||||
containerObject[sdk.viewer._element.className].event && containerObject[sdk.viewer._element.className].event.destroy()
|
||||
let tools = new Tools()
|
||||
let tools = new Tools(sdk)
|
||||
let element = sdk.viewer._element
|
||||
let proj = sdk.proj
|
||||
for (let key in options) {
|
||||
@ -174,15 +174,28 @@ function CesiumContainer(sdk, options) {
|
||||
}
|
||||
let event = new MouseEvent(sdk)
|
||||
containerObject[sdk.viewer._element.className].event = event
|
||||
let lastPickTime = 0;
|
||||
let timeoutEvent
|
||||
event.mouse_move((movement, cartesian) => {
|
||||
_cartesian = cartesian
|
||||
// const now = Date.now();
|
||||
// if (now - lastPickTime < 500) {
|
||||
// clearTimeout(timeoutEvent)
|
||||
// timeoutEvent = setTimeout(() => {
|
||||
// update()
|
||||
// }, 500);
|
||||
// return
|
||||
// }
|
||||
// lastPickTime = now;
|
||||
update()
|
||||
})
|
||||
function update() {
|
||||
async function update() {
|
||||
if (!_cartesian) {
|
||||
return
|
||||
}
|
||||
// let pos = sdk.viewer.scene.clampToHeight(_cartesian)
|
||||
let position = tools.cartesian3Towgs84(_cartesian, sdk.viewer)
|
||||
// position.alt = height
|
||||
if (coordinateSystem === 'EPSG:4326') {
|
||||
infoElm.innerHTML = `
|
||||
<span>经度：</span><span>${Number(position.lng.toFixed(6))}° </span>
|
||||
@ -437,12 +450,12 @@ function closeViewFollow(sdk) {
|
||||
|
||||
/* 方里网状态开关 */
|
||||
function FlwStatusSwitch(sdk, status) {
|
||||
if(!sdk) {
|
||||
if (!sdk) {
|
||||
return
|
||||
}
|
||||
let layer
|
||||
let sdkD = getSdk().sdkD
|
||||
if(sdkD && sdk !== sdkD) {
|
||||
if (sdkD && sdk !== sdkD) {
|
||||
FlwStatusSwitch(sdkD, status)
|
||||
}
|
||||
for (let i = 0; i < sdk.viewer.imageryLayers._layers.length; i++) {
|
||||
@ -477,12 +490,12 @@ function getFlwStatus(sdk) {
|
||||
|
||||
/* 经纬网状态开关 */
|
||||
function JwwStatusSwitch(sdk, status) {
|
||||
if(!sdk) {
|
||||
if (!sdk) {
|
||||
return
|
||||
}
|
||||
let layer
|
||||
let sdkD = getSdk().sdkD
|
||||
if(sdkD && sdk !== sdkD) {
|
||||
if (sdkD && sdk !== sdkD) {
|
||||
JwwStatusSwitch(sdkD, status)
|
||||
}
|
||||
for (let i = 0; i < sdk.viewer.imageryLayers._layers.length; i++) {
|
||||
|
||||
@ -157,7 +157,7 @@ import WaterSurface from '../Obj/Base/WaterSurface'
|
||||
// import ItineraryMove from '../Obj/Base/ItineraryMove'
|
||||
import TrajectoryMotion from '../Obj/Base/TrajectoryMotion'
|
||||
import TrajectoryMotionObject from '../Obj/Base/TrajectoryMotionObject'
|
||||
import Road from '../Obj/Base/Road'
|
||||
// import Road from '../Obj/Base/Road'
|
||||
import Graffiti from '../Obj/Base/Graffiti'
|
||||
import GroundImage from '../Obj/Base/GroundImage'
|
||||
import GroundSvg from '../Obj/Base/GroundSvg'
|
||||
@ -236,7 +236,7 @@ if (!window.YJ) {
|
||||
Model2,
|
||||
TrajectoryMotion,
|
||||
TrajectoryMotionObject,
|
||||
Road,
|
||||
// Road,
|
||||
Graffiti,
|
||||
GroundImage,
|
||||
GroundSvg,
|
||||
|
||||
@ -1862,7 +1862,9 @@ class TrajectoryMotion extends Base {
|
||||
// this.options.viewFollowOrientation.roll = Cesium.Math.toDegrees(this.sdk.viewer.camera.roll)
|
||||
// this.options.viewFollowOrientation.direction = this.sdk.viewer.camera.direction
|
||||
this._DialogObject.close()
|
||||
this.Dialog.confirmCallBack && this.Dialog.confirmCallBack(this.originalOptions)
|
||||
let cdoptions = this.deepCopyObj(this.options)
|
||||
cdoptions.host = ''
|
||||
this.Dialog.confirmCallBack && this.Dialog.confirmCallBack(cdoptions)
|
||||
syncData(this.sdk, this.options.id)
|
||||
syncSplitData(this.sdk, this.options.id)
|
||||
},
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
let list = ['icon-py', 'icon-edit', 'icon-add', 'icon-add2', 'icon-minus', 'icon-play', 'icon-pause', 'icon-updateheight', 'icon-draw', 'icon-positions', 'icon-reset', 'icon-xj', 'icon-yj', 'icon-zj', 'icon-close', 'icon-query', 'icon-route', 'icon-copy', 'icon-load', 'icon-rubric']
|
||||
let list = ['icon-py', 'icon-edit', 'icon-add', 'icon-add2', 'icon-minus', 'icon-play', 'icon-pause', 'icon-updateheight', 'icon-draw', 'icon-positions', 'icon-reset', 'icon-xj', 'icon-yj', 'icon-zj', 'icon-close', 'icon-query', 'icon-route', 'icon-copy', 'icon-load', 'icon-rubric', 'icon-pen', 'icon-cross']
|
||||
function setSvg() {
|
||||
let svgElm = document.createElement('svg');
|
||||
svgElm.xmlns = 'http://www.w3.org/2000/svg'
|
||||
|
||||
221
src/Obj/Element/yj-color-picker.js
Normal file
221
src/Obj/Element/yj-color-picker.js
Normal file
@ -0,0 +1,221 @@
|
||||
class YJColorPicker {
|
||||
constructor(options = {}) {
|
||||
let _this = this
|
||||
let pickAlphaInput
|
||||
let config = {
|
||||
el: options.el,
|
||||
size: "mini",
|
||||
isLog: false,
|
||||
disabled: options.disabled || false, //是否禁止打开颜色选择器
|
||||
alpha: false, //是否开启透明度
|
||||
sure: (color) => {
|
||||
if (pickAlphaInput) {
|
||||
let c = Cesium.Color.fromCssColorString(color).withAlpha(pickAlphaInput.value / 100)
|
||||
this.pickAlphaInputValue = pickAlphaInput.value
|
||||
color = c.toCssHexString()
|
||||
}
|
||||
if (options.sure && typeof options.sure == 'function') {
|
||||
options.sure(color)
|
||||
}
|
||||
setTimeout(() => {
|
||||
customizeStyle()
|
||||
}, this.colorPicker.config.pickerAnimationTime);
|
||||
},
|
||||
clear: () => {
|
||||
options.clear()
|
||||
},
|
||||
close: () => {
|
||||
pickAlphaInput.value = this.pickAlphaInputValue
|
||||
},
|
||||
clickDefineColor: clickDefineColor,
|
||||
hasClear: false,
|
||||
defaultColor: options.defaultColor || '#ffffff'
|
||||
}
|
||||
let CesiumColor = Cesium.Color.fromCssColorString(options.defaultColor)
|
||||
if (!CesiumColor) {
|
||||
config.defaultColor = '#ffffff'
|
||||
CesiumColor = Cesium.Color.fromCssColorString(config.defaultColor)
|
||||
}
|
||||
if (options.predefineColor) {
|
||||
config.predefineColor = ['rgba(255, 255, 255, 1)', 'rgba(255, 0, 0, 1)', 'rgba(208, 132, 209, 1)', 'rgba(100, 182, 217, 1)', 'rgba(42, 130, 228, 1)', 'rgba(214, 36, 36, 1)', 'rgba(252, 222, 111, 1)', 'rgba(67, 207, 124, 1)', 'rgba(176, 243, 143, 1)', 'rgba(121, 72, 234, 1)', 'rgba(255, 195, 0, 1)', 'rgba(0, 186, 173, 1)', 'rgba(165, 214, 63, 1)', 'rgba(0, 0, 0, 1)', 'rgba(46, 47, 51, 1)', 'rgba(172, 51, 193, 1)', 'rgba(130, 21, 21, 1)', 'rgba(255, 87, 51, 1)', 'rgba(255, 140, 0, 1)', 'rgba(125, 191, 255, 1)']
|
||||
}
|
||||
this.colorPicker = new ewColorPicker(config)
|
||||
window.colorPicker = this.colorPicker
|
||||
console.log('this.colorPicker', this.colorPicker, this.colorPicker.$Dom.pickerInput)
|
||||
|
||||
customizeStyle()
|
||||
|
||||
function customizeStyle() {
|
||||
let isSubtract = false
|
||||
let box = _this.colorPicker.$Dom.box
|
||||
let picker = _this.colorPicker.$Dom.picker
|
||||
picker.style.minWidth = '300px'
|
||||
let pickerContent = picker.getElementsByClassName('ew-color-picker-content')[0]
|
||||
let pickAlphaSliderBar = picker.getElementsByClassName('ew-alpha-slider-bar')[0]
|
||||
if (pickAlphaSliderBar) {
|
||||
pickAlphaSliderBar.parentNode.style.width = '16px'
|
||||
pickAlphaSliderBar.parentNode.removeChild(pickAlphaSliderBar)
|
||||
}
|
||||
let customDivider = document.createElement('span')
|
||||
customDivider.className = 'custom-divider'
|
||||
pickerContent.parentNode.insertBefore(customDivider, pickerContent.nextSibling)
|
||||
let pickPen = document.createElement('div')
|
||||
pickPen.className = 'icon-pen-box'
|
||||
pickPen.innerHTML = '<svg class="icon-pen"><use xlink:href="#yj-icon-pen"></use></svg>'
|
||||
let pickerInput = _this.colorPicker.$Dom.pickerInput
|
||||
pickerInput.parentNode.insertBefore(pickPen, pickerInput)
|
||||
pickerInput.style.width = 'calc(77% - 24px)'
|
||||
|
||||
if (options.alpha) {
|
||||
let pickAlpha = document.createElement('div')
|
||||
pickAlpha.className = 'input-number input-number-unit-1 color-alpha'
|
||||
pickAlpha.innerHTML = `
|
||||
<input class="input" type="number" title="" step="0.01" min="0" max="100">
|
||||
<span class="unit">%</span>
|
||||
<span class="arrow"></span>`
|
||||
pickerInput.parentNode.insertBefore(pickAlpha, pickerInput.nextSibling)
|
||||
pickerInput.style.width = '39%'
|
||||
pickAlpha.style.width = 'calc(32% - 12px)'
|
||||
pickAlphaInput = pickAlpha.getElementsByClassName('input')[0]
|
||||
if (_this.pickAlphaInputValue || _this.pickAlphaInputValue === 0 || _this.pickAlphaInputValue === '0') {
|
||||
pickAlphaInput.value = Number(Number(_this.pickAlphaInputValue).toFixed(2))
|
||||
}
|
||||
else {
|
||||
pickAlphaInput.value = Number((CesiumColor.alpha * 100).toFixed(2))
|
||||
}
|
||||
_this.pickAlphaInputValue = pickAlphaInput.value
|
||||
box.style.background = Cesium.Color.fromCssColorString(_this.colorPicker._privateConfig.colorValue).withAlpha(pickAlphaInput.value / 100).toCssColorString()
|
||||
}
|
||||
else {
|
||||
CesiumColor = CesiumColor.withAlpha(1)
|
||||
}
|
||||
|
||||
let defineColorContainer = picker.getElementsByClassName('ew-pre-define-color-container')[0]
|
||||
if (defineColorContainer) {
|
||||
let colorList = localStorage.getItem('custom-color')
|
||||
if (colorList) {
|
||||
colorList = JSON.parse(colorList)
|
||||
}
|
||||
else {
|
||||
colorList = {}
|
||||
}
|
||||
let customDivider2 = document.createElement('span')
|
||||
customDivider2.className = 'custom-divider'
|
||||
let customDivider3 = document.createElement('span')
|
||||
customDivider3.className = 'custom-divider'
|
||||
defineColorContainer.parentNode.insertBefore(customDivider2, defineColorContainer)
|
||||
defineColorContainer.parentNode.insertBefore(customDivider3, defineColorContainer.nextSibling)
|
||||
|
||||
let collectColorContainer = document.createElement('div')
|
||||
collectColorContainer.className = 'yj-pre-collect-color-container'
|
||||
customDivider3.parentNode.insertBefore(collectColorContainer, customDivider3.nextSibling)
|
||||
|
||||
let addColorBtn = document.createElement('div')
|
||||
addColorBtn.innerHTML = '<svg class="icon-add2"><use xlink:href="#yj-icon-add2"></use></svg>'
|
||||
addColorBtn.className = 'yj-pre-collect-color add'
|
||||
|
||||
let subtractColorBtn = document.createElement('div')
|
||||
subtractColorBtn.innerHTML = '<svg class="icon-minus"><use xlink:href="#yj-icon-minus"></use></svg>'
|
||||
subtractColorBtn.className = 'yj-pre-collect-color subtract'
|
||||
collectColorContainer.appendChild(addColorBtn)
|
||||
collectColorContainer.appendChild(subtractColorBtn)
|
||||
|
||||
let subtractElmList = []
|
||||
for (let key in colorList) {
|
||||
let colorElm = document.createElement('div')
|
||||
colorElm.className = 'yj-pre-collect-color'
|
||||
let colorItemElm = document.createElement('div')
|
||||
colorItemElm.className = 'yj-pre-define-color-item'
|
||||
colorElm.appendChild(colorItemElm)
|
||||
colorItemElm.className = 'yj-pre-define-color-item'
|
||||
let c = Cesium.Color.fromCssColorString(colorList[key])
|
||||
let colorString = c.toCssHexString()
|
||||
colorItemElm.style.backgroundColor = colorString
|
||||
colorItemElm.addEventListener('click', () => {
|
||||
_this.colorPicker.updateColor(c.toCssColorString())
|
||||
clickDefineColor(colorString)
|
||||
})
|
||||
|
||||
let subtractElm = document.createElement('div')
|
||||
subtractElm.className = 'yj-pre-define-color-item subtract-btn'
|
||||
subtractElm.innerHTML = '<svg class="icon-cross"><use xlink:href="#yj-icon-cross"></use></svg>'
|
||||
subtractElm.style.display = 'none'
|
||||
colorElm.appendChild(subtractElm)
|
||||
|
||||
collectColorContainer.appendChild(colorElm)
|
||||
|
||||
subtractElm.addEventListener('click', () => {
|
||||
delete colorList[key]
|
||||
localStorage.setItem('custom-color', JSON.stringify(colorList))
|
||||
collectColorContainer.removeChild(colorElm)
|
||||
})
|
||||
subtractElmList.push(subtractElm)
|
||||
}
|
||||
|
||||
addColorBtn.addEventListener('click', () => {
|
||||
if (isSubtract) {
|
||||
isSubtract = false
|
||||
for (let i = 0; i < subtractElmList.length; i++) {
|
||||
subtractElmList[i].style.display = 'none'
|
||||
}
|
||||
}
|
||||
let colorElm = document.createElement('div')
|
||||
colorElm.className = 'yj-pre-collect-color'
|
||||
let colorItemElm = document.createElement('div')
|
||||
colorItemElm.className = 'yj-pre-define-color-item'
|
||||
colorElm.appendChild(colorItemElm)
|
||||
|
||||
let c = Cesium.Color.fromCssColorString(_this.colorPicker.prevInputValue)
|
||||
if (pickAlphaInput) {
|
||||
c = c.withAlpha(pickAlphaInput.value / 100)
|
||||
}
|
||||
let colorString = c.toCssHexString()
|
||||
colorItemElm.style.backgroundColor = colorString
|
||||
colorItemElm.addEventListener('click', () => {
|
||||
_this.colorPicker.updateColor(c.toCssColorString())
|
||||
clickDefineColor(colorString)
|
||||
})
|
||||
collectColorContainer.appendChild(colorElm)
|
||||
|
||||
let subtractElm = document.createElement('div')
|
||||
subtractElm.className = 'yj-pre-define-color-item subtract-btn'
|
||||
subtractElm.innerHTML = '<svg class="icon-cross"><use xlink:href="#yj-icon-cross"></use></svg>'
|
||||
subtractElm.style.display = 'none'
|
||||
colorElm.appendChild(subtractElm)
|
||||
subtractElmList.push(subtractElm)
|
||||
|
||||
let key = Cesium.createGuid()
|
||||
colorList[key] = colorString
|
||||
localStorage.setItem('custom-color', JSON.stringify(colorList))
|
||||
subtractElm.addEventListener('click', () => {
|
||||
delete colorList[key]
|
||||
localStorage.setItem('custom-color', JSON.stringify(colorList))
|
||||
collectColorContainer.removeChild(colorElm)
|
||||
})
|
||||
})
|
||||
|
||||
subtractColorBtn.addEventListener('click', () => {
|
||||
isSubtract = !isSubtract
|
||||
if (isSubtract) {
|
||||
for (let i = 0; i < subtractElmList.length; i++) {
|
||||
subtractElmList[i].style.display = 'block'
|
||||
}
|
||||
}
|
||||
else {
|
||||
for (let i = 0; i < subtractElmList.length; i++) {
|
||||
subtractElmList[i].style.display = 'none'
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function clickDefineColor(color) {
|
||||
if (pickAlphaInput) {
|
||||
let c = Cesium.Color.fromCssColorString(color)
|
||||
pickAlphaInput.value = c.alpha * 100
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
export default YJColorPicker
|
||||
@ -124,6 +124,7 @@ class Tools {
|
||||
var lat = Cesium.Math.toDegrees(cartographic.latitude)
|
||||
var lng = Cesium.Math.toDegrees(cartographic.longitude)
|
||||
var alt = cartographic.height < 0 ? 0 : cartographic.height
|
||||
// var alt = cartographic.height
|
||||
return {
|
||||
lng: lng,
|
||||
lat: lat,
|
||||
|
||||
@ -270,7 +270,7 @@ class YJEarth {
|
||||
this.viewer.scene.screenSpaceCameraController.enableCollisionDetection = true //true 禁止 false 允许
|
||||
createCluster(this.viewer)
|
||||
keyboardMapRoamingInit(this.viewer)
|
||||
Cesium.viewerCesiumNavigationMixin(this.viewer, {
|
||||
let a = Cesium.viewerCesiumNavigationMixin(this.viewer, {
|
||||
// 修改重置视图的tooltip
|
||||
resetTooltip: '重置视图',
|
||||
// 修改放大按钮的tooltip
|
||||
|
||||
Reference in New Issue
Block a user