cesium绘制区域编辑

npm 安装也是可以的 

#默认安装最新的
yarn add cesium#卸载插件
yarn remove cesium#安装指定版本的
yarn add cesium@1.96.0#安装指定版本到测试环境
yarn add cesium@1.96.0 -D
yarn install @turf/turf

<template><div id="cesiumContainer"></div><div class="but" ><div  :class="tableDataObj.drawList.length===0?'zoomIn animated_three':'wobble animated_eight'" @click="drawPlane">开始绘制</div><div  :class="tableDataObj.drawList.length===0?'fadeOut animated_two':'fadeInDown animated'"  @click="echoEditing">回显编辑</div><div  :class="tableDataObj.drawList.length===0?'fadeOutDownBig animated_six':'fadeInUpBig animated_four'"  @click="clean">清除</div><div  :class="tableDataObj.drawList.length===0?'rotateOut animated_seven':'rotateIn animated_five'"  @click="thoroughClean">彻底清除</div></div>
</template><!-- 绘制面并且编辑 --><script setup lang="ts">
import * as Cesium from "cesium";
import { onMounted, reactive, ref } from "vue";
import * as turf from "@turf/turf";// 地图实例
let viewer: any;
// 存点数组，里面对象是这个{
//       lon: '',
//       lat: '',
//       hei: '',
//     };
const points: any = ref([]);
// 区域面积
const area = ref(0);
// 实体
let handler: any = null;
// 是否点击
let mouseClick = false;
// 是否移动
let mouseMove = false;
// 取消绘制
let startPicking = ref(false);
let deleteState=ref(false)
interface PositionsList {x: number;y: number;z: number;
}
// 存储绘制点
let  tableDataObj   = reactive({drawList:[]
});
onMounted(() => {// 初始化Cesium并创建viewerCesium.Ion.defaultAccessToken ="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmMGU1MDc1Yy0zZTMyLTQ0ODEtYjcxYi0yYjAyNDgyZGY1MjQiLCJpZCI6MjAxMDQ3LCJpYXQiOjE3MTAxNjM4NjF9.b9qwNlQbvo49RJTHEMpjIiOS-mOvf9MF8ZHSYTdf6CI";viewer = new Cesium.Viewer("cesiumContainer", {infoBox: false, // 禁用沙箱，解决控制台报错selectionIndicator: false, //选择指示器timeline: false, // 时间轴animation: false, // 动画小组件geocoder: false, // 地理编码（搜索）组件homeButton: false, // 首页，点击之后将视图跳转到默认视角sceneModePicker: false, // 投影方式，切换2D、3D 和 Columbus View (CV) 模式。baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。navigationHelpButton: false, // 帮助按钮fullscreenButton: false, // 全屏按钮// vrButton: false, // VR模式// shouldAnimate: true, // 自动播放动画控件// shadows: true, // 是否显示光照投射的阴影// terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY, // 地质接收阴影`// imageryProvider: esri, //自定义图层，默认是谷歌的影响图层scene3DOnly: true, // 每个几何实例将只能以3D渲染以节省GPU内存sceneMode: 3, // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode});viewer._cesiumWidget._creditContainer.style.display = "none"; //隐藏logo版权let destination = Cesium.Cartesian3.fromDegrees(116.3974, 39.9087, 10000); // 北京天安门广场的经纬度坐标及高度pointerdefault();viewer.camera.flyTo({destination: destination,duration: 2, // 飞行动画持续时间（单位：秒）});
});//开始绘制
const drawPlane = () => {console.log(handler, "handler");if (handler != null) {clean();}points.value = [];startPicking.value = false;// 点位存储let positions: any = [];area.value = 0;let polygon = new Cesium.PolygonHierarchy();let dynamicPolygon: any = new Cesium.Entity();let polyObj: any = null;let polyId = "planBy" + buildUUID();handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);handler.setInputAction((movement: Cesium.ScreenSpaceEventHandler.PositionedEvent) => {let pick: any = pickEllisoidPosition(viewer, movement.position);mouseClick = true;if (Cesium.defined(pick) &&Cesium.defined(pick.cartesian) &&pick.cartesian.x) {positions.push(pick.cartesian.clone());polygon.positions.push(pick.cartesian.clone());if (!polyObj) {dynamicPolygon = {id: polyId,polyline: {width: 7,// ...lineStyle,material: new Cesium.PolylineOutlineMaterialProperty({color: Cesium.Color.AQUA.withAlpha(0.7), // 线的颜色outlineWidth: 4,outlineColor: Cesium.Color.WHITE.withAlpha(0.6),}),show: true,clampToGround: true,positions: new Cesium.CallbackProperty(function () {return positions;}, false),},polygon: {hierarchy: new Cesium.CallbackProperty(function () {return polygon;}, false),// 绘制区域颜色material: Cesium.Color.STEELBLUE.withAlpha(0.4),clampToGround: true,},};polyObj = viewer.entities.add(dynamicPolygon);}let ray = viewer.camera.getPickRay(movement.position);let cartesian = viewer.scene.globe.pick(ray, viewer.scene);let cartographic = Cesium.Cartographic.fromCartesian(cartesian);let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度viewer.entities.add({id: "editPoint" + buildUUID(),name: "点",point: {pixelSize: 15,color: Cesium.Color.WHITE,// ...lineStyle,show: true,clampToGround: true,// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND},distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0,3000), // 可视范围position: Cesium.Cartesian3.fromDegrees(lng, lat, 0),});}},Cesium.ScreenSpaceEventType.LEFT_CLICK);handler.setInputAction((movement: Cesium.ScreenSpaceEventHandler.PositionedEvent) => {if (mouseClick) {let pick: any = pickEllisoidPosition(viewer, movement?.endPosition);if (positions.length >= 0 && Cesium.defined(pick)) {if (mouseMove) {positions.pop();polygon.positions.pop();}if (pick.cartesian && pick.cartesian.x) {positions.push(pick.cartesian);polygon.positions.push(pick.cartesian);mouseMove = true;}}}},Cesium.ScreenSpaceEventType.MOUSE_MOVE);handler.setInputAction((movement) => {if (mouseClick && mouseMove) {positions.pop();polygon.positions.pop();}if (positions.length < 3) {alert("必须绘制三个点以上,请重新绘制");// 再次开启drawPlane();return;}// 计算面积getCalculateArea(positions);positions.push(positions[0]);mouseMove = false;mouseClick = false;points.value = [];for (let i = 0; i < positions.length; i++) {const tmp = cartesian3ToGps(viewer, positions[i]);const tmpPoint: object = {lon: tmp[0],lat: tmp[1],hei: tmp[2],};points.value.push(tmpPoint);}const arr = points.value.map((item) => [item.lon, item.lat]);area.value = turf.area(turf.polygon([arr])).toFixed(2) as any;// let pick =  viewer.scene.pick(movement.position);// console.log("右键：",pick.id.id)pickClear(polyObj);// 停止绘制stopDraw();handlePolyClick();// 右键删除handlePolyRightClick();}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
};// 计算面积
function getCalculateArea(positions: PositionsList) {tableDataObj.drawList = positions as any;console.log("cesium坐标：",tableDataObj.drawList.length)var areaCenter = getAreaAndCenter(positions);var calculatearea = areaCenter.area;var center = areaCenter.center;var text = formateArea(calculatearea, "m");// console.log("calculatearea面积：",calculatearea)// console.log("text面积",text)let labelId = viewer.entities.add({id: "label_" + buildUUID(),position: center,label: {text: "面积：" + text,// 字体大小font: "18px sans-serif",// FILL填充/OUTLINE描边/FILL_AND_OUTLINED填充描边style: Cesium.LabelStyle.FILL_AND_OUTLINE,// 描边颜色outlineColor: Cesium.Color.WHITE,// 描边宽度outlineWidth: 5,// 字体颜色fillColor: Cesium.Color.BLUE,},});
}// 添加小手
function pointerdefault() {// 添加小手viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {const pickedObject = viewer.scene.pick(movement.endPosition);if (pickedObject && pickedObject.id) {viewer.container.style.cursor = "pointer";} else {viewer.container.style.cursor = "default";}}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}// 创建完面之后监听事件
const handlePolyClick = () => {handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);let pickData: any;handler.setInputAction((event: any) => {let windowPosition = event.position;// 通过屏幕坐标获取当前位置的实体信息let pickedObject = viewer.scene.pick(windowPosition);if (Cesium.defined(pickedObject)) {if (/planBy/.test(pickedObject.id._id)) {if (pickData && pickData._id == pickedObject._id) {return;}pickData = pickedObject.id; //获取编辑的事件editPlane(pickData, handler);}} else {if (!pickData) {return;}pickClear(pickData);pickData = undefined;}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
};
// 右键删除
const handlePolyRightClick = () => {console.log("触发了么");handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);handler.setInputAction((event: any) => {let windowPosition = event.position;// 通过屏幕坐标获取当前位置的实体信息let pickedObject = viewer.scene.pick(windowPosition);let pick = viewer.scene.pick(event.position);// 通过屏幕坐标获取当前位置的实体信息let pickData: any;if (Cesium.defined(pickedObject)) {pickData = pickedObject.id; //获取编辑的事件pickClear(pickData);pickData = undefined;if(!deleteState.value){//右键删除createDelteDom(event.position, pick.id.id);}else{return}}  }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
};// 删除
function createDelteDom(px, objId) {deleteState.value=trueif (!objId) return;let deleteDom = window.document.createElement("span");deleteDom.style.background = "red";deleteDom.style.position = "absolute";deleteDom.style.color = "white";deleteDom.style.left = px.x + 10 + "px";deleteDom.style.top = px.y + 10 + "px";deleteDom.style.padding = "6px";deleteDom.style.borderRadius = "6px";deleteDom.style.cursor = "pointer";deleteDom.id = "easy3d-plot-delete";deleteDom.setAttribute("objId", objId);deleteDom.innerHTML = `删除`;let mapDom = window.document.getElementById(viewer.container.id);mapDom.appendChild(deleteDom);const clsBtn = window.document.getElementById("easy3d-plot-delete");if (!clsBtn) return;clsBtn.addEventListener("click", (e) => {let id = deleteDom.getAttribute("objId");removeByObjId(id);});document.addEventListener("click", function () {clsBtn.remove();deleteState.value=false});
}
/*** 根据id移除创建的对象* @param {String | Number} id 对象id*/
function removeByObjId(id) {console.log("查看写ID", id);if (!id) return;let entity = viewer.entities.getById(id);if (entity) {viewer.entities.remove(entity);}// 删除面积labellet label_id = viewer.entities.values[0].id;var reg = new RegExp("label_");if (reg.test(label_id)) {viewer.entities.removeById(label_id);}
}// 创建完面之后编辑事件
const editPlane = (pick: any, handler: any) => {if (!pick) {return;}// const view = viewer.entities.getById(polyId)pick.polyline.width = 7;pick.polyline.material.outlineWidth = 4;pick.polyline.material.outlineColor = Cesium.Color.WHITE.withAlpha(0.6);removeEntities(viewer, {filterType: "id",filterReg: /(editPoint)|labelPoy_/,});let pointId: any = [];let downStatus = false;let currentPoint: any; //当前编辑点console.log(pick.polygon.hierarchy.getValue(), "pick.polygon.hierarchy");let positions = pick.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;// 生成编辑点for (let i = 0; i < positions.length; i++) {let ID = "editPoint" + buildUUID();let point = viewer.entities.add({id: ID,position: positions[i],vertexIndex: i,point: {pixelSize: 15,color: Cesium.Color.WHITE,// ...lineStyle,show: true,clampToGround: true,// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND},distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 3000), // 可视范围});// 保存点的ID以便删除pointId.push(ID);}const resp = positions.map((item) => {let cartographic = Cesium.Cartographic.fromCartesian(item);let longitude = Cesium.Math.toDegrees(cartographic.longitude);let latitude = Cesium.Math.toDegrees(cartographic.latitude);return {longitude: longitude,latitude: latitude,height: cartographic.height,};});resp.push(resp[0]);resp.forEach((item, index) => {if (resp[index + 1]?.longitude) {let longitude = (+item.longitude + +resp[index + 1].longitude) / 2;let latitude = (+item.latitude + +resp[index + 1].latitude) / 2;let height = (+item.height + +resp[index + 1].height) / 2;let position = [+longitude, +latitude, +height];let text = distanceApi(item, resp[index + 1]).toFixed(1) + "m";labelApis(`labelPoy_${buildUUID()}`, position, text);}});handler.setInputAction((event) => {// 获取屏幕坐标let windowPosition = event.position;// 通过屏幕坐标获取当前位置的实体信息let pickedObject = viewer.scene.pick(windowPosition);if (Cesium.defined(pickedObject)) {if (/editPoint/.test(pickedObject.id._id)) {downStatus = true;viewer.scene.screenSpaceCameraController.enableRotate = false;viewer.scene.screenSpaceCameraController.enableZoom = false;currentPoint = pickedObject.id;console.log(currentPoint);} else {viewer.scene.screenSpaceCameraController.enableRotate = true;viewer.scene.screenSpaceCameraController.enableZoom = true;return false;}} else {viewer.scene.screenSpaceCameraController.enableRotate = true;viewer.scene.screenSpaceCameraController.enableZoom = true;return false;}}, Cesium.ScreenSpaceEventType.LEFT_DOWN);handler.setInputAction((event) => {if (!downStatus) {return;}removeEntities(viewer, {filterType: "id",filterReg: /labelPoy_|label_/,});let windowPosition = event.startPosition;// 将屏幕坐标转为笛卡尔坐标let ellipsoid = viewer.scene.globe.ellipsoid;let cartesian = viewer.camera.pickEllipsoid(windowPosition, ellipsoid);// 如果点击到地球外，那么返回if (!cartesian) {return;}// 更新编辑点的位置// console.log(currentPoint, cartesian);currentPoint.position._value = cartesian;let point: any = []; // 线的定位let polyData: any = [];for (let id of pointId) {// console.log(viewer.entities.getById(id), "0");point.push(viewer.entities.getById(id).position._value);polyData.push(viewer.entities.getById(id).position._value);}// const data = viewer.entities.getById(polyId)positions = point;point.push({ x: point[0]["x"], y: point[0]["y"], z: point[0]["z"] });const resp = point.map((item) => {let cartographic = Cesium.Cartographic.fromCartesian(item);let longitude = Cesium.Math.toDegrees(cartographic.longitude);let latitude = Cesium.Math.toDegrees(cartographic.latitude);return {lon: longitude,lat: latitude,height: cartographic.height,};});points.value = resp;const resps = points.value.map((item) => {return {longitude: item.lon,latitude: item.lat,height: item.height,};});// resp.push(resp[0])resps.forEach((item, index) => {if (resps[index + 1]?.longitude) {let longitude = (+item.longitude + +resps[index + 1].longitude) / 2;let latitude = (+item.latitude + +resps[index + 1].latitude) / 2;let height = (+item.height + +resps[index + 1].height) / 2;let position = [+longitude, +latitude, +height];let text = distanceApi(item, resps[index + 1]).toFixed(1) + "m";labelApis(`labelPoy_${buildUUID()}`, position, text);}});pick.polyline.positions = point;pick.polygon.hierarchy = polyData;}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);handler.setInputAction(() => {if (!downStatus) {return;}// removeEntities(viewer, {//   filterType: "id",//   filterReg: /label_/,// });console.log(points.value, "value");console.log("positions", positions);// 重新计算面积getCalculateArea(positions);viewer.scene.screenSpaceCameraController.enableRotate = true;viewer.scene.screenSpaceCameraController.enableZoom = true;downStatus = false;currentPoint = undefined;}, Cesium.ScreenSpaceEventType.LEFT_UP);// }
};
const pickClear = (pickData: any) => {pickData.polyline.width = 5;pickData.polyline.material.outlineWidth = 2;pickData.polyline.material.outlineColor = Cesium.Color.WHITE.withAlpha(0.4);removeEntities(viewer, {filterType: "id",filterReg: /(editPoint)|labelPoy_/,});
};
//结束绘制
const stopDraw = () => {if (handler) {handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN);handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP);handler?.destroy();startPicking.value = true;handler = null;}
};
// 随机数字
const buildUUID = () => {const hexList: string[] = [];for (let i = 0; i <= 15; i++) {hexList[i] = i.toString(16);}let uuid = "";for (let i = 1; i <= 36; i++) {if (i === 9 || i === 14 || i === 19 || i === 24) {uuid += "-";} else if (i === 15) {uuid += 4;} else if (i === 20) {uuid += hexList[(Math.random() * 4) | 8];} else {uuid += hexList[(Math.random() * 16) | 0];}}return uuid.replace(/-/g, "");
};
/*** @description: cesium获取两点之间距离 (m)* @param {*} root 当前组件的根实例* @param {*} point1 坐标1* @param {*} point2  坐标2* @return {*} 距离*/
const distanceApi = (position1: any, position2: any) => {let cartesian1 = Cesium.Cartesian3.fromDegrees(position1.longitude,position1.latitude,position1.height);let cartesian2 = Cesium.Cartesian3.fromDegrees(position2.longitude,position2.latitude,position2.height);var point1cartographic = Cesium.Cartographic.fromCartesian(cartesian1);var point2cartographic = Cesium.Cartographic.fromCartesian(cartesian2);/**根据经纬度计算出距离**/var geodesic = new Cesium.EllipsoidGeodesic();geodesic.setEndPoints(point1cartographic, point2cartographic);var distance = geodesic.surfaceDistance;//返回两点之间的距离return (distance = Math.sqrt(Math.pow(distance, 2) +Math.pow(point2cartographic.height - point1cartographic.height, 2)));
};
/*** 删除地图上的实体* @param viewer* @param option*/
const removeEntities = (viewer: Cesium.Viewer, option: any) => {if (!viewer) {return;}const removedId: string[] = [];viewer.entities.values.map((item) => {if (option.filterType == "id") {if (option.filterReg.test(item.id)) {removedId.push(item.id);}}});removedId.sort(function (a, b) {return b.indexOf("measureLineXL") !== -1 ? 1 : -1;});removedId.map(function (item) {viewer.entities.removeById(item);});
};
/*** cartesian3转gps* @param viewer* @param cartesian* @returns*/
const cartesian3ToGps = (viewer: Cesium.Viewer,cartesian: Cesium.Cartesian3
): number[] => {const cartographic =viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);return [Cesium.Math.toDegrees(cartographic.longitude),Cesium.Math.toDegrees(cartographic.latitude),cartographic.height,];
};
/*** 拾取球面坐标* @param viewer  场景视图* @param position 屏幕坐标* @returns array 地理坐标数组*/
const pickEllisoidPosition = (viewer: Cesium.Viewer,position: Cesium.Cartesian2
) => {const pickRay = viewer.scene.camera.getPickRay(position);if (pickRay) {const cartesian = viewer.scene.globe.pick(pickRay, viewer.scene);if (cartesian) {const cartographic = Cesium.Cartographic.fromCartesian(cartesian);const result = {geoPositon: [Cesium.Math.toDegrees(cartographic.longitude),Cesium.Math.toDegrees(cartographic.latitude),cartographic.height,],cartesian: cartesian,};return result;}}
};const labelApis = (id, position, text) => {viewer.entities.add({id: id,name: "labelApi",position: Cesium.Cartesian3.fromDegrees(...position),label: {text: text,showBackground: true, //显示背景backgroundColor: new Cesium.Color.fromCssColorString("rgba(0,0,0,0.7)"),horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //对齐方式font: "16px sans-serif",fillColor: Cesium.Color.MIDNIGHTBLUE,outlineColor: Cesium.Color.WHITE,style: Cesium.LabelStyle.FILL_AND_OUTLINE,outlineWidth: 4,pixelOffset: new Cesium.Cartesian2(0, -10), // 视角偏移verticalOrigin: Cesium.VerticalOrigin.BOTTOM,distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 400000), // 可视范围eyeOffset: new Cesium.Cartesian3(0, 0, -30),},});
};const clean = () => {removeEntities(viewer, {filterType: "id",filterReg: /(editPoint)|planBy|labelPoy_|label_/,});// 停止绘制stopDraw();// console.log(handler, "handler");
};
// 彻底清除
function thoroughClean(){tableDataObj.drawList=[]clean()
}
const echoEditing = () => {let square=ref()
console.log("square",square)clean();let polyObj: any = null;let polyId = "planBy" + buildUUID();// 点位存储let polygon = new Cesium.PolygonHierarchy();let dynamicPolygon: any = new Cesium.Entity();let pointData: any = [];pointData = tableDataObj.drawList;let points: any = [];
// console.log("drawList",tableDataObj.drawList)
// console.log("pointData",pointData)
if(pointData.length==0){alert("没有点位数据，无法回显！！！")return
}for (let i = 0; i < pointData.length; i++) {const tmp = cartesian3ToGps(viewer, pointData[i]);points.push(tmp[0], tmp[1], tmp[2]);}// console.log(points, "lll");if (!polyObj) {dynamicPolygon = {id: polyId,polyline: {width: 7,// ...lineStyle,material: new Cesium.PolylineOutlineMaterialProperty({color: Cesium.Color.AQUA.withAlpha(0.7), // 线的颜色outlineWidth: 4,outlineColor: Cesium.Color.WHITE.withAlpha(0.6),}),show: true,clampToGround: true,positions: Cesium.Cartesian3.fromDegreesArrayHeights(points),},polygon: {hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(points),material: Cesium.Color.STEELBLUE.withAlpha(0.4),clampToGround: true,},};polyObj = viewer.entities.add(dynamicPolygon);handlePolyClick();// 计算面积getCalculateArea(pointData);// 右键删除handlePolyRightClick();}
};//调用第三方插件计算面积 turf
function getAreaAndCenter(positions: any) {if (!positions || positions.length < 1) return;var cartographics = [];var turfPoints = [];for (var i = 0; i < positions.length; i++) {var cartesian3 = positions[i];var cartographic = Cesium.Cartographic.fromCartesian(cartesian3);cartographics.push([Cesium.Math.toDegrees(cartographic.longitude),Cesium.Math.toDegrees(cartographic.latitude),]);turfPoints.push(turf.point([Cesium.Math.toDegrees(cartographic.longitude),Cesium.Math.toDegrees(cartographic.latitude),]));}if (!cartographics.length) return;cartographics = cartographics.concat([cartographics[0]]);var polygon = turf.polygon([cartographics]);var area = turf.area(polygon);//获取当前范围的中心点var features = turf.featureCollection(turfPoints);var turfCenter = turf.center(features);var center = turfCenter.geometry.coordinates;return {area: area,center: Cesium.Cartesian3.fromDegrees(center[0], center[1]),};
}
function formateArea(val: any, dw: string) {if (val == undefined) return;let dwStr = "";dw = dw || "m";if (dw == "km" || dw == "平方千米") {dwStr += (Number(val) / 1000000).toFixed(2) + "km²";} else if (dw == "m" || dw == "平方米") {dwStr += Number(val).toFixed(2) + "m²";} else {}return dwStr;
}
</script><style scoped>
#cesiumContainer {position: absolute;width: 100%;height: 100%;top: 0px;left: 0px;margin: 0;padding: 0;overflow: hidden;
}
.but {position: absolute;top: 50px;left: 100px;width: 200px;height: 20px;display: flex;justify-content: space-between;/* background-color: black; */z-index: 2;
}
.but div {height: 20px;font-size: 12px;z-index: 2;cursor: pointer;min-width: 100px;text-align: center;padding: 10px;background: rgba(0, 0, 0, 0.5);color: #fff;border-radius: 5px;margin-left: 10px;
}</style>
<style lang="scss" scoped>.animated {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;
}.animated.infinite {-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;
}.animated.hinge {-webkit-animation-duration: 2s;animation-duration: 2s;
}/*the animation definition*/@-webkit-keyframes fadeInDown {0% {opacity: 0;-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0)}100% {opacity: 1;-webkit-transform: none;transform: none}
}@keyframes fadeInDown {0% {opacity: 0;-webkit-transform: translate3d(0, -100%, 0);-ms-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0)}100% {opacity: 1;-webkit-transform: none;-ms-transform: none;transform: none}
}.fadeInDown {-webkit-animation-name: fadeInDown;animation-name: fadeInDown
}/*base code*/
.animated_two {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;
}
.animated_two.infinite {-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;
}
.animated_two.hinge {-webkit-animation-duration: 2s;animation-duration: 2s;
}
/*the animation definition*/
@-webkit-keyframes fadeOut {0% {opacity: 1}100% {opacity: 0}
}
@keyframes fadeOut {0% {opacity: 1}100% {opacity: 0}
}
.fadeOut {-webkit-animation-name: fadeOut;animation-name: fadeOut
}/*base code*/
.animated_three {-webkit-animation-duration: 2s;animation-duration: 2s;-webkit-animation-fill-mode: both;animation-fill-mode: both;
}
.animated_three.infinite {-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;
}
.animated_three.hinge {-webkit-animation-duration: 3s;animation-duration: 3s;
}
/*the animation definition*/
@-webkit-keyframes zoomIn {0% {opacity: 0;-webkit-transform: scale3d(.3, .3, .3);transform: scale3d(.3, .3, .3)}50% {opacity: 1}
}
@keyframes zoomIn {0% {opacity: 0;-webkit-transform: scale3d(.3, .3, .3);-ms-transform: scale3d(.3, .3, .3);transform: scale3d(.3, .3, .3)}50% {opacity: 1}
}
.zoomIn {-webkit-animation-name: zoomIn;animation-name: zoomIn
}/*base code*/
.animated_four {-webkit-animation-duration: 2s;animation-duration: 2s;-webkit-animation-fill-mode: both;animation-fill-mode: both;
}
.animated_four.infinite {-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;
}
.animated_four.hinge {-webkit-animation-duration: 3s;animation-duration: 3s;
}
/*the animation definition*/
@-webkit-keyframes fadeInUpBig {0% {opacity: 0;-webkit-transform: translate3d(0, 2000px, 0);transform: translate3d(0, 2000px, 0)}100% {opacity: 1;-webkit-transform: none;transform: none}
}
@keyframes fadeInUpBig {0% {opacity: 0;-webkit-transform: translate3d(0, 2000px, 0);-ms-transform: translate3d(0, 2000px, 0);transform: translate3d(0, 2000px, 0)}100% {opacity: 1;-webkit-transform: none;-ms-transform: none;transform: none}
}
.fadeInUpBig {-webkit-animation-name: fadeInUpBig;animation-name: fadeInUpBig
}/*base code*/
.animated_six {-webkit-animation-duration: 2s;animation-duration: 2s;-webkit-animation-fill-mode: both;animation-fill-mode: both;
}
.animated_six.infinite {-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;
}
.animated_six.hinge {-webkit-animation-duration: 3s;animation-duration: 3s;
}
/*the animation definition*/
@-webkit-keyframes fadeOutDownBig {0% {opacity: 1}100% {opacity: 0;-webkit-transform: translate3d(0, 2000px, 0);transform: translate3d(0, 2000px, 0)}
}
@keyframes fadeOutDownBig {0% {opacity: 1}100% {opacity: 0;-webkit-transform: translate3d(0, 2000px, 0);-ms-transform: translate3d(0, 2000px, 0);transform: translate3d(0, 2000px, 0)}
}
.fadeOutDownBig {-webkit-animation-name: fadeOutDownBig;animation-name: fadeOutDownBig
}/*base code*/
.animated_five {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;
}
.animated_five.infinite {-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;
}
.animated_five.hinge {-webkit-animation-duration: 2s;animation-duration: 2s;
}
/*the animation definition*/
@-webkit-keyframes rotateIn {0% {-webkit-transform-origin: center;transform-origin: center;-webkit-transform: rotate3d(0, 0, 1, -200deg);transform: rotate3d(0, 0, 1, -200deg);opacity: 0}100% {-webkit-transform-origin: center;transform-origin: center;-webkit-transform: none;transform: none;opacity: 1}
}
@keyframes rotateIn {0% {-webkit-transform-origin: center;-ms-transform-origin: center;transform-origin: center;-webkit-transform: rotate3d(0, 0, 1, -200deg);-ms-transform: rotate3d(0, 0, 1, -200deg);transform: rotate3d(0, 0, 1, -200deg);opacity: 0}100% {-webkit-transform-origin: center;-ms-transform-origin: center;transform-origin: center;-webkit-transform: none;-ms-transform: none;transform: none;opacity: 1}
}
.rotateIn {-webkit-animation-name: rotateIn;animation-name: rotateIn
}/*base code*/
.animated_seven {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;
}
.animated_seven.infinite {-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;
}
.animated_seven.hinge {-webkit-animation-duration: 2s;animation-duration: 2s;
}
/*the animation definition*/
@-webkit-keyframes rotateOut {0% {-webkit-transform-origin: center;transform-origin: center;opacity: 1}100% {-webkit-transform-origin: center;transform-origin: center;-webkit-transform: rotate3d(0, 0, 1, 200deg);transform: rotate3d(0, 0, 1, 200deg);opacity: 0}
}
@keyframes rotateOut {0% {-webkit-transform-origin: center;-ms-transform-origin: center;transform-origin: center;opacity: 1}100% {-webkit-transform-origin: center;-ms-transform-origin: center;transform-origin: center;-webkit-transform: rotate3d(0, 0, 1, 200deg);-ms-transform: rotate3d(0, 0, 1, 200deg);transform: rotate3d(0, 0, 1, 200deg);opacity: 0}
}
.rotateOut {-webkit-animation-name: rotateOut;animation-name: rotateOut
}/*base code*/
.animated_eight {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;
}
.animated_eight.infinite {-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;
}
.animated_eight.hinge {-webkit-animation-duration: 2s;animation-duration: 2s;
}
/*the animation definition*/
@-webkit-keyframes wobble {0% {-webkit-transform: none;transform: none}15% {-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)}30% {-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)}45% {-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)}60% {-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)}75% {-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)}100% {-webkit-transform: none;transform: none}
}
@keyframes wobble {0% {-webkit-transform: none;-ms-transform: none;transform: none}15% {-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);-ms-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)}30% {-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);-ms-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)}45% {-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);-ms-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)}60% {-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);-ms-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)}75% {-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);-ms-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)}100% {-webkit-transform: none;-ms-transform: none;transform: none}
}
.wobble {-webkit-animation-name: wobble;animation-name: wobble
}</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/843017.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

