前言

本文基于上文的配置，继续讲cesium的基础使用

viewer查看器

var viewer = new Cesium.Viewer("cesiumContainer", {
    // 是否显示信息窗口
    infoBox: false,
    // 是否显示查询按钮
    geocoder: false,
    // 不显示home按钮
    homeButton: false,
    // 控制查看器的显示模式
    sceneModePicker: false,
    // 是否显示图层选择
    baseLayerPicker: false,
    // 是否显示帮助按钮
    navigationHelpButton: false,
    // 是否播放动画
    animation: false,
    // 是否显示时间轴
    timeline: false,
    // 是否显示全屏按钮
    fullscreenButton: false,
  });

设置天空盒子

var viewer = new Cesium.Viewer("cesiumContainer", {
    // 是否显示信息窗口
    infoBox: false,
    // 是否显示查询按钮
    geocoder: false,
    // 不显示home按钮
    homeButton: false,
    // 控制查看器的显示模式
    sceneModePicker: false,
    // 是否显示图层选择
    baseLayerPicker: false,
    // 是否显示帮助按钮
    navigationHelpButton: false,
    // 是否播放动画
    animation: false,
    // 是否显示时间轴
    timeline: false,
    // 是否显示全屏按钮
    fullscreenButton: false,
    // 设置天空盒
    skyBox: new Cesium.SkyBox({
      sources: {
        positiveX: "./texture/sky/px.jpg",
        negativeX: "./texture/sky/nx.jpg",
        positiveY: "./texture/sky/ny.jpg",
        negativeY: "./texture/sky/py.jpg",
        positiveZ: "./texture/sky/pz.jpg",
        negativeZ: "./texture/sky/nz.jpg",
      },
    }),
  });

自定义地图

使用天地图
如何注册天地图和添加天地图的tk我就不展开了,我们来到这个页面

使用天地图地图

使用WebMapTileServiceImageryProvider

http://t0.tianditu.gov.cn，这部分代码是上面你要渲染的地图选择
service=wmts：指定所使用的服务类型为 WMTS（Web Map Tile Service）。
request=GetTile：指定请求类型为获取瓦片。
version=1.0.0：指定所使用的 WMTS 版本。
LAYER=vec：指定图层类型为矢量图层。对应的图层名（图层路径的前缀，如vec_c的前缀是vec）
tileMatrixSet=w：指定切片矩阵集合为墨卡托投影坐标系。
TileMatrix={TileMatrix}：动态替换为具体的切片级别。
TileRow={TileRow}：动态替换为具体的切片行号。
TileCol={TileCol}：动态替换为具体的切片列号。
style=default：指定样式为默认样式。

format=tiles：指定瓦片格式为 tiles，表示以瓦片形式返回地图数据。

//   天地图影像服务
   imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
     url: "http://t0.tianditu.gov.cn/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=您的密钥",
     layer: "tdtBasicLayer",
     style: "default",
     format: "image/jpeg",
     tileMatrixSetID: "GoogleMapsCompatible",
   }),

// 天地图矢量路径图
    imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
      url: "http://t0.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=b7ac87e8c7a0af26f6378bde574cec2e",
      layer: "tdtBasicLayer",
      style: "default",
      format: "image/jpeg",
      tileMatrixSetID: "GoogleMapsCompatible",
    }),

使用UrlTemplateImageryProvider

imageryProvider: new Cesium.UrlTemplateImageryProvider({
      url: "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=b7ac87e8c7a0af26f6378bde574cec2e",
      layer: "tdtBasicLayer",
      style: "default",
      format: "image/jpeg",
      tileMatrixSetID: "GoogleMapsCompatible",
    }),

使用这个属性就可以直接用官网提供的获取瓦片的url来获取

使用高德地图

// 高德矢量图
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",
    }),

注:当然还有的地图可以使用new Cesium.OpenStreetMapImageryProvider来获取

地图叠加

开启天地图

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=您的密钥",
      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

效果展示

