3D建模

在vue上使用cesium开发三维地图-点位悬空

以前端webGIS开发工程师的角度，讲述关于GIS的知识，带大家快速了解下webGIS的知识。

wangming

Nov 13, 2024 • 4 min read

推荐使用NSDT 3DConvert进行3D模型格式转换，支持glb、obj、stp、fbx、ifc等多种3D模型格式之间进行互相转换，在转换过程中，能够很好的保留模型原有的颜色、材质等信息。

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

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

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

点位悬空

悬空设置

我们来找一找这个方法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,
      });
    },

效果出来了：