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

78 阅读 0 评论 52 点赞

我是靠谱客的博主风趣嚓茶，这篇文章主要介绍Cesium划分模型区域并且着色（五），现在分享给大家，希望可以做个参考。

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

复制代码

1
2
3
4
5
6
7
8
9
// 从 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"
  );

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

复制代码

1
2
  // 保存邻域数据的新实体集合
  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,
        };
      }
    }
  });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
  //当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,
        };
      }
    }
  });

所有配置：

复制代码

// 引入服务器提供的图像
  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;

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

// 生成多边形中心,意思就是设置这个多边形的位置
        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;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<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>