cesium三维样式

• 配置entity样式

1.1 点

加载 point, entities，并给entities设置cesium支持的颜色。（预设好颜色，用户选择）

viewer.entities.add({

    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),

    point: {

      pixelSize: 10,

      color: Cesium.Color.YELLOW,

    },

  });

参数：

姓名	类型	属性	默认	描述
show	布尔值	<可选>	真的	一个布尔属性，指定点的可见性。
pixelSize	数字	<可选>	1	一个数字属性，以像素为单位指定大小。
heightReference	高度参考	<可选>	高度参考.NONE	一个属性，指定高度相对于什么。
color	颜色	<可选>	白颜色	指定Color点的属性。
outlineColor	颜色	<可选>	颜色：黑色	指定Color轮廓的属性。
outlineWidth	数字	<可选>	0	一个数字属性，以像素为单位指定轮廓宽度。

1. 加载模型

var entity=this.viewer.entities.add({

        name: "模型",

          position : position,

          orientation : orientation,

          model : {

              uri: mapObj.url,

              scale:15              

              ,minimumPixelSize : 32

              //maximumScale : 20000

          }

      });

参数：

姓名	类型	属性	默认	描述
silhouetteColor	Property | Color	<optional>	Color.RED	一个属性，它指定轮廓的 Color 。
silhouetteSize	Property | number	<optional>	0.0	一个数字属性，以像素为单位指定轮廓的大小。
color	Property | Color	<optional>	Color.WHITE	一个属性，它指定与模型的渲染颜色混合的 Color 。
colorBlendMode	Property | ColorBlendMode	<optional>	ColorBlendMode.HIGHLIGHT	一个枚举属性，指定颜色如何与模型融合。
colorBlendAmount	Property | number	<optional>	0.5	一个数字属性，用于指定 colorBlendMode 为 MIX 时的颜色强度。值0.0会产生模型的着色，而值1.0会导致纯色，介于两者之间的任何值都会导致两者混合。
imageBasedLightingFactor	Property | Cartesian2	<optional>	new Cartesian2(1.0, 1.0)	一个属性，用于指定基于漫反射和镜面反射的图像照明的贡献。
lightColor	Property | Color	<optional>		为模型着色时指定浅色的属性。如果 undefined ，则使用场景的浅色。

1. 1. 线

const redLine = viewer.entities.add({

  name: "Red dashed line",

  polyline: {

    positions: Cesium.Cartesian3.fromDegreesArrayHeights([

      -75,

      38,

      250000,

      -125,

      38,

      250000,

    ]),

    width: 5,

    material: new Cesium.PolylineDashMaterialProperty({

      color: Cesium.Color.RED,

    }),

  },

});

参数：PolylineGraphics - Cesium Documentation

1. 1. 面
2. this.viewer.entities.add({
3.       name : 'Red box with black outline',
4.       position: Cesium.Cartesian3.fromDegrees(118.016974, 37.383542, 0),
5.       box : {
6.         dimensions : new Cesium.Cartesian3(4000000.0, 3000000.0, 1),
7.         material : Cesium.Color.WHITE.withAlpha(0.01),
8.         outline : true,
9.         outlineColor : Cesium.Color.BLACK
10.       }
11.     });

其他entity模型：

https://www.cnblogs.com/huqi-code/p/8287497.html

• 配置geojson样式

1.1 点

var promise = Cesium.GeoJsonDataSource.load(mapObj.url,{

        markerSize:100,

        markerColor:Cesium.Color.YELLOW

      });//从url读取空间矢量数据geojson、json

参数：

markerSize	数字	GeoJsonDataSource.markerSize	可选为每个点创建的地图图钉的默认大小（以像素为单位）。
markerColor	颜色	GeoJsonDataSource.markerColor	可选为每个点创建的地图图钉的默认颜色。

1.2 线

1. Geojson

var viewer = new Cesium.Viewer('cesiumContainer');

viewer.dataSources.add(Cesium.GeoJsonDataSource.load('../../SampleData/ne_10m_us_states.topojson', {

  stroke: Cesium.Color.HOTPINK,

  fill: Cesium.Color.PINK,

  strokeWidth: 3,

}));

参数：

行程	颜色	GeoJsonDataSource.stroke	可选折线和多边形轮廓的默认颜色。
strokeWidth	数字	GeoJsonDataSource.strokeWidth	可选折线和多边形轮廓的默认宽度。
填充	颜色	GeoJsonDataSource.fill	可选多边形内部的默认颜色。

1.3面

var viewer = new Cesium.Viewer('cesiumContainer');

viewer.dataSources.add(Cesium.GeoJsonDataSource.load('../../SampleData/ne_10m_us_states.topojson', {

  stroke: Cesium.Color.HOTPINK,

  fill: Cesium.Color.PINK,

  strokeWidth: 3,

  markerSymbol: '?'

}));

参数：

行程	颜色	GeoJsonDataSource.stroke	可选折线和多边形轮廓的默认颜色。
strokeWidth	数字	GeoJsonDataSource.strokeWidth	可选折线和多边形轮廓的默认宽度。
填充	颜色	GeoJsonDataSource.fill	可选多边形内部的默认颜色。

三、配置3DTile样式

3d白模根据建筑高度显示不同颜色

var city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({

    url: url

  }))

  //定义3d样式

  var heightStyle = new Cesium.Cesium3DTileStyle({

    color: {

      //条件判断,除了rgba也可以是rgb值

      conditions: [

        ['${height} >= 300','rgba(45,0,75,0.5)'],

        ['${height} >= 200','rgb(102,71,151)'],

        ['${height} >= 100','rgba(170,188,233,0.5)'],

        ['${height} >= 50','rgba(224,224,238,0.5)'],

        ['${height} >= 25','rgba(252,230,200,0.5)'],

        ['${height} >= 10','rgba(248,176,87,0.5)'],

        ['${height} >= 5','rgba(198,106,11,0.5)'],

        ['true','rgb(127,59,8)']

      ]

    }

  });

//赋值样式

city.style = heightStyle;