大学理科生搜题软件？分享四个软件和公众号，来对比看看吧 #笔记#知识分享

大学理科生搜题软件？分享四个软件和公众号，来对比看看吧 #笔记#知识分享

在快节奏的大学生活中&#xff0c;合理利用这些日常学习工具&#xff0c;能够让你事半功倍&#xff0c;提高学习效率。 1.福昕翻译 可以一键翻译文档内容&#xff0c;并提供还原排版的译文&#xff0c;对经常看外文文献的朋友来说&#xff0c;绝对是福音 福昕翻译是一流专业…
阅读更多...
设计模式基础——设计原则介绍

设计模式基础——设计原则介绍

1.概述 ​ 对于面向对象软件系统的设计而言&#xff0c;如何同时提高一个软件系统的可维护性、可复用性、可拓展性是面向对象设计需要解决的核心问题之一。面向对象设计原则应运而生&#xff0c;这些原则你会在设计模式中找到它们的影子&#xff0c;也是设计模式的基础。往往判…
阅读更多...
HTML大雪纷飞

HTML大雪纷飞

目录 写在前面 HTML简介 完整代码 代码分析 运行结果 系列文章 写在后面 写在前面 小编又又又出现啦&#xff01;这次小编给大家带来大雪纷飞HTML版&#xff0c;不需要任何的环境&#xff0c;只要有一个浏览器&#xff0c;就可以随时随地下一场大雪哦&#xff01; HTM…
阅读更多...
Diffusion Model, Stable Diffusion, Stable Diffusion XL 详解

