cesium之引入地球参考

最新推荐文章于 2024-07-21 12:21:28 发布

Estrella_妍

最新推荐文章于 2024-07-21 12:21:28 发布

阅读量376

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_67481569/article/details/139528777

版权

addEntity() {
      if (window.swpecesium) {
        var ps = {
          lon: parseFloat(103.123),
          lat: parseFloat(34.123),
          alt: parseFloat(10000),
        };
        let addParam = {
          id: "point-123",
          position: { ...ps, alt: 100 },
          config: {
            size: 30,
            outline: false,
            outlineWidth: 0,
          },
        };
        // addParam.position.lon -= 0.3;
        // addParam.id += 1;
        // //添加单个点实体
        let pointE = window.swpecesium.addEntity.addPoint(addParam);
      } else {
        setTimeout(() => {
          this.addEntity();
        }, 500);
      }
    },

<template>
  <div class="home">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
export default {
  components: {},
  mounted() {
    this.init();
    // this.addEntity();
    // this.addPrimitive();
    // this.addPrimitiveCollection();
    // this.callbackProperty1();

    this.event();
  },
  methods: {
    //初始化地图
    //#region
    init() {
      console.log("Cesium", window.Cesium);
      Cesium.Ion.defaultAccessToken = `eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkZmMyMGJkZi1lZGNiLTRjZWUtYjg5Mi0zOGQ0NDNkNTNlNzYiLCJpZCI6MTMyNzAsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NjI5MTY1MTd9.1kWwUft1-Vk2ztF4_rwkYmibN6w-tAAQmP4O2qw34mw`;

      // 地图影像的数据源
      const url = `http://192.168.0.145:8091/map`;
      let imageryProvider = new Cesium.SingleTileImageryProvider({
        url: `${url}/0/0/0.png`,
      });

      // 高程;
      var terrain = new Cesium.CesiumTerrainProvider({
        // url: window.configFile.TERRAINS[0].url,
        url: "http://127.0.0.1:8091/taihai_terrain",
      });
      var viewer = new Cesium.Viewer("cesiumContainer", {
        fullscreenButton: false,
        homeButton: false,
        // scene3DOnly: true,
        creditContainer: "cesiumContainer",
        vrButton: false,
        skyAtmosphere: false,
        infoBox: false, //是否显示点击要素之后显示的信息
        //卫星影像地图图层
        imageryProvider,
        //高程
        // terrainProvider: terrain,
        // terrainProvider: new Cesium.CesiumTerrainProvider({
        //   // url: window.configFile.TERRAINS[0].url,
        //   url: "http://127.0.0.1:8091/taihai_terrain",
        // }),
        maximumScreenSpaceError: 16, //默认值16 用于提高细节细化级别的最大屏幕空间错误
        animation: false, //是否显示动画控件 // baseLayerPicker: false, //是否显示图层选择控件
        geocoder: false, //是否显示地名查找控件
        timeline: false, //是否显示时间线控件
        sceneModePicker: true, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        infoBox: false, //是否显示点击要素之后显示的信息 // fullscreenButton: false  , //是否显示全屏
        shadows: true,
        shouldAnimate: true,
        baseLayerPicker: true, //是否显示图层选择控件
        selectionIndicator: false, //设置绿色框框不可见
      });

      console.log("viewer", viewer);
      var layers = viewer.imageryLayers;
      //叠加图层
      //世界地图7级
      layers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url: `${url}/{z}/{x}/{y}.png`,
          fileExtension: "png",
        })
      );
      //中国12级地图
      layers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url: `http://192.168.0.145:8092/china_12/{z}/{x}/{y}.png`,
          fileExtension: "png",
        })
      );
      //白城15级
      layers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url: `http://192.168.0.145:8091/bc/{z}/{x}/{y}.png`,
          fileExtension: "png",
        })
      );
      //高程数据
      window.viewer = viewer;
      //注意： 所有的cesium相关的东西 不能挂到vue上

      this.camera({
        lon: 103.123,
        lat: 34.123,
        alt: 100000,
      });
    },
    //#endregion

    // billboard	BillboardGraphics	可选与该实体相关联的广告牌。
    // cylinder	CylinderGraphics	可选与该实体关联的圆柱体。
    // ellipse	EllipseGraphics	可选与该实体关联的椭圆。
    // ellipsoid	EllipsoidGraphics	可选与该实体关联的椭球。
    // label	LabelGraphics	可选与该实体关联的options.label。
    // model	ModelGraphics	可选与该实体关联的模型。
    // point	PointGraphics	可选与该实体关联的点。
    // polygon	PolygonGraphics	可选与该实体关联的多边形。
    // polyline	PolylineGraphics	可选与该实体关联的折线。
    // rectangle	RectangleGraphics	可选与该实体关联的矩形。

    //相机跳转
    camera(position, smooth) {
      let option = {
        destination: Cesium.Cartesian3.fromDegrees(
          position.lon,
          position.lat,
          position.alt
        ),
        orientation: {
          heading: Cesium.Math.toRadians(position.heading || 0.0),
          pitch: Cesium.Math.toRadians(position.pitch || -90),
          roll: Cesium.Math.toRadians(position.roll || 0.0),
        },
      };
      if (smooth) window.viewer.camera.flyTo(option); //平滑移动
      else window.viewer.camera.setView(option); //瞬间跳转
    },

    //cesium上的图形分为两种：
    //1.实体 - cesium自己封装过的原型
    //2.原型 - 能用原型的，尽量用原型
    addEntity() {
      // console.log(" window.viewer.camera", window.viewer.camera);
      // 实体 entity
      //position位置
      //坐标系：   地理坐标系 经度[-180, 180] 纬度[-90,90]      屏幕坐标系        笛卡尔坐标系 cartesian2  cartesian3         四元数 Quaternion
      //          lon, lat, alt                                  x, y             x,y,z      x,y          x,y,z          x,y,z,w
      //坐标转换  地理转笛卡尔 Cesium.Cartesian3.fromDegrees() //参数是经纬度                 弧度  弧度= 角度/PI   Cesium.Math.toRadians
      // orientation姿态
      //位置+方位，俯仰，横滚
      //属性： id, show, position, orientation
      console.log("bill viewer.entities", viewer.entities);
      //添加线段
      const redLine = viewer.entities.add({
        name: "Red line on terrain",
        polyline: {
          positions: Cesium.Cartesian3.fromDegreesArrayHeights([
            103.123, 34.123, 1000, 105.123, 34.123, 2000,
          ]),
          width: 5,
          material: Cesium.Color.RED,
          // clampToGround: true,
        },
      });
      //添加广告牌
      let bill = viewer.entities.add({
        id: "bill",
        name: "xxx",
        position: Cesium.Cartesian3.fromDegrees(103.123, 34.123),
        billboard: {
          image: "./fire_ball.png", // default: undefined
          width: 100, // default: undefined
          height: 100, // default: undefined
        },
      });
      //根据id查找实体
      let billFind = viewer.entities.getById("bill");
      console.log("bill ", billFind);

      //遍历所有的实体
      // viewer.entities._array.forEach((it) => {
      //   console.log("bill ", it);
      // });

      //修改实体的属性
      // console.log("bill", bill, bill._billboard._image._value);
      // setTimeout(() => {
      //   bill._position.setValue(Cesium.Cartesian3.fromDegrees(105.123, 34.123));
      //   bill._billboard._image.setValue("./fire.png");
      //   console.log("bill 改了");
      // }, 2000);
      // // bill._billboard._image._value;

      // //删除实体
      // setTimeout(() => {
      //   // viewer.entities.remove(billFind);
      //   viewer.entities.removeAll();
      //   setTimeout(() => {
      //     viewer.entities.add({
      //       id: "bill",
      //       name: "xxx",
      //       position: Cesium.Cartesian3.fromDegrees(103.123, 34.123),
      //       billboard: {
      //         image: "./fire_ball.png", // default: undefined
      //         width: 100, // default: undefined
      //         height: 100, // default: undefined
      //       },
      //     });
      //   }, 2000);
      // }, 2000);

      console.log("redLine", redLine);
    },
    addPrimitive() {
      console.log(viewer.entities);
      let primive = viewer.scene.primitives.add(
        new Cesium.Primitive({
          geometryInstances: [
            new Cesium.GeometryInstance({
              id: "ellipse-111",
              geometry: new Cesium.EllipseGeometry({
                center: Cesium.Cartesian3.fromDegrees(103.123, 34.123),
                semiMajorAxis: 10000,
                semiMinorAxis: 10000,
              }),
            }),
            new Cesium.GeometryInstance({
              id: "ellipse-222",
              geometry: new Cesium.EllipseGeometry({
                center: Cesium.Cartesian3.fromDegrees(105.123, 34.123),
                semiMajorAxis: 10000,
                semiMinorAxis: 10000,
              }),
            }),
          ],
          appearance: new Cesium.EllipsoidSurfaceAppearance(),
        })
      );
      // viewer.scene.primitives.remove(primive);
      // viewer.scene.primitives.removeAll();

      // console.log(viewer.scene.primitives);
      console.log("primive", primive, viewer.scene.primitives);

      const entity = viewer.entities.add({
        id: "en-1",
        position: Cesium.Cartesian3.fromDegrees(106.123, 34.123),
        ellipse: {
          semiMajorAxis: 10000,
          semiMinorAxis: 10000,
          material: Cesium.Color.fromCssColorString("rgba(0,255,0,1)"),
        },
      });
      let billFind = viewer.entities.getById("en-1");
      console.log("entity", billFind);
    },
    addPrimitiveCollection() {
      var points = viewer.scene.primitives.add(
        new Cesium.PointPrimitiveCollection({
          // blendOption: Cesium.BlendOption.OPAQUE_AND_TRANSLUCENT,
        })
      );

      let p1 = points.add({
        position: Cesium.Cartesian3.fromDegrees(106.123, 34.123),
        color: Cesium.Color.YELLOW,
      });
      points.add({
        position: Cesium.Cartesian3.fromDegrees(105.123, 34.123),
        color: Cesium.Color.CYAN,
      });
      setTimeout(() => {
        //从谁那里加的，就从谁那里删除
        // points.remove(p1);
        // viewer.scene.primitives.remove(p1); 删不掉
        points.removeAll();
        viewer.scene.primitives.remove(points); //集合用完一定要删除，1.先清空集合，2.再从场景里删除集合
        // points.add({
        //   position: Cesium.Cartesian3.fromDegrees(106.123, 34.123),
        //   color: Cesium.Color.YELLOW,
        // });
        console.log(points);
      }, 2000);
    },
    //实时更新数据，最典型的就是更新位置
    callbackProperty1() {
      //#region
      // const redLine = viewer.entities.add({
      //   name: "Red line on terrain",
      //   polyline: {
      //     positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      //       103.123, 34.123, 1000, 105.123, 34.123, 2000,
      //     ]),
      //     width: 5,
      //     material: Cesium.Color.RED,
      //     // clampToGround: true,
      //   },
      // });
      // let base = 0;
      // setInterval(() => {
      //   base += 0.1;
      //   let ps = Cesium.Cartesian3.fromDegreesArrayHeights([
      //     103.123,
      //     34.123 + base,
      //     1000,
      //     105.123,
      //     34.123 + base,
      //     2000,
      //   ]);
      //   redLine._polyline._positions.setValue(ps);
      //   console.log();
      // }, 2000);
      //#endregion
      // let lat = 34.123;
      // const redLine = viewer.entities.add({
      //   name: "Red line on terrain",
      //   polyline: {
      //     positions: new Cesium.CallbackProperty(function () {
      //       return Cesium.Cartesian3.fromDegreesArrayHeights([
      //         103.123,
      //         lat,
      //         1000,
      //         105.123,
      //         lat,
      //         2000,
      //       ]);
      //     }, false),
      //     width: 5,
      //     material: Cesium.Color.RED,
      //     // clampToGround: true,
      //   },
      // });
      // setInterval(() => {
      //   lat += 0.1;
      // }, 10);
    },
    event() {
      //添加广告牌
      let bill = viewer.entities.add({
        id: "bill",
        name: "xxx",
        position: Cesium.Cartesian3.fromDegrees(103.123, 34.123),
        billboard: {
          image: "./fire_ball.png", // default: undefined
          width: 100, // default: undefined
          height: 100, // default: undefined
        },
      });

      let primive = viewer.scene.primitives.add(
        new Cesium.Primitive({
          geometryInstances: new Cesium.GeometryInstance({
            id: "ellipse-111",
            geometry: new Cesium.EllipseGeometry({
              center: Cesium.Cartesian3.fromDegrees(103.123, 34.123),
              semiMajorAxis: 10000,
              semiMinorAxis: 10000,
            }),
          }),
          appearance: new Cesium.EllipsoidSurfaceAppearance(),
        })
      );

      let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      handler.setInputAction(function (movement) {
        console.log("点击", movement.position);
        console.log(viewer.scene.pick(movement.position));
        // var ellipsoid = viewer.scene.globe.ellipsoid;
        // var cartesian = viewer.scene.camera.pickEllipsoid(
        //   movement.position,
        //   ellipsoid
        // );
        // console.log("cartesian", cartesian);
        // var ray1 = viewer.camera.getPickRay(movement.position);
        // var cartesian2 = viewer.scene.globe.pick(ray1, viewer.scene);
        // console.log("cartesian", cartesian2);
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

      // handler.setInputAction(function (movement) {
      //   console.log("移动", movement);
      // }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    },
    //任务1，在地图上添加 point,polyline,polygon,ellipse, ellipsoid, (cylinder)的原型
    //任务2，实现拖动实体--(尝试原型)
    //任务3，点击地图绘制线
  },
};
</script>
<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  #cesiumContainer {
    width: 100%;
    height: 100%;
    /deep/ .cesium-viewer-toolbar {
      display: none;
    }
  }
}
</style>