vue3+SuperMap iClient3D for Cesium实现量测功能

文章目录

前言

一、主要功能

二、具体实现

1.HTML主要结构

2.javascript

三、问题总结

​本文保留功能：

<select v-model="clampMode"><option selected="selected" :value="0">空间量算</option><option :value="1">贴地量算</option>
</select>
<el-button type="primary" @click="ceju">测距</el-button>
<el-button type="primary" @click="cemian">测面</el-button>
<el-button type="primary" @click="cegao">测高</el-button>
<el-button type="primary" @click="qingchu">清除</el-button>

<script setup>
import { ref, watch } from "vue";
import { useStore } from "vuex";
const store = useStore(); //控制组件显隐
//测距
function ceju() {deactiveAll();handlerDis && handlerDis.activate();
}
//测面
function cemian() {deactiveAll();handlerArea && handlerArea.activate();
}
//测高
function cegao() {if (!setHypFlag) setHypsometricSetting();clearLine();deactiveAll();handlerHeight && handlerHeight.activate();
}
//清除
function qingchu() {clearAll();
}//#region
let clampMode = ref(0); // 空间模式
var viewer = window.viewer;
var scene = window.viewer.scene;
let handlerDis, handlerArea, handlerHeight; //距离、面积、高度// 初始化数据
let layers, isoline, lineHeight, setHypFlag;
init();
// 初始化等高线
function init() {// 等高线isoline = new Cesium.HypsometricSetting(); //分层设色类。通过一定的颜色变化次序或色调深浅来表达和区别三维数据的不同属性。isoline.DisplayMode = Cesium.HypsometricSettingEnum.DisplayMode.LINE; //获取或设置显示模式。（显示模式：LINE 显示轮廓线，枚举值：2）let colorTable = new Cesium.ColorTable(); //颜色表类isoline._lineColor = Cesium.Color.fromCssColorString("#ff7d00"); //获取或设置等值线的颜色。isoline.ColorTable = colorTable; //获取或设置颜色表isoline.Opacity = 0.6; //获取或设置不透明度，取值范围为0-1，其中0表示完全透明，1表示完全不透明。isoline.MaxVisibleValue = -100; //获取或设置最大可见值。isoline.MinVisibleValue = -100; //获取或设置最小可见值。layers = viewer.scene.layers.layerQueue; //获取当前场景的三维切片缓存图层集合(layers).获取图层列表。viewer.scene.globe.HypsometricSetting = {hypsometricSetting: isoline,analysisMode: Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_ALL,}; //获取地球对象（globe）.地球分层设色（用于淹没分析、模拟等高线面、地形地貌走势等）HypsometricSetting。
}// 初始化设置图层等高线
function setHypsometricSetting() {for (let i = 0; i < layers.length; i++) {layers[i].hypsometricSetting = {hypsometricSetting: isoline,analysisMode: Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_ALL,}; //图层分层设色}setHypFlag = true; //hypsometricSetting标记
}//初始化测量距离
handlerDis = new Cesium.MeasureHandler(viewer,Cesium.MeasureMode.Distance,clampMode.value
); //量测处理器类-三参：Viewer	指定用于量测的视图；MeasureMode	指定量测模式；ClampMode	指定几何对象的风格（0空间，1贴地,2贴对象，3栅格化）。
//注册测距功能事件-measureEvt量测事件，监听当前事件以获取测量结果。 当量测模式为MeasureMode.Distance时，回调结果为{distance : distance}。
handlerDis.measureEvt.addEventListener(function (result) {//当事件发生时，注册要执行的回调函数。可以提供一个可选的范围作为函数执行的指针。var dis = Number(result.distance);var distance =dis > 1000 ? (dis / 1000).toFixed(2) + "km" : dis.toFixed(2) + "m";handlerDis.disLabel.text = "距离:" + distance; //当量测模式为Distance,利用此标签实体对象disLabel来显示空间距离量算结果。
});//初始化测量面积
handlerArea = new Cesium.MeasureHandler(viewer,Cesium.MeasureMode.Area,clampMode.value
);
handlerArea.measureEvt.addEventListener(function (result) {var mj = Number(result.area);var area =mj > 1000000 ? (mj / 1000000).toFixed(2) + "km²" : mj.toFixed(2) + "㎡";handlerArea.areaLabel.text = "面积:" + area;
});//初始化测量高度
handlerHeight = new Cesium.MeasureHandler(viewer, Cesium.MeasureMode.DVH);
handlerHeight.measureEvt.addEventListener(function (result) {var distance =result.distance > 1000? (result.distance / 1000).toFixed(2) + "km": result.distance + "m";var vHeight =result.verticalHeight > 1000? (result.verticalHeight / 1000).toFixed(2) + "km": result.verticalHeight + "m";var hDistance =result.horizontalDistance > 1000? (result.horizontalDistance / 1000).toFixed(2) + "km": result.horizontalDistance + "m";handlerHeight.disLabel.text = "空间距离:" + distance;handlerHeight.vLabel.text = "垂直高度:" + vHeight;handlerHeight.hLabel.text = "水平距离:" + hDistance;//实时等高线显示let x = result.horizontalPositions[1].x;let y = result.horizontalPositions[1].y;let z = result.horizontalPositions[1].z;var ellipsoid = viewer.scene.globe.ellipsoid;var cartesian3 = new Cesium.Cartesian3(x, y, z);var cartographic = ellipsoid.cartesianToCartographic(cartesian3);var lat = Cesium.Math.toDegrees(cartographic.latitude);var lng = Cesium.Math.toDegrees(cartographic.longitude);lineHeight = cartographic.height;//解决当前BUG：获取首点高程，判断高于首点用以上代码，如果低于则执行另一逻辑代码（垂直高度和空间距离）updateContourLine(lineHeight);
});//   设置等值线
function updateContourLine(height) {viewer.scene.globe.HypsometricSetting.hypsometricSetting.MaxVisibleValue =height;viewer.scene.globe.HypsometricSetting.hypsometricSetting.MinVisibleValue =height;if (!setHypFlag) return;for (let i = 0; i < layers.length; i++) {if (layers[i].hypsometricSetting.hypsometricSetting) {layers[i].hypsometricSetting.hypsometricSetting.MaxVisibleValue = height;layers[i].hypsometricSetting.hypsometricSetting.MinVisibleValue = height;} else {setHypsometricSetting();}}
}//   清除等值线
function clearLine() {updateContourLine(-10000);
}if (!scene.pickPositionSupported) {alert("不支持深度拾取,量算功能无法使用(无法进行鼠标交互绘制)！");
}function clearAll() {deactiveAll();handlerDis && handlerDis.clear();handlerArea && handlerArea.clear();handlerHeight && handlerHeight.clear();clearLine();
}function deactiveAll() {handlerDis && handlerDis.deactivate();handlerArea && handlerArea.deactivate();handlerHeight && handlerHeight.deactivate();lineHeight = -10000;
}
//#endregionwatch(clampMode, (newval, oldval) => {clampMode = newval;handlerArea.clampMode = newval;handlerDis.clampMode = newval;
});
</script>

lineHeight = Number(result.endHeight);
updateContourLine(lineHeight)