Diffusion Model, Stable Diffusion, Stable Diffusion XL 详解

文章目录 Diffusion Model生成模型DDPM概述向前扩散过程前向扩散的逐步过程前向扩散的整体过程 反向去噪过程网络结构训练和推理过程训练过程推理过程优化目标 详细数学推导数学基础向前扩散过程反向去噪过程 Stable Diffusion组成结构运行流程网络结构变分自编码器 (VAE)文本编…
阅读更多...
富港银行 邀请码 兑换码 优惠码 分享

富港银行 邀请码 兑换码 优惠码 分享

首次记得一定要扫码注册&#xff0c;扫码注册开户费50美金&#xff0c;每笔26美金手续费&#xff0c;目前能接收CBI银行资金的有&#xff1a;工行、交通、中行&#xff0c;请知悉 cbi帐户管理费&#xff1a;10美元/月&#xff0c;余额>500美元&#xff0c;1美元/月/&#x…
阅读更多...
在vue中实现下载文件功能

在vue中实现下载文件功能

实际操作为&#xff0c;在表格中 我们可以获取到文件的id&#xff0c;通过插槽就可以实现 <template #default"scope"><el-button type"text" click"handleDown(scope.row)"><span>下载</span></el-button> </…
阅读更多...
数组基础-笔记

