Cesium划分模型区域并且着色（五）

最新推荐文章于 2024-05-12 22:40:26 发布

不这是派大星

最新推荐文章于 2024-05-12 22:40:26 发布

阅读量1.9k

点赞数 4

分类专栏： Vite + Vue3 + Cesium打造数字城市快速上手文章标签： vue 前端

本文链接：https://blog.csdn.net/m0_67749488/article/details/125161119

版权

Vite + Vue3 + Cesium打造数字城市快速上手专栏收录该内容

7 篇文章 9 订阅

订阅专栏

第一步：Geojson文件引入和加载。（Geojson文件下载在文章底部）

// 从 GeoJson 文件加载邻域边界
  // Data from : https://data.cityofnewyork.us/City-Government/Neighborhood-Tabulation-Areas/cpf4-rkhq
   //GeoJSON是一种对各种地理数据结构进行编码的格式，基于Javascript对象表示法
  //(JavaScript Object Notation, 简称JSON)的地理空间信息数据交换格式。
  // GeoJSON对象可以表示几何、特征或者特征集合。
  //GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合
  var neighborhoodsPromise = Cesium.GeoJsonDataSource.load(
    "./assets/SampleData/sampleNeighborhoods.geojson"
  );

第二步：创建一个变量来保存配置数据

  // 保存邻域数据的新实体集合
  var neighborhoods;

第三步：Geojson加载成功后的，对这个实体的操作

  //当GeoJson文件加载成功后的操作
  neighborhoodsPromise.then((dataSource) => {
    // 将新数据作为实体添加到查看器
    viewer.dataSources.add(dataSource);

    //将实例保存到变量neighborhoods里
    neighborhoods = dataSource.entities;

    // 获取实例里的数据，是一个数组
    var neighborhoodEntities = dataSource.entities.values;

    //遍历这个数组以便对每一项进行样式配置，并且把这些数据放置到地形表面
    for (var i = 0; i < neighborhoodEntities.length; i++) {
      //每次循环到的数据都单独拿到
      var entity = neighborhoodEntities[i];

      //判断一下定义的多边形是否存在
      if (Cesium.defined(entity.polygon)) {
        // 使用kml邻域值作为实体名称
        entity.name = entity.properties.neighborhood;

        // 将多边形材质设置为随机的半透明颜色
        entity.polygon.material = Cesium.Color.fromRandom({
          red: 0.1,
          maximumGreen: 0.5,
          minimumBlue: 0.5,
          alpha: 0.6,
        });

        // 告诉多边形为地形着色。 ClassificationType.CESIUM_3D_TILE 将为 3D 图块集着色，而 ClassificationType.BOTH 将为 3d 图块和地形着色（BOTH 是默认值）
        entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN;

        // 生成多边形中心,意思就是设置这个多边形的位置
        var polyPositions = entity.polygon.hierarchy.getValue(
          Cesium.JulianDate.now()
        ).positions;

        // 上面生成中心点，这里进行配置中心点
        var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;

        // 设置在地球的表面
        polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
        entity.position = polyCenter;

        // 生成每个多边形的标签
        entity.label = {
          text: entity.name,
          showBackground: true,
          scale: 0.6,
          //标签水平的位置
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          //标签垂直的位置
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          //设置一下标签展示范围，摄像头高度
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
            10.0,
            8000.0
          ),
          //超过这个范围标签就不能被点击
          disableDepthTestDistance: 100.0,
        };
      }
    }
  });

