在vite创建的vue3项目中使用Cesium加载纽约建筑模型、设置样式，划分城市区域并着色

已于 2023-07-20 16:59:23 修改
阅读量584 收藏 1
点赞数 2
分类专栏： Cesium学习 文章标签： vue.js Cesium
于 2023-07-11 16:00:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44032178/article/details/131661829
版权

在vite创建的vue3项目中使用Cesium加载纽约建筑模型、设置样式，划分城市区域并着色

  1. 使用vite创建vue3项目

    npm create vite@latest

    cd到创建的项目文件夹中

    npm install

    安装Cesium

    npm i cesium vite-plugin-cesium vite -D

  2. 配置

    1. vite.config.js文件：添加Cesium并设置反向代理实现跨域。

      import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium';
export default defineConfig({
  plugins: [vue(), cesium()],
  //设置反向代理，跨域
  server: {
    proxy: {
      '/ArcGIS': {
        target: 'https://services.arcgisonline.com',//代理的地址
        changeOrigin: true,
      }
    }
  }
});

    2. style.css(可选)：修改#app样式

      #app {
		  max-width: 100%;
		  margin: 0 auto;
		  padding: 2rem;
		  text-align: center;
		}

  3. 代码

    1. App.vue

      <template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import * as Cesium from 'cesium';
import { onMounted } from 'vue';
onMounted(async () => {

  // 相当于密钥，申请使用下边链接中的数据时需要用到
  Cesium.Ion.defaultAccessToken = '你的token';
  Cesium.ArcGisMapService.defaultAccessToken = '你的token';


  let viewer = new Cesium.Viewer('cesiumContainer', {
    // 防止报错 但是加上之后点物体就不会弹窗显示信息了
    infoBox: false,
    // 去掉右上角的一个小选项卡
    baseLayerPicker: false,
    // 加载世界街道地图的底图
    baseLayer: Cesium.ImageryLayer.fromProviderAsync(
      Cesium.ArcGisMapServerImageryProvider.fromUrl("/ArcGIS/rest/services/World_Street_Map/MapServer")
    ),
    // 三维立体效果、水波纹
    terrainProvider: await Cesium.createWorldTerrainAsync({
      requestVertexNormals: true,
      requestWaterMask: true
    })
  });

  viewer.camera.setView({
    // 初始的相机的定位 定在纽约
    destination: new Cesium.Cartesian3(1332761, -4662399, 4137888),
    // 方向 俯仰
    orientation: {
      heading: 0.6,
      pitch: -0.66
    }
  });

  // 添加纽约建筑模型
  let city = viewer.scene.primitives.add(
    await Cesium.Cesium3DTileset.fromIonAssetId(75343)
  );

  // 定义建筑的3D样式 层次分明
  city.style = new Cesium.Cesium3DTileStyle({
    color: {
      // 条件判断建筑具体的颜色
      conditions: [
        ['${Height} >= 300', 'rgba(45,0,75,0.5)'],
        ['${Height} >= 200', 'rgb(102,71,151)'],
        ['${Height} >= 100', 'rgba(170,162,204,0.5)'],
        ['${Height} >= 50', 'rgba(224,226,238,0.5)'],
        ['${Height} >= 25', 'rgba(252,230,200,0.5)'],
        ['${Height} >= 10', 'rgba(248,176,87,0.5)'],
        ["true", 'rgb(127,59,8)']
      ]
    }
  })


  // 邻域边界的加载
  let neighborhoodsPromise = Cesium.GeoJsonDataSource.load('./assets/SampleData/sampleNeighborhoods.geojson');
  // 贴在地图表面
  neighborhoodsPromise.then((dataSource) => {
    // 将数据添加到查看器
    viewer.dataSources.add(dataSource);
    // 把数据进行着色的调整以及放到地图的表面
    // 拿到区域的实例  Get the array of entities
    let neighborhoodsEntities = dataSource.entities.values;
    for (let i = 0; i < neighborhoodsEntities.length; i++) {
      let entity = neighborhoodsEntities[i];
      // 判断存不存在相应的图形
      if (Cesium.defined(entity.polygon)) {
        entity.name = entity.properties.neighborhood;
        // 设置多边形颜色
        entity.polygon.material = Cesium.Color.fromRandom({
          red: 0.1,
          maximumGreen: 0.5,
          minimumBlue: 0.5,
          alpha: 0.6
        });
        // 设置地形着色
        entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN;
        // 设置位置 贴到多边形最底下
        let polyPositions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
        entity.position = Cesium.Ellipsoid.WGS84.scaleToGeocentricSurface(
          Cesium.BoundingSphere.fromPoints(polyPositions).center
        );

        // 生成标签
        entity.label = {
          text: entity.name,
          showBackground: true,
          scale: 0.6,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          // 设置显示的距离范围
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10, 8000),
          // 禁用的距离
          disableDepthTestDistance: 100
        }
      }
    }
  })
})
</script>