数组基础-笔记

数组是非常基础的数据结构&#xff0c;实现运用和理解是两回事 数组是存放在连续内存空间上的相同类型的数据的集合 可以方便的通过下表索引的方式获取到下标下对应的数据。 举一个字符数组的例子&#xff1a; 注意两点&#xff1a; 数组下标从0开始 数组内存空间的地址是连…
阅读更多...
Python的selenium爬取

Python的selenium爬取

1.selenium 1.1.前言 使用python的requests模块还是存在很大的局限性&#xff0c;例如&#xff1a;只发一次请求&#xff1b;针对ajax动态加载的网页则无法获取数据等等问题。特此&#xff0c;本章节将通过selenium模拟浏览器来完成更高级的爬虫抓取任务。 1.2.什么是seleniu…
阅读更多...
Redhat7.4部署MySQL-5.7.17搭建双主互为主从

Redhat7.4部署MySQL-5.7.17搭建双主互为主从

一、准备工作 需要先准备已经搭建好的两台数据库&#xff0c;并且保证服务器之间网络是通的&#xff0c;3306端口可以相互访问。 二、修改两台数据库my.cnf 配置文件&#xff0c;将下列内容添加进去&#xff0c;放在 [mysqld] 下 我们暂定两台服务器为A服务和B服务&#xff…
阅读更多...
【音视频基础概念】颜色与图像

