VUE - Cesium 计算视角中心点

VUE - Cesium 计算视角中心点

 

cesium 根据输入角度设置中心点（俯仰角度）

 

1. 增加 VUE 页面，在页面中测试

<template>
  <div>
    <div class="container">
      <a-button type="primary" @click="SETP1">测试点</a-button>
      <a-button type="primary" @click="SETP2">角度俯视</a-button>
      <a-button type="primary" @click="SETP3">转换中心点</a-button>
    </div>
    <div id="cesiumContainer"></div>
  </div>
</template>

 

 

2. 初始化地图

this.viewer = new Cesium.Viewer('cesiumContainer', {
      animation: true,
      timeline: false,
      selectionIndicator: false,
      infoBox: false,
    });

    //加载底图 - BING
    let maptemp = new Cesium.BingMapsImageryProvider({
      url: 'https://dev.virtualearth.net',
      key: 'AijByCeMlw5NWcgLa3RZK61Mx0INwGjcE5InIvNBmMpuwwfMj4_sm5GkXJ_rUHPe',
      mapStyle: Cesium.BingMapsStyle.AERIAL,
    });
    maptemp.tag = 'base';
    this.viewer.imageryLayers.addImageryProvider(maptemp); //加载底图

 

 

测试点为：

      测试点：{ lng: 108.9423344082, lat: 34.2609052589 }
      高度：1000

 

 

3. 增加测试点

   //测试点
    SETP1() {
      const { viewer } = this;

      let p = { lng: 108.9423344082, lat: 34.2609052589 }; //测试点
      let h = 1000; //高度

      //描绘点
      var point = this.viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(p.lng, p.lat),
        point: {
          color: Cesium.Color.RED,
          pixelSize: 10,
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
          disableDepthTestDistance: Number.POSITIVE_INFINITY,
        },
      });

      viewer.scene.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(p.lng, p.lat, h),
        orientation: {
          heading: Cesium.Math.toRadians(-120),
          pitch: Cesium.Math.toRadians(-90),
        },
      });
    },

 

 俯视图效果为：

 

 

 

4. 当 pitch（俯仰角）设置成 -20 时 , 观察点跑到下面去了，不在中心位置了。

    //测试点-俯视
    SETP2() {
      const { viewer } = this;

      let p = { lng: 108.9423344082, lat: 34.2609052589 }; //测试点
      let h = 1000; //高度

      viewer.scene.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(p.lng, p.lat, h),
        orientation: {
          heading: Cesium.Math.toRadians(-120),
          pitch: Cesium.Math.toRadians(-20),
        },
      });
    },

 

 

 

 

 5. 修改相机位置，使观察点保持在界面中心点。

    // 转换中心点
    SETP3() {
      const { viewer } = this;
      let p = { lng: 108.9423344082, lat: 34.2609052589 }; //测试点
      let h = 1000; //高度

      let angle = 20; //俯视角度，默认90°，可手动更改
      let brng = -300;//heading -180 
      let obj = this.getCenterLatlng(p.lng, p.lat, brng, h / Math.tan((angle * Math.PI) / 180));

      //描绘中心点2
      var point = this.viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(obj.lng, obj.lat),
        point: {
          color: Cesium.Color.YELLOW,
          pixelSize: 10,
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
          disableDepthTestDistance: Number.POSITIVE_INFINITY,
        },
      });

      viewer.scene.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(obj.lng, obj.lat, h),
        orientation: {
          heading: Cesium.Math.toRadians(-120),
          pitch: Cesium.Math.toRadians(-20),
        },
      });
    },

 

 

 

辅助方法：

    //参数 lng、lat为90俯视时的中心，bring为 heading 角度，取反方向,dist
    getCenterLatlng(lng, lat, brng, dist) {
      var a = 6378137;
      var b = 6356752.3142;
      var f = 1 / 298.257223563;

      var lon1 = lng * 1;
      var lat1 = lat * 1;
      var s = dist;
      var alpha1 = brng * (Math.PI / 180);
      var sinAlpha1 = Math.sin(alpha1);
      var cosAlpha1 = Math.cos(alpha1);
      var tanU1 = (1 - f) * Math.tan(lat1 * (Math.PI / 180));
      var cosU1 = 1 / Math.sqrt(1 + tanU1 * tanU1),
        sinU1 = tanU1 * cosU1;
      var sigma1 = Math.atan2(tanU1, cosAlpha1);
      var sinAlpha = cosU1 * sinAlpha1;
      var cosSqAlpha = 1 - sinAlpha * sinAlpha;
      var uSq = (cosSqAlpha * (a * a - b * b)) / (b * b);
      var A = 1 + (uSq / 16384) * (4096 + uSq * (-768 + uSq * (320 - 175 * uSq)));
      var B = (uSq / 1024) * (256 + uSq * (-128 + uSq * (74 - 47 * uSq)));
      var sigma = s / (b * A),
        sigmaP = 2 * Math.PI;
      while (Math.abs(sigma - sigmaP) > 1e-12) {
        var cos2SigmaM = Math.cos(2 * sigma1 + sigma);
        var sinSigma = Math.sin(sigma);
        var cosSigma = Math.cos(sigma);
        var deltaSigma =
          B *
          sinSigma *
          (cos2SigmaM +
            (B / 4) *
              (cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM) -
                (B / 6) * cos2SigmaM * (-3 + 4 * sinSigma * sinSigma) * (-3 + 4 * cos2SigmaM * cos2SigmaM)));
        sigmaP = sigma;
        sigma = s / (b * A) + deltaSigma;
      }

      var tmp = sinU1 * sinSigma - cosU1 * cosSigma * cosAlpha1;
      var lat2 = Math.atan2(
        sinU1 * cosSigma + cosU1 * sinSigma * cosAlpha1,
        (1 - f) * Math.sqrt(sinAlpha * sinAlpha + tmp * tmp)
      );
      var lambda = Math.atan2(sinSigma * sinAlpha1, cosU1 * cosSigma - sinU1 * sinSigma * cosAlpha1);
      var C = (f / 16) * cosSqAlpha * (4 + f * (4 - 3 * cosSqAlpha));
      var L =
        lambda -
        (1 - C) *
          f *
          sinAlpha *
          (sigma + C * sinSigma * (cos2SigmaM + C * cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM)));

      var revAz = Math.atan2(sinAlpha, -tmp); // final bearing

      var lngLatObj = { lng: lon1 + L * (180 / Math.PI), lat: lat2 * (180 / Math.PI) };
      return lngLatObj;
    },

 

 

 

 

 

 参考图：

 

 

 

 

 

 

引用：https://www.cnblogs.com/hustshu/p/16184635.html