基于earthSDK三维地图组件开发

上效果
在这里插入图片描述
功能点

测量分析
相机位置切换
geojson数据加载
地图打点，显示信息
点击回传数据
二三位切换

这里二三维切换通上篇openlayers分享，技术交流+V:bloxed

<template><div class="h100 w100"><div style="width:100%; height:100%; background-color: pink;" ref="xe2Container"></div><slot name="toolbar"></slot><slot name="mode"></slot><!-- 体积分析弹窗 begin--><div id="panel" v-show="drawType=='volume'"><div class="box"><label for="">基准面高度</label> <el-input size="small" v-model="AnalyseForm.planeHeight" type="number" /><label for="">采样间距</label> <el-input  size="small" v-model="AnalyseForm.planeDistance" type="number" /><label for="">挖方体积</label><p id="cutVolume">{{AnalyseForm.cutVolume  }}</p><label for="">填方体积</label><p id="fillVolume">{{ AnalyseForm.fillVolume }}</p><label for="">分析进度</label><p id="progress">{{ AnalyseForm.progress }}</p></div><div class="btn"><el-button @click="resetPlane">重新绘制基准面</el-button><el-button @click="startAnalyse">开始分析</el-button></div></div><!-- end --></div></template><script setup lang="ts">import { onMounted, ref } from "vue";import { ESObjectsManager,ESTerrainLayer,ES3DTileset ,ESGeoJson, ESLocationMeasurement, ESDistanceMeasurement, ESHeightMeasurement, ESAreaMeasurement, ESVolumeMeasurement} from 'esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main';import { CzmGlobeMaterial } from 'xbsj-xe2/dist-node/xe2-cesium-objects';import { PickedInfo } from "xbsj-xe2/dist-node/xe2-base-objects";
import { ca } from "element-plus/es/locale";const xe2Container = ref<HTMLElement | null>(null)//实例化一个场景对象管理器const objm:any = ref<any>(new ESObjectsManager());//@ts-ignorewindow.g_objm = objm.value;const czmViewer = ref<any>(null)const eSTerrainLayer = ref<any>(null);const sceneObject = ref<any>(null);const sceneStaions = ref<any[]>([]);const sceneMeasure = ref<any>(null);const drawType = ref<any>("") const emit = defineEmits(["mapSingleClick"]); // 自定义事件 会回传也是point数据const measureArr = ref<any[]>([]);const AnalyseForm = reactive<any>({planeHeight: 0,planeDistance: 1,cutVolume: "0.00（立方米）",fillVolume: "0.00（立方米）",progress: "0%"})onMounted(() => {if (!xe2Container.value) return;init3Dview();})const init3Dview = () => {czmViewer.value = objm.value.createCesiumViewer(xe2Container.value);// 监听视口状态czmViewer.value.statusChanged.don((status:string) => {if (status == 'Created') {// 视口创建完成，飞到初始视角位置objm.value.activeViewer.flyIn([110.1465,22.41115, 919.4948053805265],[283.14016420232184, -1.81201260919955, 0.026583596819532502],3);}})// czmViewer.value.changeToWalk([110.105931,22.422299, 200.4948053805265])objm.value.createSceneObjectFromJson({"id": "9812a65f-0de0-4f7b-b234-809c0c2fb8ef","type": "ESImageryLayer","url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"});eSTerrainLayer.value = objm.value.createSceneObject(ESTerrainLayer);// // cesium官方地形eSTerrainLayer.value.url = "ion://1";//token需要到cesium官网申请 https://ion.cesium.com/objm.value.activeViewer.ionAccessToken ="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwZjlmNzA1MC1iYTk0LTQxYzktYThlYS02ZTc0MDI0ZDgxZTAiLCJpZCI6MjU1MDQ4LCJpYXQiOjE3MzE1MTM0NDB9.XiIX1mau6Mwp-S5AOau-MslPFT2MzRSLuJ4pday8jkc";sceneObject.value = objm.value.createSceneObject(CzmGlobeMaterial);objm.value.activeViewer.rain = 0;objm.value.activeViewer.cloud = 1;  }const changeElevation = ()=>{sceneObject.value.shadingMode = "none"}const addStation = (stations: any[]) => {if(sceneStaions.value.length){sceneStaions.value.forEach((item:any)=>{try {if (item) objm.value.destroySceneObject(item)} catch (error) {console.info(error)}})}stations.forEach((point, index) => {let sceneStaion = objm.value.createSceneObject(ESGeoJson,index+point.stcd);let data = {"type": "FeatureCollection","name":"stations","crs": {"type": "name","properties": {"name": "urn:ogc:def:crs:OGC:1.3:CRS84"}},"features": [{type: "Feature",geometry: {type: "Point",coordinates: [point.lng, point.lat],iconUrl: point.icon,},iconUrl: point.icon,properties: {id: index + point.stcd,name: point.stnm,type: point.sttp,info: point,iconUrl: point.icon,},id:index + point.stcd,}]}sceneStaion.url = data// 额外存储属性sceneStaion.extras = data// 图片是否显示sceneStaion.imageShow = true// 图片url地址sceneStaion.imageUrl = point.icon// 图片大小sceneStaion.imageSize = [60, 60]// 图片锚点sceneStaion.imageAnchor = [0.5, 1]// 图片偏移sceneStaion.imageOffset = [0, 0]// 文字颜色sceneStaion.textColor = [1, 1, 1, 1]// 文字大小sceneStaion.textFontSize = 12// 文字背景颜色//   sceneStaion.textBackgroundColor = [1, 1, 1, 1]// 文字锚点sceneStaion.textAnchor = [0.5, 1]// 用于显示的属性sceneStaion.textProperty = "name"// 文字的偏移值sceneStaion.textOffset = [-10, -60]// 是否被拾取sceneStaion.allowPicking = true// 贴地模式sceneStaion.heightReference = "CLAMP_TO_GROUND"// 被拾取sceneStaion.pickedEvent.don((e:any) => {const point = e.childPickedInfo.geojsonPickInfo.properties;const attachedInfo = PickedInfo.getFinalAttachedInfo(e)switch (attachedInfo.viewersPickingPointerEventFuncType[0]) {case 'click':mapSingleClick(point.info);break;case "pointerHover":// alert("悬浮拾取:" + name)break;default:break;}})sceneStaions.value.push(sceneStaion)});}const mapSingleClick = (point: any) => {emit("mapSingleClick", point);
};const clear = ()=>{drawType.value = ""measureArr.value.forEach((item:any) => {if (item) objm.value.destroySceneObject(item)})measureArr.value.length = 0sceneMeasure.value.editing = false;sceneMeasure.value?.clear();}const zoomInOut = (number: any) => {const  cameraPosition=  objm.value.activeViewer.getCurrentCameraInfo();const position = cameraPosition.position;const rotation = cameraPosition.rotation;const newposition = [position[0], position[1], position[2]+(number*1000) ];const newrotation = [rotation[0], rotation[1], rotation[2] ];console.log(newposition)objm.value.activeViewer.flyIn([...newposition],[...newrotation],1);}const toCenter = (coordinates?: any[]) => {const newCoordinates =coordinates ?  [...coordinates, 789.4948053805265] : [110.1465,22.41115, 919.4948053805265]objm.value.activeViewer.flyIn(newCoordinates,[29.015034176609266, -29.191968119807054, 359.9990548222274],3);}const draw = (measureType: any) => {drawType.value = measureType;switch (measureType) {case "point":createPoint();break;case "line":createDistance();break;default:case "height":createHeight();  break;case "area":createArea();  break;case "volume":createVolume();  break;    }}const createPoint = ()=>{sceneMeasure.value = objm.value.createSceneObject(ESLocationMeasurement);sceneMeasure.value.editing = true;measureArr.value.push(sceneMeasure.value);}const createDistance = ()=>{sceneMeasure.value = objm.value.createSceneObject(ESDistanceMeasurement);sceneMeasure.value.editing = true;measureArr.value.push(sceneMeasure.value);}const createHeight = ()=>{sceneMeasure.value = objm.value.createSceneObject(ESHeightMeasurement);sceneMeasure.value.editing = true;measureArr.value.push(sceneMeasure.value);}const createArea = () => {sceneMeasure.value = objm.value.createSceneObject(ESAreaMeasurement);sceneMeasure.value.editing = true;measureArr.value.push(sceneMeasure.value);}const createVolume = ()=>{sceneMeasure.value = objm.value.createSceneObject(ESVolumeMeasurement);sceneMeasure.value.editing = true;sceneMeasure.value.depthTest=true;sceneMeasure.value.points = [];sceneMeasure.value.editing = true;jionDon();measureArr.value.push(sceneMeasure.value);}const resetPlane = ()=>{sceneMeasure.value.clear();sceneMeasure.value.editing = false;sceneMeasure.value.points = [];sceneMeasure.value.editing = true;}const startAnalyse = () => {sceneMeasure.value.clear();sceneMeasure.value.planeDistance = AnalyseForm.planeDistance;sceneMeasure.value.planeHeight = AnalyseForm.planeHeight;sceneMeasure.value.start();}const  jionDon = ()=>{// 监听基准面设置到UI上sceneMeasure.value.planeHeightChanged.don((val:any) => {if (val) AnalyseForm.planeHeight= Number(val).toFixed(2)})// 监听挖方体积sceneMeasure.value.cutVolumeChanged.don((val:any) => {AnalyseForm.cutVolume = val.toFixed(2) + '（立方米）'})// 监听填方体积sceneMeasure.value.fillVolumeChanged.don((val:any) => {AnalyseForm.fillVolume= val.toFixed(2) + '（立方米）'})// 监听进度sceneMeasure.value.progressChanged.don((val:any) => {AnalyseForm.progress = val.toFixed(2) + "%"})}defineExpose({czmViewer, //地图/**@desc 添加站点 @param [{stcd:0000,stnm:"xxxx",sttp:'',icon:'xxxx',lng:number,lat:number}data:[{name:'xx',value:'',unit:''}]  //data地图鼠标悬浮展示内容}]*/addStation,  /*** 缩放 地图* @param {number} zoom 缩放级别*/zoomInOut, /*** 地图中心点* @param {number} center 地图中心点参数格式 [lng,lat]* @param {number} zoom 缩放级别 15*/ toCenter,  /*** 清除地图分析*/clear,/*** 地图分析* @param {string} type 分析类型  'area' 面积  'line' 距离*/draw,  });</script>
<style scoped>#panel{position: absolute;box-sizing: border-box;right: 460px;top: 20px;width: 330px;background: #3e4249;border-radius: 8px;padding: 20px;color: #d6deea;border: 1px solid #939e8f;animation-name: enter;animation-duration: 1.5s;animation-fill-mode: forwards;animation-delay: 0.7s;
}
.box {display: grid;grid-template-columns: 90px 1fr;align-items: center;}.box label {padding-right: 10px;}.btn {padding-top: 10px;text-align: center;}.btn button {}label {line-height: 30px;}
</style>