【音视频基础概念】颜色与图像

文章目录 前言一、三原色不同三原色的概念三原色的作用 二、颜色空间颜色空间是什么颜色空间的作用常见颜色空间示例灰度图像是什么灰度图像的作用灰度图像的技术细节示例 总结 前言 在当今数字媒体时代&#xff0c;音视频技术在我们的日常生活中占据了重要位置。无论是观看电…
阅读更多...
线代与图形学的暧昧二三事

线代与图形学的暧昧二三事

A Swift and Brutal Introduction to Linear Algebra 计算机图形学依赖于线性代数、微积分、统计...物理方面涉及到光学&#xff08;波动光学&#xff1a;不再假设光是直线传播&#xff0c;作为一种光波与物体表面材质进行作用接触&#xff0c;如何生成不同的外观&#xff09;…
阅读更多...
STM32硬件接口I2C应用（基于BH1750）

STM32硬件接口I2C应用（基于BH1750）

目录 概述 1 STM32Cube控制配置I2C 1.1 I2C参数配置 1.2 使用STM32Cube产生工程 2 HAL库函数介绍 2.1 初始化函数 2.2 写数据函数 2.3 读数据函数 3 光照传感器BH1750 3.1 认识BH1750 3.2 BH1750寄存器 3.3 采集数据流程 4 BH1750驱动实现 4.1 接口函数实现 4.2…
阅读更多...
vite+js配置

