cesium(二)cesium基础使用

1 自定义地图

1.1 单个地图

// 组件挂载后执行的代码
onMounted(() => {
    
    
  // 初始化viewer，并将其绑定到ref="cesiumContainer"的div中
  const viewer = new Cesium.Viewer(cesiumContainer.value, {
    
    
    //天地图矢量路径图
    // imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
    
    
    //   url: "http://t2.tianditu.gov.cn/vec_c/wmts?tk=41fb39d4ebcff8669573365b44a6d036",
    //   layer: "tdtBasicLayer",
    //   style: "default",
    //   format: "image/jpeg",
    //   tileMatrixSetID: "GoogleMapsCompatible",
    // }),
    //   天地图影像服务
    // imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
    
    
    //   url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=30d07720fa76f07732d83c748bb84211",
    //   layer: "tdtBasicLayer",
    //   style: "default",
    //   format: "image/jpeg",
    //   tileMatrixSetID: "GoogleMapsCompatible",
    // }),
    //OSM地图,
    // imageryProvider: new Cesium.OpenStreetMapImageryProvider({
    
    
    //   url: "https://a.tile.openstreetmap.org/",
    // }),
    // 高德矢量地图,
    // imageryProvider: new Cesium.UrlTemplateImageryProvider({
    
    
    //   url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
    //   layer: "tdtVecBasicLayer",
    //   style: "default",
    //   format: "image/png",
    //   tileMatrixSetID: "GoogleMapsCompatible",
    // }),
  });
});

1.2 地图叠加

// 组件挂载后执行的代码
onMounted(() => {
    
    
  //初始化viewer，并将其绑定到ref="cesiumContainer"的div中
  const viewer = new Cesium.Viewer(cesiumContainer.value, {
    
    
    //天地图影像服务
    imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
    
    
      url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=41fb39d4ebcff8669573365b44a6d036",
      layer: "tdtBasicLayer",
      style: "default",
      format: "image/jpeg",
      tileMatrixSetID: "GoogleMapsCompatible",
    }),
  });
  //设置地图叠加
  var imageryLayers = viewer.imageryLayers;
  var layer = imageryLayers.addImageryProvider(
    //高德矢量图
    new Cesium.UrlTemplateImageryProvider({
    
    
      url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
      layer: "tdtVecBasicLayer",
      style: "default",
      format: "image/png",
      tileMatrixSetID: "GoogleMapsCompatible",
    })
  );
  //设置图层的透明度
  layer.alpha = 0.5;
});

2 添加地形

2.1 使用默认地形数据

// 组件挂载后执行的代码
onMounted(() => {
    
    
  // 初始化viewer，并将其绑定到ref="cesiumContainer"的div中
  const viewer = new Cesium.Viewer(cesiumContainer.value, {
    
    
    //设置地形
    terrainProvider: Cesium.createWorldTerrainAsync(),
  });
});

效果（添加地形后的效果可能出不来，因为对GPU的要求较高）
添加地形前（无山脉起伏效果）：

添加地形后（有山脉起伏效果）：

添加光照和水纹效果

// 组件挂载后执行的代码
onMounted(() => {
    
    
  // 初始化viewer，并将其绑定到ref="cesiumContainer"的div中
  const viewer = new Cesium.Viewer(cesiumContainer.value, {
    
    
    //设置地形
    terrainProvider: Cesium.createWorldTerrainAsync(
      {
    
    
        requestVertexNormals: true,//添加光照效果
        requestWaterMask: true,//添加水文效果
      }
    ),
  });
});

有光照效果：

有动态水纹：

2.2 自定义地形数据

2.2.1 下载地形数据

去地理空间数据云下载地形数据，并解压缩

2.2.2 解析地形数据

下载好的地形数据无法直接使用，需要解析为瓦片格式
去 cesiumlab官网下载软件，按照引导程序自行下载即可

打开下载好的软件，解析地形资源

这步提醒需要授权，需要登录后台https://account.bjxbsj.cn/login.html，进行个人身份认证

身份认证这步，我上传的证明文件是教育部学籍在线验证报告，可以自己去学信网申请

等待认证状态变为已认证后，点击授权申请，这步需要机器码
获取机器码，需要以管理员身份重新登录



等待授权申请通过后

将授权后的账号填入刚才的框中，开始解析数据

2.2.3 应用地形数据

地形数据解析后，添加到项目中

// 组件挂载后执行的代码
onMounted(async() => {
    
    
  // 初始化viewer，并将其绑定到ref="cesiumContainer"的div中
  const viewer = new Cesium.Viewer(cesiumContainer.value, {
    
    
    //只加载广州的地形数据
    terrainProvider: await Cesium.CesiumTerrainProvider.fromUrl('./terrains/gz', {
    
    
      requestVertexNormals: true,//添加光照效果
      requestWaterMask: true,//添加水纹效果
    }),
  });

});

