Cesium地图地形加载与建筑体的使用

最新推荐文章于 2024-05-29 09:42:03 发布

未名＇

最新推荐文章于 2024-05-29 09:42:03 发布

阅读量573

点赞数 1

分类专栏： Cesium 文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_43892230/article/details/126116088

版权

Cesium 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

一、地图与地形加载

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>地图地形加载</title>
  <script src="../../lib/Cesium/Cesium.js"></script>
  <link rel="stylesheet" href="../../lib/Cesium/Widgets/widgets.css">
  <style>
    html,
    body {
      margin: 0px;
      padding: 0px;
    }
  </style>
</head>
<body>
  <div id="yc-cesiumContainer"></div>
  <script>
    // 加载新地图，设置一个变量用于存储新地图的信息
    // ArcGis地图,ArcGisMapServer是当前比较主流的GIS地图服务器
    var esri = new Cesium.ArcGisMapServerImageryProvider({
      url:'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'

    })
    Cesium.Ion.defaultAccessToken = '官网申请的token';
    const viewer = new Cesium.Viewer('yc-cesiumContainer',{
      // 首先要把默认的地图按钮设置为隐藏,否则会影响新地图的加载
      baseLayerPicker: false,
      // 设置地图
      imageryProvider:esri,
      // 放入引入的地形,CesiumTerrainProvider方法是将地形数据，转换为Cesium可以访问的格式
      terrainProvider: new Cesium.CesiumTerrainProvider({
        // url用于放入地形服务器的地址
        url:Cesium.IonResource.fromAssetId(1),
        // 可以增加法线，用于提高光照效果
        requestVertexNormals:true,
        // 可以增加水面特效
        requestWaterMask:true
      })
    });
  </script>
</body>
</html>

效果图：
水面特效：
在这里插入图片描述
山脉地形效果：

二、夜晚的地球

// 夜晚的地球
// 这里的imageryLayers属性同样用于设置地图图层，
// addImageryProvider添加一个新的图层
const layer = viewer.imageryLayers.addImageryProvider(
  new Cesium.IonImageryProvider({ assetId: 3812 })
);

效果图：
在这里插入图片描述

三、建筑体添加和使用

添加建筑体：

	// 加载新地图，设置一个变量用于存储新地图的信息
    // ArcGis地图,ArcGisMapServer是当前比较主流的GIS地图服务器
    var esri = new Cesium.ArcGisMapServerImageryProvider({
      url:'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'

    })
    Cesium.Ion.defaultAccessToken = '官网申请token';
    const viewer = new Cesium.Viewer('yc-cesiumContainer',{
      // 首先要把默认的地图按钮设置为隐藏,否则会影响新地图的加载
      baseLayerPicker: false,
      // 设置地图
      imageryProvider:esri
    });

    // 添加建筑物，添加一个变量，用于存储我们的建筑物信息
    // Viewer中的scene是Cesium虚拟场景中所有3D图形对象和状态的容器
    // primitives属性用于获取大量的基元集合
    var tileset = viewer.scene.primitives.add(
      // Cesium3DTileset是Cesium用于传输海量异构3D地理空间数据集
      new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(96188)
      })
    )
    // 添加相机信息
    viewer.camera.setView({
      // 设置经纬度位置和相机高度
      destination: Cesium.Cartesian3.fromDegrees(121.49,31.23,3000),
      // 设置相机方向
      orientation: {
        heading:0,
        pitch:-90,
        roll:0
      }
    })
    // 对一个模型数据集合样式进行修改，就是修改它的style
    tileset.style = new Cesium.Cesium3DTileStyle({
      // 设置模型颜色
      color:"color('blue',0.5)",
      show:true
    })

上海陆家嘴效果图：
在这里插入图片描述

建筑物颜色根据建筑物高度变化：

	// 加载新地图，设置一个变量用于存储新地图的信息
    // ArcGis地图,ArcGisMapServer是当前比较主流的GIS地图服务器
    var esri = new Cesium.ArcGisMapServerImageryProvider({
      url:'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'

    })
    Cesium.Ion.defaultAccessToken = '官网申请token';
    const viewer = new Cesium.Viewer('yc-cesiumContainer',{
      // 首先要把默认的地图按钮设置为隐藏,否则会影响新地图的加载
      baseLayerPicker: false,
      // 设置地图
      imageryProvider:esri
    });
    // 纽约市建筑物的数据
    const tileset = viewer.scene.primitives.add(
      new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(75343),
      })
    );
    viewer.camera.setView({
      // 设置经纬度位置和相机高度
      destination: new Cesium.Cartesian3(1333597.291762958, -4667718.246269587,4147626.344790953),
      // 设置相机方向
      orientation: {
        heading:0.8384333942956657,
        pitch:-1.299766516859664,
        roll:0.0
      }
    })
    tileset.style = new Cesium.Cesium3DTileStyle({
      // 设置模型颜色
      color:{
        // 给不同高度的建筑体设置不同颜色，因为这里是给定了一个合集所以要加s
        conditions:[
          ['${Height} >= 300', 'rgba(45,0,75,0.5)'],
          ['${Height} >= 200', 'rgb(102,71,151)'],
          ['${Height} >= 100', 'rgb(170,162,204)'],
          ['${Height} >= 50', 'rgb(224,226,238)'],
          ['${Height} >= 25', 'rgb(252,230,200)'],
          ['${Height} >= 10', 'rgb(248,176,87)'],
          ['${Height} >= 5', 'rgb(198,106,11)'],
          ['true', 'rgb(127, 59, 8)'],
        ]
      },
      // 设置的是高度大于等于0的建筑物才可以显示出来
      show:'${Height} >= 0'
    })