vite+js配置

vite js 配置路径 npm install types/node --save-dev vite.config.js import { defineConfig } from vite import vue from vitejs/plugin-vue //需要引入 import path from path// https://vitejs.dev/config/ export default defineConfig({plugins: [vue()],resolve: {a…
阅读更多...
港口与航运3D三维虚拟仿真展区让更多人了解到海洋知识

港口与航运3D三维虚拟仿真展区让更多人了解到海洋知识

在短短20天内&#xff0c;搭建起200多家线上3D展厅&#xff0c;听起来似乎是一项艰巨的任务。然而&#xff0c;对于我们的3d云展平台而言&#xff0c;这早已成为常态。连续三年&#xff0c;我们已成功为众多会展公司在短时间内构建出几百家甚至上千家的线上3D展会&#xff0c;见…
阅读更多...
简单的利用有限脉冲响应(FIR)滤波器对心电信号进行降噪（Python）

简单的利用有限脉冲响应(FIR)滤波器对心电信号进行降噪（Python）

代码很简单。 import numpy as np import matplotlib.pyplot as plt#------------------------Bandstop Filter Function------------------------ def bandstop(M,low,high,Fs):#50Hz removalk1 int( (low/Fs)*M) # index 22k2 int( (high/Fs)*M) # index 27#DC removalk0 …
阅读更多...
关于C++的IO流简单总结

