zh/sdk4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

等高线控制

Browse Source
This commit is contained in:
zh
2025-07-11 17:50:52 +08:00
parent 53b4eb03e5
commit c843b025fc
11 changed files with 856 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/Global/Contour/_element.js Normal file
View 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 }

613
src/Global/Contour/index.js
View File

@ -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',
top: '100px',
confirmCallBack: options => { },
closeCallBack: () => {
_DialogObject = null
}
@ -43,125 +97,371 @@ 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 - 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 +475,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 +539,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,11 +550,33 @@ 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);
}
@ -237,14 +591,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),
},
}
});

25
src/Global/global.js
View File

@ -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++) {

4
src/In/index.js
View File

@ -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,

2
src/Obj/Element/svg.js
View File

@ -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
View 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

3
src/Tools/index.js
View File

@ -123,7 +123,8 @@ class Tools {
var cartographic = ellipsoid.cartesianToCartographic(cartesian3)
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 < 0 ? 0 : cartographic.height
var alt = cartographic.height
return {
lng: lng,
lat: lat,

2
src/YJEarth/index.js
View File

@ -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

4
static/custom/css/index.css
View File

@ -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
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

4
static/custom/img/icon-pen.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 837 B