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,63 +97,292 @@ 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) => {
|
||||
sdk.viewer.scene.postRender.removeEventListener(accordingToCameraHeight)
|
||||
sdk.viewer.scene.postRender.addEventListener(accordingToCameraHeight)
|
||||
|
||||
// 显示
|
||||
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,
|
||||
},
|
||||
}
|
||||
flyTo(sdk, options, 0.5)
|
||||
}
|
||||
showContour(sdk)
|
||||
} else {
|
||||
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()
|
||||
}
|
||||
@ -123,11 +406,16 @@ async function dialog(sdk) {
|
||||
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
|
||||
}
|
||||
@ -140,7 +428,8 @@ async function dialog(sdk) {
|
||||
}
|
||||
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
||||
sdk.viewer.scene.globe.material = material;
|
||||
} else {
|
||||
}
|
||||
function hideContour(sdk) {
|
||||
if (handler) {
|
||||
handler.destroy()
|
||||
handler = null
|
||||
@ -150,18 +439,32 @@ async function dialog(sdk) {
|
||||
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,18 +478,32 @@ 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);
|
||||
|
||||
@ -194,6 +511,28 @@ czm_material czm_getMaterial(czm_materialInput materialInput)
|
||||
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;
|
||||
#else
|
||||
@ -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
|
||||
|
||||
@ -3179,9 +3179,9 @@
|
||||
|
||||
/* 等高线 */
|
||||
.YJ-custom-base-dialog.contour>.content {
|
||||
width: 350px;
|
||||
width: 525px;
|
||||
}
|
||||
|
||||
.YJ-custom-base-dialog.contour>.content .label {
|
||||
flex: 0 0 56px;
|
||||
flex: unset;
|
||||
}
|
||||
|
||||
6
static/custom/img/icon-cross.svg
Normal file
6
static/custom/img/icon-cross.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
|
||||
<path d="M11.0843 0.555313L11.0843 0.555313C10.6784 0.149383 10.0203 0.149383 9.61434 0.555313L5.81934 4.35031L2.02434 0.555313C1.61841 0.149383 0.960265 0.149383 0.554336 0.555313L0.554336 0.555313C0.148407 0.961242 0.148407 1.61938 0.554336 2.02531L4.34934 5.82031L0.554336 9.61531C0.148407 10.0212 0.148407 10.6794 0.554336 11.0853L0.554336 11.0853C0.960265 11.4912 1.61841 11.4912 2.02434 11.0853L5.81934 7.29031L9.61434 11.0853C10.0203 11.4912 10.6784 11.4912 11.0843 11.0853L11.0843 11.0853C11.4903 10.6794 11.4903 10.0212 11.0843 9.61531L7.28934 5.82031L11.0843 2.02531C11.4903 1.61938 11.4903 0.961242 11.0843 0.555313Z">
|
||||
</path>
|
||||
<path fill="rgba(0, 0, 0, 0.5)" d="M10.9076 0.732089M10.9076 0.732089Q10.6763 0.500866 10.3493 0.500866Q10.0223 0.500866 9.79111 0.732089L5.81934 4.70387L1.84756 0.732089C1.53926 0.423791 1.03941 0.423791 0.731113 0.732089C0.422814 1.04039 0.422814 1.54024 0.731113 1.84854L4.70289 5.82031L0.731113 9.79209Q0.499889 10.0233 0.499889 10.3503Q0.499889 10.6773 0.731113 10.9085Q0.962336 11.1398 1.28934 11.1398Q1.61634 11.1398 1.84756 10.9085L5.81934 6.93676L9.79111 10.9085Q10.0223 11.1398 10.3493 11.1398Q10.6763 11.1398 10.9076 10.9085Q11.1388 10.6773 11.1388 10.3503Q11.1388 10.0233 10.9076 9.79209L6.93578 5.82031L10.9076 1.84854Q11.1388 1.61731 11.1388 1.29031Q11.1388 0.963312 10.9076 0.732089ZM11.2611 0.378536Q11.6388 0.756205 11.6388 1.29031Q11.6388 1.82442 11.2611 2.20209L7.46611 5.99709L7.28934 5.82031L7.46611 5.64354L11.2611 9.43854Q11.6388 9.8162 11.6388 10.3503Q11.6388 10.8844 11.2611 11.2621Q10.8834 11.6398 10.3493 11.6398Q9.81523 11.6398 9.43756 11.2621L5.64256 7.46709L5.81934 7.29031L5.99611 7.46709L2.20111 11.2621Q1.82344 11.6398 1.28934 11.6398Q0.755229 11.6398 0.377559 11.2621Q-0.000110999 10.8844 -0.000111014 10.3503Q-0.000110984 9.81621 0.377559 9.43854L4.17256 5.64354L4.34934 5.82031L4.17256 5.99709L0.377559 2.20209C-0.126001 1.69853 -0.126001 0.882096 0.377559 0.378536C0.88112 -0.125024 1.69755 -0.125025 2.20111 0.378536L5.99611 4.17354L5.81934 4.35031L5.64256 4.17354L9.43756 0.378536Q9.81523 0.000865549 10.3493 0.000865549Q10.8834 0.000865579 11.2611 0.378536L11.2611 0.378536Z">
|
||||
</path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
4
static/custom/img/icon-pen.svg
Normal file
4
static/custom/img/icon-pen.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" >
|
||||
<path d="M15.5219 2.5188L13.4796 0.476487C13.1732 0.170059 12.7657 0 12.3309 0C11.8977 0 11.4886 0.168455 11.1822 0.476487L1.60273 10.0864L1.57866 10.1105L0 16L5.92801 14.4117L15.5219 4.81781C15.8299 4.50978 16 4.10228 16 3.66911C15.9984 3.23433 15.8299 2.82683 15.5219 2.5188ZM2.79154 14.2818L1.71824 13.2085L2.24125 11.2576L4.74401 13.7604L2.79154 14.2818ZM5.66169 13.3529L2.65998 10.3511L9.72546 3.2584L12.7416 6.27294L5.66169 13.3529ZM14.8593 4.15361L13.9208 5.09215L10.9046 2.07761L11.8448 1.13747C11.9667 1.01394 12.1448 0.943347 12.3293 0.943347C12.5154 0.943347 12.6935 1.01394 12.8154 1.13747L14.8577 3.18139C14.9877 3.31134 15.0599 3.48461 15.0599 3.6675C15.0615 3.8504 14.9909 4.02366 14.8593 4.15361Z" >
|
||||
</path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 837 B |
Reference in New Issue
Block a user