使用turf时在index.html中引用
<!-- 使用unpkg -->
<script src="https://unpkg.com/@turf/turf/turf.min.js"></script>
<template><div class="cesium_box" id="cesiumContatiner"></div><button class="bthdel_point" @click="toDelpoint">删除</button>
</template>
<script setup>
import { ErrorCodes, onMounted } from "vue";import * as Cesium from "cesium";
let viewer, pointDel, dataturf;
function toDelpoint() {console.log(viewer.entities);// 直接删除// viewer.entities.remove(pointDel)// 删除所有// viewer.entities.removeAll()// 删除指定// viewer.entities.removeById('rectangleimg')// 先拿到实体再删除// const entityPoint = viewer.entities.getById("rectangleimg");// viewer.entities.remove(entityPoint);viewer.dataSources.remove(dataturf);
}onMounted(() => {// 设置cesium tokenCesium.Ion.defaultAccessToken ="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhYzY2NGQ0My1hMjQxLTQxZDgtYjQwYy1mZjQ1YjVmYzljZDUiLCJpZCI6MjEzNDUyLCJpYXQiOjE3MTUwNzI2MTR9.ID13prfqYbHG4-WqCl9RF9cymnB3wXi4ckGO1BZvF4Y";// // 创建自定义图层// const esri=new Cesium.ArcGisMapServerImageryProvider({// url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",// enablePickFeatures: false,// })// // 初始化cesium// // viewer是所有api的开始// const viewer = new Cesium.Viewer("cesiumContatiner",{// imageryProvider:esri, //自定义图层,默认是谷歌的影响图层// // 地形图层// terrainProvider:Cesium.createWorldTerrain({// // requestWaterMask:true //水面特效// })// });// 【控件】viewer = new Cesium.Viewer("cesiumContatiner", {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模式selectionIndicator: false, //是否显示选取指示器组件// shouldAnimate: true, // 自动播放动画控件// shadows: true, // 是否显示光照投射的阴影// terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY, // 地质接收阴影`infoBox: true, // 信息框});// 隐藏logoviewer._cesiumWidget._creditContainer.style.display = "none";// promitive entity// entity 基于promitive封装的// 完美封装,调用方便// promitive// 更接近webgl底层// 可以绘制更高级的图形const tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: Cesium.IonResource.fromAssetId(69380),}));viewer.flyTo(tileset);// 线var linestring1 = turf.lineString([[-24, 63],[-23, 60],[-25, 65],[-20, 69],]);// Cesium.GeoJsonDataSource.load(linestring1).then(function (dataSource) {// viewer.dataSources.add(dataSource);// var entities = dataSource.entities.values;// for (var i = 0; i < entities.length; i++) {// var entity = entities[i];// entity.polyline.width = 2;// entity.polyline.material = Cesium.Color.RED;// }// viewer.zoomTo(dataSource);// });Cesium.GeoJsonDataSource.load(linestring1).then((res) => {console.log(res);const entity = res.entities.values[0];entity.polyline.material = Cesium.Color.RED;entity.polyline.width = 2;viewer.entities.add(entity);// viewer.zoomTo(entity)});// 多条线var multiLine = turf.multiLineString([[[0, 0],[5, 5],],[[6, 6],[10, 10],],]);Cesium.GeoJsonDataSource.load(multiLine).then((res) => {viewer.dataSources.add(res);dataturf = res;// viewer.zoomTo(res)});// 注意:polygon首尾坐标要一致var polygonturf = turf.polygon([[[-5, 52],[-4, 56],[-2, 51],[-5, 52],],]);const polygonline = Cesium.GeoJsonDataSource.load(polygonturf);viewer.dataSources.add(polygonline);// viewer.zoomTo(polygonline);// 多个多边形var multiPoly = turf.multiPolygon([[[[0, 0],[0, 10],[10, 10],[10, 0],[0, 0],],],[[[12, 12],[12, 23],[23, 23],[23, 12],[12, 12],],],]);let multiPolyTurf = Cesium.GeoJsonDataSource.load(multiPoly);viewer.dataSources.add(multiPolyTurf);// viewer.zoomTo(multiPolyTurf);// let poram = Cesium.GeoJsonDataSource.load(// "../public/ne_10m_us_states.topojson"// );// viewer.dataSources.add(poram);// viewer.zoomTo(poram)// 【kmz】// let promise = Cesium.KmlDataSource.load("../public/gdpPerCapita2008.kmz");// viewer.dataSources.add(promise);// viewer.zoomTo(promise)// 【坐标转换】//经纬度转笛卡尔坐标// 返回的是一个笛卡尔坐标(z!=高度)// const cartesian = Cesium.Cartesian3.fromDegrees(110, 20, 20); //经度、纬度、高度// const cartesian2 = Cesium.Cartesian3.fromDegrees(110, 20, 30); //经度、纬度、高度// // console.log(cartesian,cartesian2)// // 1、笛卡尔坐标转经纬度坐标// let cartographic = Cesium.Cartographic.fromCartesian(cartesian)// //2、弧度坐标转角度坐标1// // let lon=180 / Math.PI*cartographic.longitude// // let lat=180 / Math.PI*cartographic.latitude// //2、弧度坐标转角度坐标2(cesium自带的方法)// let lon =Cesium.Math.toDegrees(cartographic.longitude)// let lat =Cesium.Math.toDegrees(cartographic.latitude)// let height=cartographic.height// console.log(lon,lat,height)// 【相机】// const postition=Cesium.Cartesian3.fromDegrees(116.397128,39.916527,20000)// // setView通过定义相机目的地(方向),直接跳转到目的地// viewer.camera.setView({// destination:postition,// // 默认(0,-90,0)// orientation: {// heading: Cesium.Math.toRadians(0), // 方向 y 左右摇头// pitch: Cesium.Math.toRadians(-90), // 倾斜角度 x 上下点头 -90看地面 0看前方 90看天上// roll: 0, //z 歪头看// },// })// 【相机】【飞行】flyTo 将相机从当前位置移动到新的位置// flyTo快速切换视角,带飞行动画,可以设置飞行的时长// const postition=Cesium.Cartesian3.fromDegrees(110,20,20000)// viewer.camera.flyTo({// destination: postition,// duration:3, //单位秒// orientation: {// heading: Cesium.Math.toRadians(0), // 方向 y 左右摇头// pitch: Cesium.Math.toRadians(-90), // 倾斜角度 x 上下点头 -90看地面 0看前方 90看天上// roll: 0, //z 歪头看// },// });// 【相机】// lookAt将视角固定在设置的点位上,可以选择视角,但不能改变位置// const position2=Cesium.Cartesian3.fromDegrees(110,20)// viewer.camera.lookAt(position2,new Cesium.HeadingPitchRange(// Cesium.Math.toRadians(0),// Cesium.Math.toRadians(-90),// 20000// )// )// 实体 entity// 写法一// const point=new Cesium.Entity({// position:Cesium.Cartesian3.fromDegrees(120,30),// point:{// pixelSize:20, //像素大小// color:Cesium.Color.RED,// // outlineColor:Cesium.Color.WHITE,// // outlineWidth:2,// // heightReference:Cesium.HeightReference.CLAMP_TO_GROUND// }// })// viewer.entities.add(point)// // console.log(viewer.entities)// viewer.zoomTo(point)// 方法二(推荐)const point2 = viewer.entities.add({id: "point",position: Cesium.Cartesian3.fromDegrees(120, 30),point: {pixelSize: 20, //像素大小color: Cesium.Color.RED,outlineColor: Cesium.Color.WHITE,outlineWidth: 20,heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,},});// viewer.zoomTo(point2)// 与该实体相关联的广告牌。const billboard = viewer.entities.add({id: "billboard",position: Cesium.Cartesian3.fromDegrees(116, 40, 10),billboard: {image: "../public/dw.png",scale: 0.3,color: Cesium.Color.RED,// width:20,// height:20},});// 【label】const label = viewer.entities.add({id: "label",position: Cesium.Cartesian3.fromDegrees(112, 30, 4000),label: {text: "cesium",font: "20px sans-serif",fillColor: Cesium.Color.WHITE,showBackground: true,backgroundColor: Cesium.Color.BLACK.withAlpha(0.5),backgroundPadding: new Cesium.Cartesian2(10, 10),outlineColor: Cesium.Color.RED,outlineWidth: 2,style: Cesium.LabelStyle.FILL_AND_OUTLINE,horizontalOrigin: Cesium.HorizontalOrigin.RIGHT,verticalOrigin: Cesium.VerticalOrigin.TOP,// scaleByDistance: new Cesium.NearFarScalar(1.0e2, 1, 1.0e3, 0.2),//随着距离改变标注尺寸// pixelOffsetScaleByDistance: new Cesium.NearFarScalar(1.0e2, 1.0, 1.0e3, 0.2), //随着距离改变偏移量// translucencyByDistance:new Cesium.NearFarScalar(1.5e2,1,8.0e6,0.0),// pixelOffset:new Cesium.Cartesian2(0,1)},});// viewer.zoomTo(label);// //线const polyline = viewer.entities.add({polyline: {positions: Cesium.Cartesian3.fromDegreesArray([118, 29, 119, 29, 118, 31,]), //返回笛卡尔坐标数组width: 10,material: Cesium.Color.RED,},});// viewer.zoomTo(polyline)// 多边形const polygon = viewer.entities.add({id: "polygon",polygon: {// 左下角、右下角、右上、左上hierarchy: Cesium.Cartesian3.fromDegreesArray([121, 30, 123, 30, 122, 31, 120, 31,]),material: Cesium.Color.RED.withAlpha(0.5),height: 200000,extrudedHeight: 10000,heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,outline: true, //是否展示外线outlineColor: Cesium.Color.WHITE,outlineWidth: 2,fill: true, //是否填充},// polygon: {// hierarchy: {// positions: Cesium.Cartesian3.fromDegreesArray([// 121, 30, 123, 30, 122, 31, 120, 31,// ]),// },// material: Cesium.Color.RED.withAlpha(0.5),// },});// viewer.zoomTo(polygon);// boxconst box = viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(120, 30, 10000),box: {dimensions: new Cesium.Cartesian3(40000, 40000, 40000),material: Cesium.Color.CYAN.withAlpha(0.5),outline: true,outlineColor: Cesium.Color.WHITE,outlineWidth: 2,},});// viewer.zoomTo(box)// 椭圆const ellipse = viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(110, 30),ellipse: {semiMinorAxis: 3000, //半短轴semiMajorAxis: 5000, //半长轴// material:Cesium.Color.DARKBLUE.withAlpha(0.5),material: "../public/img.jpeg",outline: true,outlineColor: Cesium.Color.RED,outlineWidth: 20,rotation: Math.PI / 2, //选择角度extrudedHeight: 4000,fill: true,},});// viewer.zoomTo(ellipse)// 矩形const rectangle = viewer.entities.add({id: "rectangleimg",rectangle: {coordinates: Cesium.Rectangle.fromDegrees(116, 30, 117, 31),material: "../public/girl.jpg",outline: true,outlineColor: Cesium.Color.WHITE,outlineWidth: 2,height: 100000,extrudedHeight: 100000, //获取或设置数字属性,该属性指定矩形拉伸的高度。设置此属性将创建从高处开始并在此高度处结束的体积。heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //获取或设置指定拉伸的 HeightReference 的属性。fill: true,},});// viewer.zoomTo(rectangle)// 组合// const billboardZH = viewer.entities.add({// position: Cesium.Cartesian3.fromDegrees(116.17860748743055, 39.908307123610385, 100),// billboard: {// image: "../public/dw.png",// scale: 0.3,// color: Cesium.Color.YELLOW,// },// });// const lineZH = viewer.entities.add({// polyline: {// positions: Cesium.Cartesian3.fromDegreesArrayHeights([ 116.17860748743055, 39.908307123610385,0,116.17860748743055,39.908307123610385,100]),// // width: 5,// material: Cesium.Color.RED,// },// });// const labelZH=viewer.entities.add({// position: Cesium.Cartesian3.fromDegrees(116.17860748743055, 39.908307123610385, 100),// label: {// text: "中海商务",// font: "24px sans-serif",// fillColor: Cesium.Color.RED,// outlineColor: Cesium.Color.WHITE,// outlineWidth: 2,// style: Cesium.LabelStyle.FILL_AND_OUTLINE,// pixelOffset:// new Cesium.Cartesian2(0, -50), //偏移量// // eyeOffset: new Cesium.Cartesian3(0, 0, 1000), //眼睛的偏移量// },// })// viewer.zoomTo(billboardZH);// 组合实体const entity = viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(116.17860748743055,39.908307123610385,100),billboard: {image: "../public/dw.png",scale: 0.3,color: Cesium.Color.YELLOW,},polyline: {positions: Cesium.Cartesian3.fromDegreesArrayHeights([116.17860748743055, 39.908307123610385, 0, 116.17860748743055,39.908307123610385, 100,]),// width: 5,material: Cesium.Color.RED,},label: {text: "中海商务",font: "24px sans-serif",fillColor: Cesium.Color.RED,outlineColor: Cesium.Color.WHITE,outlineWidth: 2,style: Cesium.LabelStyle.FILL_AND_OUTLINE,pixelOffset: new Cesium.Cartesian2(0, -50), //偏移量// eyeOffset: new Cesium.Cartesian3(0, 0, 1000), //眼睛的偏移量},});// viewer.zoomTo(entity);pointDel = viewer.entities.add({id: "pointDel",position: Cesium.Cartesian3.fromDegrees(116.17860748743055, 39.908),point: {pixelSize: 50,color: Cesium.Color.MEDIUMPURPLE,outlineColor: Cesium.Color.LIME,outlineWidth: 20,heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,},});// viewer.zoomTo(pointDel);let lon,lat,num = 0;const lineYD = viewer.entities.add({polyline: {positions: new Cesium.CallbackProperty(() => {console.log(1);num += 0.005;lon = 116 + num;lat = 35 + num;if (lon < 117) {return Cesium.Cartesian3.fromDegreesArray([116, 35, lon, lat]);} else {// 给positions赋值一个新的对象,不再需要CallbackProprty 提供lineYD.polyline.positions = Cesium.Cartesian3.fromDegreesArray([116,35,lon,lat,]);}}, false), //传false,不传动不起来width: 5,material: Cesium.Color.RED,// clampToGround:true},});// viewer.zoomTo(lineYD);
});
</script><style scoped lang='scss'>
#cesiumContatiner {width: 100vw;height: 100vh;overflow: hidden;// :deep .cesium-viewer-bottom {// display: none;// }
}
.cesium_box {position: relative;
}
.bthdel_point {position: absolute;top: 0;left: 0;width: 100px;text-align: center;padding: 10px;background: rgba(0, 0, 0, 0.5);color: #fff;border-radius: 5px;cursor: pointer;
}
</style>