成功渲染后，会发现只有广州的山脉有了起伏，其余地方还是平平的
广州山脉：

其余地方山脉：

3坐标系转换

3.1 英文中文对照表

• Cartesian2:二维笛卡尔坐标系
• Cartesian3:三维笛卡尔坐标系
• Cartographic:地理坐标
• Longitude:经度
• Latitude:纬度
• Height:高度
• Radians:弧度
• Degrees:角度

3.2 坐标转换API

// 组件挂载后执行的代码
onMounted(() => {
    
    
  // 初始化viewer，并将其绑定到ref="cesiumContainer"的div中
  const viewer = new Cesium.Viewer(cesiumContainer.value, {
    
    

  });
  //1屏幕坐标系，二维的笛卡尔坐标系，Cartesian2类型
  //2地理坐标系，三维的笛卡尔坐标系，Cartesian3类型，经度，纬度，高度
  //3笛卡尔坐标系，三维的笛卡尔坐标系，Cartesian3类型,x,y,z
  //角度与弧度转换
  var radians = Cesium.Math.toRadians(90);
  console.log(radians);
  //弧度与角度转换
  var degrees = Cesium.Math.toDegrees(2 * Math.PI);
  console.log(degrees);
  //将经纬度转为笛卡尔坐标(这里给的数据为角度)
  var cartesian3 = Cesium.Cartesian3.fromDegrees(
    //经度
    89.5,
    //纬度
    20.4,
    //高度
    100
  );
  console.log(cartesian3);
  //将笛卡尔坐标转为经纬度
  var cartographic = Cesium.Cartographic.fromCartesian(cartesian3);
  //这里得到的为弧度制
  console.log(cartographic);
});

4相机

4.1 setView

无动画效果，类似设置默认打开文职

// 组件挂载后执行的代码
onMounted(() => {
    
    
  // 初始化viewer，并将其绑定到ref="cesiumContainer"的div中
  const viewer = new Cesium.Viewer(cesiumContainer.value, {
    
    

  });
  //瞬间到达指定位置和视角
  var position = Cesium.Cartesian3.fromDegrees(116.393428, 39.90923, 200);
  viewer.camera.setView({
    
    
    //位置
    destination: position,
    //视角
    orientation: {
    
    
      // 偏航角(0为向北，-90为向西，90为向东)
      heading: Cesium.Math.toRadians(0.0),
      // 俯仰角(0为平视，90为仰视，-90为俯视)
      pitch: Cesium.Math.toRadians(-90.0),
      // 翻滚角
      roll: 0,
    },
  })
});

4.2 flyto

有动画效果，有一个转移的动画过程

// 组件挂载后执行的代码
onMounted(() => {
    
    
  // 初始化viewer，并将其绑定到ref="cesiumContainer"的div中
  const viewer = new Cesium.Viewer(cesiumContainer.value, {
    
    

  });
  //让相机飞往某个方向
  var position = Cesium.Cartesian3.fromDegrees(116.393428, 39.90923, 200);
  viewer.camera.flyTo({
    
    
    //位置
    destination: position,
    //视角
    orientation: {
    
    
      // 偏航角(0为向北，-90为向西，90为向东)
      heading: Cesium.Math.toRadians(0.0),
      // 俯仰角(0为平视，90为仰视，-90为俯视)
      pitch: Cesium.Math.toRadians(-90.0),
      // 翻滚角
      roll: 0,
    }
  })
});

4.3 键盘交互

用键盘控制视角前进、后退或其它

// 组件挂载后执行的代码
onMounted(() => {
    
    
  // 初始化viewer，并将其绑定到ref="cesiumContainer"的div中
  const viewer = new Cesium.Viewer(cesiumContainer.value, {
    
    

  });
  //通过按键移动相机
  document.addEventListener('keydown', (e) => {
    
    
    //获取相机离地面的高度
    var height = viewer.camera.positionCartographic.height;
    var moveRate = height / 10;
    if (e.key === 'w') {
    
    
      //前进
      viewer.camera.moveForward(moveRate);
    } else if (e.key === 's') {
    
    
      // 后退
      viewer.camera.moveBackward(moveRate);
    } else if (e.key === 'a') {
    
    
      // 左移
      viewer.camera.moveLeft(moveRate);
    } else if (e.key === 'd') {
    
    
      //右移
      viewer.camera.moveRight(moveRate);
    } else if (e.key === 'q') {
    
    
      //左旋
      viewer.camera.lookLeft(Cesium.Math.toRadians(0.5));
    } else if (e.key === 'e') {
    
    
      //右旋
      viewer.camera.lookRight(Cesium.Math.toRadians(0.5));
    } else if (e.key === 'r') {
    
    
      //上旋
      viewer.camera.lookUp(Cesium.Math.toRadians(0.5));
    } else if (e.key === 'f') {
    
    
      //下旋
      viewer.camera.lookDown(Cesium.Math.toRadians(0.5));
    } else if (e.key === 'g') {
    
    
      //左滚
      viewer.camera.twistLeft(Cesium.Math.toRadians(0.5));
    } else if (e.key === 'h') {
    
    
      //右滚
      viewer.camera.twistRight(Cesium.Math.toRadians(0.5));
    }
  });
});

