diff --git a/src/Global/Contour/_element.js b/src/Global/Contour/_element.js
new file mode 100644
index 0000000..cfeed60
--- /dev/null
+++ b/src/Global/Contour/_element.js
@@ -0,0 +1,109 @@
+function html() {
+ return `
+
+
+
+
+
+
+ `
+}
+
+export { html }
\ No newline at end of file
diff --git a/src/Global/Contour/index.js b/src/Global/Contour/index.js
index 4636923..cbe7f65 100644
--- a/src/Global/Contour/index.js
+++ b/src/Global/Contour/index.js
@@ -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 = `
-
-
-
- `
- contentElm.innerHTML = `
-
-
- `
+ 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),
},
}
});
diff --git a/src/Global/global.js b/src/Global/global.js
index 688ed26..852544a 100644
--- a/src/Global/global.js
+++ b/src/Global/global.js
@@ -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 = `
经度：${Number(position.lng.toFixed(6))}°
@@ -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++) {
diff --git a/src/In/index.js b/src/In/index.js
index 234bfa3..8120864 100644
--- a/src/In/index.js
+++ b/src/In/index.js
@@ -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,
diff --git a/src/Obj/Element/svg.js b/src/Obj/Element/svg.js
index 85145e0..58bbc1e 100644
--- a/src/Obj/Element/svg.js
+++ b/src/Obj/Element/svg.js
@@ -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'
diff --git a/src/Obj/Element/yj-color-picker.js b/src/Obj/Element/yj-color-picker.js
new file mode 100644
index 0000000..cfda110
--- /dev/null
+++ b/src/Obj/Element/yj-color-picker.js
@@ -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 = ''
+ 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 = `
+
+ %
+ `
+ 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 = ''
+ addColorBtn.className = 'yj-pre-collect-color add'
+
+ let subtractColorBtn = document.createElement('div')
+ subtractColorBtn.innerHTML = ''
+ 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 = ''
+ 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 = ''
+ 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
\ No newline at end of file
diff --git a/src/Tools/index.js b/src/Tools/index.js
index 8d3ba38..a81f143 100644
--- a/src/Tools/index.js
+++ b/src/Tools/index.js
@@ -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,
diff --git a/src/YJEarth/index.js b/src/YJEarth/index.js
index 115c628..9bab248 100644
--- a/src/YJEarth/index.js
+++ b/src/YJEarth/index.js
@@ -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
diff --git a/static/custom/css/index.css b/static/custom/css/index.css
index 35938bb..543184a 100644
--- a/static/custom/css/index.css
+++ b/static/custom/css/index.css
@@ -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;
}
diff --git a/static/custom/img/icon-cross.svg b/static/custom/img/icon-cross.svg
new file mode 100644
index 0000000..ef3bbfd
--- /dev/null
+++ b/static/custom/img/icon-cross.svg
@@ -0,0 +1,6 @@
+
diff --git a/static/custom/img/icon-pen.svg b/static/custom/img/icon-pen.svg
new file mode 100644
index 0000000..ad10102
--- /dev/null
+++ b/static/custom/img/icon-pen.svg
@@ -0,0 +1,4 @@
+