<style>
html,
body,
#app,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>

    2. 解读

      1. 加载token

        // 相当于密钥，申请使用下边链接中的数据时需要用到
Cesium.Ion.defaultAccessToken = '你的token';
Cesium.ArcGisMapService.defaultAccessToken = '你的token';

      2. 创建查看器viewer，加载世界街道地图，注意vite.config.js中配合的跨域。

          let viewer = new Cesium.Viewer('cesiumContainer', {
    // 防止报错
    infoBox: false,
    // 去掉右上角的一个小选项卡
    baseLayerPicker: false,
    // 加载世界街道地图的底图
    baseLayer: Cesium.ImageryLayer.fromProviderAsync(
      Cesium.ArcGisMapServerImageryProvider.fromUrl("/ArcGIS/rest/services/World_Street_Map/MapServer")
    ),
    // 三维立体效果、水波纹
    terrainProvider: await Cesium.createWorldTerrainAsync({
      requestVertexNormals: true,
      requestWaterMask: true
    })
  });

      3. 初始化相机位置

        viewer.camera.setView({
    // 初始的相机的定位 定在纽约
    destination: new Cesium.Cartesian3(1332761, -4662399, 4137888),
    // 方向 俯仰
    orientation: {
      heading: 0.6,
      pitch: -0.66
    }
  });

      4. 添加纽约建筑模型并设置建筑颜色样式

        // 添加纽约建筑模型
  let city = viewer.scene.primitives.add(
    await Cesium.Cesium3DTileset.fromIonAssetId(75343)
  );

  // 定义建筑的3D样式 层次分明
  city.style = new Cesium.Cesium3DTileStyle({
    color: {
      // 条件判断建筑具体的颜色
      conditions: [
        ['${Height} >= 300', 'rgba(45,0,75,0.5)'],
        ['${Height} >= 200', 'rgb(102,71,151)'],
        ['${Height} >= 100', 'rgba(170,162,204,0.5)'],
        ['${Height} >= 50', 'rgba(224,226,238,0.5)'],
        ['${Height} >= 25', 'rgba(252,230,200,0.5)'],
        ['${Height} >= 10', 'rgba(248,176,87,0.5)'],
        ["true", 'rgb(127,59,8)']
      ]
    }
  })

      5. 划分城市区域并着色

        // 邻域边界的加载
  let neighborhoodsPromise = Cesium.GeoJsonDataSource.load('./assets/SampleData/sampleNeighborhoods.geojson');
  // 贴在地图表面
  neighborhoodsPromise.then((dataSource) => {
    // 将数据添加到查看器
    viewer.dataSources.add(dataSource);
    // 把数据进行着色的调整以及放到地图的表面
    // 拿到区域的实例  Get the array of entities
    let neighborhoodsEntities = dataSource.entities.values;
    for (let i = 0; i < neighborhoodsEntities.length; i++) {
      let entity = neighborhoodsEntities[i];
      // 判断存不存在相应的图形
      if (Cesium.defined(entity.polygon)) {
        entity.name = entity.properties.neighborhood;
        // 设置多边形颜色
        entity.polygon.material = Cesium.Color.fromRandom({
          red: 0.1,
          maximumGreen: 0.5,
          minimumBlue: 0.5,
          alpha: 0.6
        });
        // 设置地形着色
        entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN;
        // 设置位置 贴到多边形最底下
        let polyPositions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
        entity.position = Cesium.Ellipsoid.WGS84.scaleToGeocentricSurface(
          Cesium.BoundingSphere.fromPoints(polyPositions).center
        );

        // 生成标签
        entity.label = {
          text: entity.name,
          showBackground: true,
          scale: 0.6,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          // 设置显示的距离范围
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10, 8000),
          // 禁用的距离
          disableDepthTestDistance: 100
        }
      }
    }
  })

  4. 效果：npm run dev运行

