【vue-cesium】在vue上使用cesium开发三维地图（十一）点位悬空，空间效果

这是我参与11月更文挑战的第18天，活动详情查看：2021最后一次更文挑战」

前言

本系列往期文章：

之前，我们的点位是加载在地图上的，直白的讲，点位就是贴在地图上的。

但是我们这个地图是3维的，而且点位又是实体，那么他除了经纬度之外，有个高度，应该是合理的吧，对不对，xdm。

那么点位可不可以三维的显示在地图上，我们来查查，答案是可以的

点位悬空

我们来找一找这个方法Cesium.Cartesian3.fromDegrees

这样，点位就浮起来了

增加引线

但是，只是浮起来，好像还是没那么好看，

那我们接着加特效

cesium的entities的add方法，不仅可以添加point，label，billboard，也可以添加线(polyline)，

我们这次增加线

先看看效果：

实现：

在添加点位的方法中，

addMarker() {
      this.pointEntitiesLine = [];
       ...
      pointsInfo.forEach((pointObj) => {
        ...
        // 循环添加点位引线方法
        const labelEntityLine = this.loadFloatPoint(pointObj, pointObj.longitude * 1, pointObj.latitude * 1, 100);
       ...
        this.pointEntitiesLine.push(labelEntityLine);
      });
}
复制代码

loadFloatPoint()方法代码如下：

    // 加载高度线
    loadFloatPoint(pointObj, long, lat, height) {
      const Cesium = this.cesium;
      const lineColor = "#108de7";
      const entityLine = this.viewer.entities.add({
        name: 'line_' + pointObj.pointName,
        code: 'line_' + pointObj.pointCode,
        id: 'line_' + pointObj.pointCode,
        // 经度维度必须是数字
        // position: Cesium.Cartesian3.fromDegrees(120.42602, 31.92423),
        polyline: {
          positions: Cesium.Cartesian3.fromDegreesArrayHeights([
            long, lat, 0,
            long, lat, height,
          ]),
          width: 1,
          // 材质设置
          // material: Cesium.Color.DODGERBLUE,
          material: Cesium.Color.fromCssColorString(lineColor),
          // material : new Cesium.PolylineGlowMaterialProperty({ //发光线
          //     glowPower : 0.1,
          //     color : Cesium.Color.DODGERBLUE
          // })
        },
      });
      return entityLine;
    },
复制代码

这样，点位引线就添加完成了

再提升一下

结束了吗？还没有

虽然点位现在已经有3d的感觉了，但是点位弹框还在下面的位置，

点位点击之前：

点位点击之后：

我们来给点位弹框一个俯视的角度，更加3d一点

换最新的

flyToFun()方法如下：

    // 飞入到点位方法
    flyToFun(long, lat, height) {
      const Cesium = this.cesium;
      const destination = Cesium.Cartesian3.fromDegrees(long, lat, height);
      this.viewer.scene.camera.flyTo({
        destination: destination,
      });
    },
复制代码

效果出来了：

都看到这里了，求各位观众大佬们点个赞再走吧，你的赞对我非常重要