vue+cesium项目demo

花归去

已于 2024-05-28 17:03:43 修改

阅读量203

点赞数 1

分类专栏： vue cesium 文章标签： vue.js 前端 cesium

于 2024-05-11 18:18:35 首次发布

本文链接：https://blog.csdn.net/weixin_42120669/article/details/138725639

版权

vue 同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

cesium

9 篇文章 0 订阅

订阅专栏

使用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 token
  Cesium.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, // 信息框
  });
  // 隐藏logo
  viewer._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);

  // box
  const 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>