在这里插入图片描述

BreezeChasingDrizzle
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
nyc-open-geojson:纽约市开放数据集的 GeoJSON 文件
06-20
纽约市开放数据 - GeoJSON 格式 作为今年项目的一部分，我们采用了计划提供的一些并将其绘制在地图上。 您可能认为这只需几秒钟，但不幸的是，无法以提取数据，因此无法轻松绘制在诸如地图上。 因此，为了让其他人的生活更轻松，这个存储库包含了一些数据集的已转换的 GeoJSON 数据。 它们已根据类别分类到不同的目录中，自述文件中提供了有关每个数据集的信息。 检查上次更新日期的最新提交信息。 想要添加一个新的 GeoJSON 文件吗？ 更新了现有的？ 当添加或更新新数据集时，此存储库不会自动更新，因此它很可能仅存储历史数据。 如果您有一个新的 GeoJSON 文件，请随时更新 category 目录中的 README（如果需要，创建一个新的），添加 GeoJSON 文件，并在 GitHub 上创建一个到此存储库的拉取请求。
个Vite+Vue3+TypeScript+Cesium.js集成模板是一个开箱即用的项目模板
04-01
该模板提供了一个简单的示例，展示了如何在Vue3应用程序中使用Cesium.js API创建一个基本的地球场景，并实现了一些基本的交互功能。除此之外，该模板还提供了一些常用的依赖和插件，如axios、element-plus、vuex等，...
cesium+vue3+js加载3D模型，模型节点动画效果
qq_35367119的博客
02-21 528
cesium+vue3+js加载3D模型，获取3D模型构件节点，构件节点的位置做转换、旋转等操作，形成一定的动画效果。1、节点绕X轴做角度（利用旋转矩阵）旋转，3、旋转、位置转换、缩放等操作。
cesium学习（一），在vue3项目中引入cesium
weixin_46561899的博客
04-30 455
参考文档：https://blog.csdn.net/weixin_47872719/article/details/136875619。中文网地址：http://cesium.xin/cesium/cn/Documentation1.62/Viewer.html。获取token地址：https://ion.cesium.com/stories。
cesium 加载3D建筑模型（3D tiles）
最新发布
weixin_40451732的博客
05-31 1847
上面的模型都是cesium自带的，如果是自己的模型，怎么加载呢？有两种方式：通过方式[官网地址](上传到cesiumion自己的资源中，会生成一个id，然后用前面的方法学习视频参考文章。
vue3【vite】中使用cesium
11-27 3203
【代码】vue3【vite】中使用cesium。
在vite项目中添加Cesium，我们如何让它完美运行？
qq_24518001的博客
10-13 1163
记录下没有通过CDN方式加载的步骤，这样能很好的解决初始化加载速度慢的问题。vite社区插件安装cesium。
Vue3.x +Vite引入第三方Cesium包的配置方法
l491453302的专栏
12-30 4770
在基于Cesium的应用开发过程中，经常会遇到要用的库并不是标准的Cesium官方包的情况，官方包的Vue集成是相当成熟的，可以查看的资料也比较多，但是对于非官方的包引用集成，特别是在Vue3+Vite环境中，更是很少被人讨论到。本文针对在实际项目中，介绍如何在Vue3.x+Vite+TS环境引入第三方修改后的Cesium包进行集成开发的配置方法。
vue3整合cesium（ts+vite构建器）
qq_35359474的博客
11-15 825
vue3 ts vite整合cesium
vue3+ts+vite+cesium 加载天地图影像、标注等多服务器随机加载切换版本
04-02
这段基于 Vue.js 的 Cesium 地图应用示例展示了如何使用 Cesium.js 创建一个具有自定义配置的 3D 地球视图。Cesium.js 是一个开源 WebGL 虚拟地球引擎，可以构建交互式的 3D 地图应用。示例中的底图和注记图层来自...
vite+vue+cesium项目搭建
03-13
5. **引入Cesium**：为了在Vue项目中使用Cesium，你需要通过`yarn add -D cesium vite vite-plugin-cesium`或`npm install --save-dev cesium vite-plugin-cesium`来安装Cesium库及其对应的Vite插件。这个插件能帮助...
vue3中使用Web Worker多线程（TS风味版）
06-17
用于《vue3中使用Web Worker多线程》这篇文章的项目Demo下载 文章地址：https://blog.csdn.net/weixin_42063951/article/details/125300644
vite+vue3使用模块化批量发布Mockjs接口
03-29
在现代前端开发中，使用Vite和Vue3的组合已经成为了一种高效且灵活的选择。"vite+vue3使用模块化批量发布Mockjs接口"这个主题涵盖了如何在Vite搭建的环境中，结合Vue3和Mockjs来实现接口的模块化和批量处理。这将...
基于vue3+vite+cesium 生成热力图CesiumHeatmap源码
11-22
在vue3+vite+cesium加载CesiumHeatmap生成热力图时不能直接使用， 需对源码进行重新封装及修改后方可在vue3+vite中调用； 源码已修改并验证可用；
vue中加载使用cesium加载3dTileset以及三维模型移动(1.108版本）
qq_46639390的博客
11-29 1384
【代码】vue中加载使用cesium加载3dTileset以及三维模型移动(1.108版本）
Vue 第三方集成之 Cesium
qq_25081445的博客
03-10 4140
最近项目有三维地图展示需求，甲方提供了三维数据，要求使用Cesium集成。 利用一天时间集中突击了一下做个笔记，后面再用到的话也好自查。 声明一下，作者也是最近刚接触cesium，目前的探索也只是作为初学者一个导引吧，避免少走弯路。不喜勿喷，谢谢。 资源 官网地址：https://cesium.com/platform/ 文档示例很多，API也很全，就是全部英文看起来费劲，建议深度学习可以看看。 GitHub地址：https://github.com/CesiumGS 有几个JavaScript分类的dem
Vite Vue项目加载Cesium模块
白发空垂三千丈
11-21 1277
1 创建项目 选择一个文件夹，打开PowerShell，输入 yarn create vite 根据提示选择项目名称和使用语言（这里选用Vue + ts）。 进入刚刚创建的文件夹，重新打开PowerShell，输入： yarn add cesium 待命令执行完成之后，输入 yarn run dev 即可预览项目。 2 配置Cesium Vite项目配置Cesium支持非常简单，只需要在index.html 中引入Cesium的样式表和脚本即可。 <!DOCTYPE html> <h
Vue3+vite+cesium环境搭建
baidu_34785556的博客
11-09 361
Vue3+vite+cesium环境搭建，利用vue3和vite实现快速启动相应和更智能的数据绑定，为webgis项目开发提供高效开发环境。
cesium-加载3dTiles
热门推荐
孙霸天的专栏
01-08 1万+
cesium-加载3dTiles 3dTiles介绍 3D Tiles是一种开放的三维空间数据标准，其设计目的主要是为了提升大的三维场景中模型的加载和渲染速度。假如要在Web客户端渲染一个非常大的三维模型（如一个大城市的建筑模型），如果把模型全部下载到客户端并且进行渲染，这个过程所消耗的时间对于使用普通电脑的用户来说是不能接受的。然而，在绝大多数的用户交互式的三维场景中，都只需要渲染模型的一小部分，将三维模型全部加载并渲染是一种极大的资源浪费，3D Tiles为这个问题提供了一个很好的解决方案。将三维空间数
怎么在ts环境的vite创建的vue3项目里使用cesium导入glb文件
06-01
在 TypeScript 环境的 Vite 创建的 Vue 3 项目中使用 Cesium 并导入 `.glb` 文件，你可以按照以下步骤进行操作： 1. 安装 Cesium： ``` npm install cesium --save ``` 2. 在 `index.html` 中引入 Cesium 的 CSS ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值