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