@Cesium学习记录 -- 24/01/12

最新推荐文章于 2024-07-23 13:38:59 发布

lingang.li

最新推荐文章于 2024-07-23 13:38:59 发布

阅读量384

点赞数 11

分类专栏： Cesium 文章标签：学习 javascript vue.js

本文链接：https://blog.csdn.net/weixin_45099497/article/details/135546481

版权

Cesium 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在Cesium 中添加一个图片贴图

效果图
在这里插入图片描述
在这加了一个国内的雷达图

  //添加雷达图
    setSingleTileImageryProvider(){
    //图片路径
      let url1 = this.$URL + "api/feillight1/";
      //转换坐标
      let rectangle = new Cesium.Rectangle.fromDegrees(73.3026367, 10.0541364, 135.0113892, 53.5943089);
      let singleTile = new Cesium.SingleTileImageryProvider({
            url : url1,
            rectangle : rectangle,//图片的坐标
            opacity :1//透明度
        });
        this.viewer.imageryLayers.addImageryProvider(singleTile);//添加到底图中
    },

地图中的比例尺指南针缩放等组件的传送门

比例尺组件

添加圆型范围线

效果图
在这里插入图片描述

  //添加圆
    setEllipseGraphics(e) {
  		//e 范围米
      	// 定义圆心的经纬度坐标
      let centerLongitude = 116.61011;
      let centerLatitude = 40.08363;
      let center = Cesium.Cartesian3.fromDegrees(centerLongitude, centerLatitude);
      for (let index = 0; index < 4; index++) {
        // 定义圆的半径（单位：米）
        let radiusInMeters = e * (index + 1); // 10 公里
        // 计算圆形边线
          let positions = this.computeCircleBoundary(center, radiusInMeters);
          // 添加Polyline实体
          this.viewer.entities.add({
              name : 'circle outline',
              polyline : {
                  positions : positions,
                  width : 2.0,
                  material :  new Cesium.Color(20, 52, 124, 0.5)
              }
          });
      }
      // this.viewer.zoomTo(this.viewer.entities)
      // 将摄像头定位到圆心
      this.viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(116.61011, 40.08363,1000000),
      });
    },
        // 计算圆形边线的函数
    computeCircleBoundary(center, radius) {
        let positions = [];
        for (let i = 0; i <= 360; i++) {
            let radians = Cesium.Math.toRadians(i);
            let positionCartographic = Cesium.Cartographic.fromCartesian(center);
            let position = new Cesium.Cartesian3(radius * Math.cos(radians), radius * Math.sin(radians), positionCartographic.height);
            let matrix = Cesium.Transforms.eastNorthUpToFixedFrame(center);      
            let positionFixed = new Cesium.Cartesian3();
            Cesium.Matrix4.multiplyByPoint(matrix, position, positionFixed);
            positions.push(positionFixed);
        }
        return positions;
    },

在以上圆圈上标记字符

效果图
在这里插入图片描述

  //添加圆上的文字
    setmultiplyByScalar(e){
    //e 范围米
      var center =  Cesium.Cartesian3.fromDegrees(116.61011, 40.08363);
      let direction = new Cesium.Cartesian3(Math.cos(Cesium.Math.toRadians(45)), Math.sin(Cesium.Math.toRadians(45)), 0);
       let angle = 45; // 指定45度
      for (let index = 0; index < 4; index++) {
          let radiusInMeters = (index+1)*e;
          let distance = radiusInMeters;  // 你的半径
           let relativePosition = Cesium.Cartesian3.multiplyByScalar(direction, distance, new Cesium.Cartesian3());
           let labelPos = Cesium.Cartesian3.add(center, relativePosition, new Cesium.Cartesian3());
           var cartographic = Cesium.Cartographic.fromCartesian(labelPos);
              cartographic.height = 10; // 将高度设置为0

              labelPos = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude); // 转回笛卡尔坐标
              let  text = index == 0 ?'30KM':index == 1 ?'60KM':index == 2 ?'90KM':index == 3 ?'120KM':''
              let label = this.viewer.entities.add({
                position : labelPos,
                label : {
                  text : text,
                  font : '20px Helvetica',
                  fillColor : Cesium.Color.RED
                }
              });
          // label.clampToGround = true;
      }
    },