关于C++的IO流简单总结

基础IO流 C的IO以面向对象的形式实现, 同时兼容了C语言面向过程的IO方式 C 标准库提供了四个基本流对象&#xff1a; cin&#xff1a;用于从标准输入&#xff08;通常是键盘&#xff09;读取数据。 cout&#xff1a;用于向标准输出&#xff08;通常是控制台&#xff09;写入…
阅读更多...
怎么使用Stable diffusion中的models

怎么使用Stable diffusion中的models

Stable diffusion中的models Stable diffusion model也可以叫做checkpoint model&#xff0c;是预先训练好的Stable diffusion权重&#xff0c;用于生成特定风格的图像。模型生成的图像类型取决于训练图像。 如果训练数据中从未出现过猫的图像&#xff0c;模型就无法生成猫的…
阅读更多...
面试八-存泄漏是什么，有哪几种，怎么解决？

面试八-存泄漏是什么，有哪几种，怎么解决？

一、内存泄漏几种情况 当使用基类指针指向派生类对象时&#xff0c;如果基类的析构函数不是虚函数&#xff0c;那么在使用基类指针来删除这个对象时&#xff0c;只会调用基类的析构函数&#xff0c;而不会调用派生类的析构函数。这就导致了派生类中的资源无法正确释放&#xff…
阅读更多...
22公司斩获亚洲品牌经济峰会“亚洲数字化服务领军企业奖”

22公司斩获亚洲品牌经济峰会“亚洲数字化服务领军企业奖”

5月25日&#xff0c;以“亚洲新势力&#xff1a;创新、融合与可持续发展”为主题的亚洲品牌经济峰会2024深圳会议在深圳益田威斯汀酒店举办&#xff0c;本次活动由中国亚洲经济发展协会指导&#xff0c;由亚洲国际品牌研究院主办&#xff0c;旨在搭建品牌创新与经济发展交流平台…
阅读更多...
B站pink老师CSS学习（一）

B站pink老师CSS学习（一）

文章目录 一、CSS基础选择器1.标签选择器2.类选择器3. id选择器4.通配符选择器 二、字体属性1.字体2.字体大小3.字体粗细4.文字样式5.复合属性 三、文本属性1.文本颜色2.对齐文本3.装饰文本4.文本缩进5.行间距 四、CSS引入方式1. 内部样式表2.行内样式表3.外部样式表 一、CSS基…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023