添加地形

默认情况

默认情况下地形是平的

添加cesium自带的地形设置

onMounted(() => {
  var viewer = new Cesium.Viewer("cesiumContainer", {
    // 是否显示信息窗口
    infoBox: false,
    // 设置地形
    terrainProvider: Cesium.createWorldTerrain({
      requestVertexNormals: true,
      requestWaterMask: true,
    }),
  });

  // 隐藏logo
  viewer.cesiumWidget.creditContainer.style.display = "none";
});

陆地地形

requestVertexNormals: true,

海洋地形

requestWaterMask: true,

自定义地形

使用地理数据空间云下载数据

使用cesiumlab转换数据

没有安装的可以先去安装,官网地址:http://cesiumlab.com/
安装好之后通过搜索启动

通过地形切片把文件添加，三角算法选择vcg，存储类型改成散列然后选择置顶文件夹导出

使用转换后的数据

1
2
3

terrainProvider: new Cesium.CesiumTerrainProvider({
      url: "./terrains/gz",
    }),

我们可以看到广州这块有一定的地形凸起

坐标系与数值

onMounted(() => {
  var viewer = new Cesium.Viewer("cesiumContainer", {
    // 是否显示信息窗口
    infoBox: false,
  });

  // 隐藏logo
  viewer.cesiumWidget.creditContainer.style.display = "none";

  // 1/屏幕坐标系统，二维的笛卡尔坐标系，Cartesian2类型
  // 2/地理坐标系统，WGS-84坐标系，Cartographic类型,经度，纬度，高度
  // 3/笛卡尔空间直角坐标系，Cartesian3类型

  // 角度与弧度的转换
  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);
});

相机基础设置

可以设置相机的基础位置和飞往动画

onMounted(() => {
  var viewer = new Cesium.Viewer("cesiumContainer", {
    // 是否显示信息窗口
    infoBox: false,
  });

  // 隐藏logo
  viewer.cesiumWidget.creditContainer.style.display = "none";

  // setview瞬间到达指定位置，视角
  // 生成position是天安门的位置
  var position = Cesium.Cartesian3.fromDegrees(116.393428, 39.90923, 100);
  viewer.camera.setView({
    // 指定相机位置
    destination: position,
    // 指定相机视角
    orientation: {
      // 指定相机的朝向,偏航角
      heading: Cesium.Math.toRadians(0),
      // 指定相机的俯仰角,0度是竖直向上,-90度是向下
      pitch: Cesium.Math.toRadians(-20),
      // 指定相机的滚转角,翻滚角
      roll: 0,
    },
  });

  // // flyto,让相机飞往某个地方
  // viewer.camera.flyTo({
  //   destination: position,
  //   orientation: {
  //     heading: Cesium.Math.toRadians(0),
  //     pitch: Cesium.Math.toRadians(-20),
  //     roll: 0,
  //   },
  // });
});

添加按键交互

// 通过按键移动相机
  document.addEventListener("keydown", (e) => {
    // console.log(e);
    // 获取相机离地面的高度
    var height = viewer.camera.positionCartographic.height;
    var moveRate = height / 100;
    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.1));
    } else if (e.key == "e") {
      // 设置相机向右旋转相机
      viewer.camera.lookRight(Cesium.Math.toRadians(0.1));
    } else if (e.key == "r") {
      // 设置相机向上旋转相机
      viewer.camera.lookUp(Cesium.Math.toRadians(0.1));
    } else if (e.key == "f") {
      // 设置相机向下旋转相机
      viewer.camera.lookDown(Cesium.Math.toRadians(0.1));
    } else if (e.key == "g") {
      // 向左逆时针翻滚
      viewer.camera.twistLeft(Cesium.Math.toRadians(0.1));
    } else if (e.key == "h") {
      // 向右顺时针翻滚
      viewer.camera.twistRight(Cesium.Math.toRadians(0.1));
    }
  });

blog-of-codesigner(顾炯洋)

recorded growth

前言