所有配置：

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

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

  // 引入服务器提供的图像
  var custom = new Cesium.ArcGisMapServerImageryProvider({
    url: "//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
  });

  //自定义的配置内容
  var viewer = new Cesium.Viewer("cesiumContainer", {
    //配置是否创建baseLayerPicker小部件
    // baseLayerPicker:false,
    //配置图像的提供
    imageryProvider: custom,
    //配置Cesium的世界地形
    terrainProvider: Cesium.createWorldTerrain({
      //配置地形的3D效果
      requestWaterMask: true,
      requestVertexNormals: true,
    }),
  });


  //利用三维坐标来设置摄像头位置
  viewer.camera.setView({
    //设置摄像头初始的具体位置()
    destination: new Cesium.Cartesian3(1332761, -4662399, 4137888),
    //方向、视角角度的配置(可以直接用0-1进行设置)
    orientation: {
      heading: 0.6,
      pitch: -0.66,
    },
  });

  //引入Cesium官方自带的模型（引入自定义的模型需要注意格式）
  var city = viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({
      url: Cesium.IonResource.fromAssetId(3839),
    })
  );

  //定义3d样式（通过高度不同来设置不同的颜色）
  var heightStyle = new Cesium.Cesium3DTileStyle({
    color: {
      //条件判断（[条件,配置]）
      conditions: [
        ["${height} >= 300", "rgba(255,0,0,0.5)"],
        ["${height} >= 200", "rgb(255,165,0)"],
        ["${height} >= 100", "rgb(255,255,0)"],
        ["${height} >= 50", "rgb(0,255,0)"],
        ["${height} >= 25", "rgb(0,127,255)"],
        ["${height} >= 10", "rgb(0,0,255)"],
        ["${height} >= 5", "rgb(139,0,255)"],
        //true表示只要这个模型有,就改变它的颜色
        ["true", "rgb(127,59,8)"],
      ],
    },
  });

  //将定义好的样式赋值给引入的模型
  city.style = heightStyle;

  var geojsonOptions = {
    clampToGround: true,
  };

  // 从 GeoJson 文件加载邻域边界
  // Data from : https://data.cityofnewyork.us/City-Government/Neighborhood-Tabulation-Areas/cpf4-rkhq
  //GeoJSON是一种对各种地理数据结构进行编码的格式，基于Javascript对象表示法
  //(JavaScript Object Notation, 简称JSON)的地理空间信息数据交换格式。
  // GeoJSON对象可以表示几何、特征或者特征集合。
  //GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合
  var neighborhoodsPromise = Cesium.GeoJsonDataSource.load(
    "./assets/SampleData/sampleNeighborhoods.geojson"
  );

  // 保存邻域数据的新实体集合
  var neighborhoods;

  //当GeoJson文件加载成功后的操作
  neighborhoodsPromise.then((dataSource) => {
    // 将新数据作为实体添加到查看器
    viewer.dataSources.add(dataSource);

    //将实例保存到变量neighborhoods里
    neighborhoods = dataSource.entities;

    // 获取实例里的数据，是一个数组
    var neighborhoodEntities = dataSource.entities.values;

    //遍历这个数组以便对每一项进行样式配置，并且把这些数据放置到地形表面
    for (var i = 0; i < neighborhoodEntities.length; i++) {
      //每次循环到的数据都单独拿到
      var entity = neighborhoodEntities[i];

      //判断一下定义的多边形是否存在
      if (Cesium.defined(entity.polygon)) {
        // 使用kml邻域值作为实体名称
        entity.name = entity.properties.neighborhood;

        // 将多边形材质设置为随机的半透明颜色
        entity.polygon.material = Cesium.Color.fromRandom({
          red: 0.1,
          maximumGreen: 0.5,
          minimumBlue: 0.5,
          alpha: 0.6,
        });

        // 告诉多边形为地形着色。 ClassificationType.CESIUM_3D_TILE 将为 3D 图块集着色，而 ClassificationType.BOTH 将为 3d 图块和地形着色（BOTH 是默认值）
        entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN;

        // 生成多边形中心,意思就是设置这个多边形的位置
        var polyPositions = entity.polygon.hierarchy.getValue(
          Cesium.JulianDate.now()
        ).positions;

        // 上面生成中心点，这里进行配置中心点
        var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;

        // 设置在地球的表面
        polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
        entity.position = polyCenter;

        // 生成每个多边形的标签
        entity.label = {
          text: entity.name,
          showBackground: true,
          scale: 0.6,
          //标签水平的位置
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          //标签垂直的位置
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          //设置一下标签展示范围，摄像头高度
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
            10.0,
            8000.0
          ),
          //超过这个范围标签就不能被点击
          disableDepthTestDistance: 100.0,
        };
      }
    }
  });
});
</script>

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

Geojson文件下载：链接: https://pan.baidu.com/s/1KZvuWx7DoVAV_KSVk9Di0A?pwd=wmyh 提取码: wmyh

entity实体文档：Entity - Cesium Documentation