5Entity添加标识

5.1 添加点标识

// 组件挂载后执行的代码
onMounted(() => {
    
    
  // 初始化viewer，并将其绑定到ref="cesiumContainer"的div中
  const viewer = new Cesium.Viewer(cesiumContainer.value, {
    
    

  });
  //广州塔位置
  var position = Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 1000);
  viewer.camera.flyTo({
    
    
    destination: position,
    orientation: {
    
    
      heading: Cesium.Math.toRadians(0.0),
      pitch: Cesium.Math.toRadians(-90.0),
      roll: 0.0
    }
  });
  //创建一个点，用来标识广州塔
  var point = viewer.entities.add({
    
    
    //点的位置
    position: Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 10),
    //点的样式
    point: {
    
    
      pixelSize: 10,//点大小
      color: Cesium.Color.RED,//点颜色
      outlineColor: Cesium.Color.WHITE,//轮廓颜色
      outlineWidth: 2,//轮廓宽度
    }
  });
  
});

扫描二维码关注公众号，回复： 17568972 查看本文章

5.2 添加3D模型

使用cesium自带的3D模型资源

// 组件挂载后执行的代码
onMounted(() => {
    
    
  // 初始化viewer，并将其绑定到ref="cesiumContainer"的div中
  const viewer = new Cesium.Viewer(cesiumContainer.value, {
    
    

  });
  //广州塔位置
  var position = Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 1000);
  viewer.camera.flyTo({
    
    
    destination: position,
    orientation: {
    
    
      heading: Cesium.Math.toRadians(0.0),
      pitch: Cesium.Math.toRadians(-90.0),
      roll: 0.0
    }
  });
  //添加3D模型
  Cesium.createOsmBuildingsAsync().then(osmBuildings => {
    
    
    viewer.scene.primitives.add(osmBuildings);
  }).catch(error => {
    
    
    console.error('Failed to add OSM buildings:', error);
  });
  
});

5.3 添加标签和广告牌

广告牌就是一个小图片，可以去iconfont选择一张图片，下载png格式，放入项目中：项目名/public/texture/gzt.png
同款图片资源在文章顶部百度网盘连接中

// 组件挂载后执行的代码
onMounted(() => {
    
    
  // 初始化viewer，并将其绑定到ref="cesiumContainer"的div中
  const viewer = new Cesium.Viewer(cesiumContainer.value, {
    
    

  });
  //创建文字标签和广告牌
  var label = viewer.entities.add({
    
    
    position: Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 650),
    label: {
    
    
      text: '广州塔',
      font: '20px sans-serif',
      fillColor: Cesium.Color.WHITE,
      outlineColor: Cesium.Color.BLACK,
      outlineWidth: 2,
      //FILL 填充文字 OUTLINE 描边文字 FILL_AND_OUTLINE 填充和描边文字
      style: Cesium.LabelStyle.FILL_AND_OUTLINE,
      //设置文字的水平显示位置 CENTER 中心点 LEFT 左侧 RIGHT 右侧
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      //设置文字的垂直显示位置 CENTER 中心点 BOTTOM 底部 TOP 顶部
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      //设置文字偏移量
      pixelOffset: new Cesium.Cartesian2(0, -20)
    },
    billboard: {
    
    
      image: "./texture/gzt.png",
      width: 50,
      height: 50,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      pixelOffset: new Cesium.Cartesian2(0, -50)
    },
  })

});

5.4 添加飞机模型

同款模型资源在文章顶部百度网盘连接中

// 组件挂载后执行的代码
onMounted(() => {
    
    
  // 初始化viewer，并将其绑定到ref="cesiumContainer"的div中
  const viewer = new Cesium.Viewer(cesiumContainer.value, {
    
    

  });
  var airPlane = viewer.entities.add({
    
    
    position: Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 1000),
    //添加飞机模型
    model: {
    
    
      uri: "./model/Air.glb",
      minimumPixelSize: 128,
      //设计飞机的轮廓
      silhouetteSize: 5,
      //设置轮廓颜色
      silhouetteColor: Cesium.Color.WHITE,
      //设置相机距离模型多远显示
      distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000),
    }
  })
  })

});

5.5 拓展

entity使用官方文档
还有很多实体，例如矩形、圆形、走廊等等，可以通过官方文档的代码示例学习
点击Code example

通过修改在线代码的各种值，可以自己试出各种效果，并理解含义（是在不理解，可以发给AI给你解释）