样式

在做GIS开发时候我们总会遇到各种样式的问题，比如：使用Cesium做开发的时候，Cesium的Color颜色是不直接支持16进制的，还需转换才行。还有就是Cesium对应geojson这种矢量数据外观渲染支持不太好，需要自己做样式。THEngine提供了一些样式的封装，方便开发者使用。

一、应用于单个Feature或者Entity的样式

THEngine主要的作用是将Cesium 的一些样式参数转换成更适合前端开发，比如将Cesium.Color的参数换成字符串形式、Cesium.material 转成易于理解的参数形式。DistanceDisplayCondition转成数组形式等

1. PointEntityStyle

案例

const featureCollection = new THEngine.layer.FeatureCollection(viewer);
const entity = featureCollection.add({
  type: "Point",
  position: [116.4234422, 39.93442235],
  //样式信息PointStyle
  style: {
    type: "Point",
    color: "red",
    pixelSize: 10,
    outlineColor: "#ffffff",
    outlineWidth: 2,
    disableDepthTestDistance: Number.POSITIVE_INFINITY,
  },
  //属性信息
  properties: {
    name: "目标点",
    phone: "15512453625",
  },
});
viewer.flyTo(entity);

参数

参数名称	数据类型	默认值	描述
`show`	`boolean`	`true`	一个布尔值或 `Property`，用于指定点的可见性。`true` 表示点可见，`false` 表示点不可见。
`pixelSize`	`number`	`1`	一个数值或 `Property`，指定点在屏幕上显示的像素大小。
`heightReference`	`HeightReference`	`HeightReference.NONE`	一个 `HeightReference` 枚举值，用于指定点的高度相对于什么，例如相对于地面、绝对高度等。
`color`	`String`	`red`	一个 `Color` 对象，用于指定点的颜色。
`outlineColor`	`String`	`yellow`	一个 `Color` 对象，用于指定点轮廓的颜色。当 `outlineWidth` 大于 0 时，轮廓才会显示。
`outlineWidth`	`number`	`0`	一个数值或 `Property`，指定点轮廓的宽度（以像素为单位）。值为 0 时，不显示轮廓。
`scaleByDistance`	`NearFarScalar`	无	一个 `NearFarScalar` 对象，用于根据点到相机的距离来缩放点的大小。
`translucencyByDistance`	`NearFarScalar`	无	一个 `NearFarScalar` 对象，用于根据点到相机的距离来设置点的透明度。
`distanceDisplayCondition`	`DistanceDisplayCondition`	无	一个 `DistanceDisplayCondition` 对象，用于指定从相机到该点的距离在什么范围内时，该点将被显示。
`disableDepthTestDistance`	`number`	无	一个数值或 `Property`，指定从相机到该点的距离达到此值时，将禁用深度测试。
`splitDirection`	`SplitDirection`	无	一个 `SplitDirection` 枚举值，用于指定应用于该点的分割方向。

2. PolylineStyle

案例

const featureCollection = new THEngine.layer.FeatureCollection(viewer);
const entity = featureCollection.add({
  type: "LineString",
  positions: [
    [116.4234422, 39.93242235, 10],
    [116.4214402, 39.93442233, 10],
  ],
  style:{
   material: "yellow",
    width: 3,
  }
});
viewer.flyTo(entity);

参数

参数名称	数据类型	默认值	描述
`show`	`boolean`	`true`	当值为 `true` 时折线可见，为 `false` 时折线不可见。
`width`	`number`	`1.0`	一个数值或 `Property`，用于指定折线的宽度，单位为像素。该值决定了折线在屏幕上显示的粗细程度。
`granularity`	`number`	`Cesium.Math.RADIANS_PER_DEGREE`	一个数值或 `Property`，当 `arcType` 不是 `ArcType.NONE` 时，用于指定每个纬度和经度之间的角度距离。它影响着弧线类型折线的精度和细节程度。
`material`	`MaterialProperty` 或 `Color`	`Color.WHITE`	一个 `MaterialProperty` 或 `Color` 对象，用于指定绘制折线时使用的材质或颜色。可以是预定义的颜色，也可以是自定义的材质。
`depthFailMaterial`	`MaterialProperty` 或 `Color`	无	一个 `MaterialProperty` 或 `Color` 对象，用于指定当折线在地形下方时绘制折线所使用的材质或颜色。如果未设置，在这种情况下可能使用默认的显示方式。
`arcType`	`ArcType`	`ArcType.GEODESIC`	一个 `ArcType` 枚举值，用于指定折线线段必须遵循的线的类型。例如，`ArcType.GEODESIC` 表示遵循大地线，`ArcType.NONE` 表示不使用弧线类型。
`clampToGround`	`boolean`	`false`	一个布尔值或 `Property`，用于指定折线是否应贴合到地面上。当值为 `true` 时，折线会根据地形起伏进行贴合；为 `false` 时，折线以三维空间中的位置显示。
`shadows`	`ShadowMode`	`ShadowMode.DISABLED`	一个 `ShadowMode` 枚举值，用于指定折线是否从光源投射或接收阴影。可取值包括 `ShadowMode.DISABLED`（禁用阴影）、`ShadowMode.CAST_ONLY`（仅投射阴影）、`ShadowMode.RECEIVE_ONLY`（仅接收阴影）、`ShadowMode.CAST_AND_RECEIVE`（投射并接收阴影）。
`distanceDisplayCondition`	`DistanceDisplayCondition`	无	一个 `DistanceDisplayCondition` 对象，用于指定从相机到该折线的距离在什么范围内时，该折线将被显示。通过此参数可以控制折线在不同距离下的可见性。
`classificationType`	`ClassificationType`	`ClassificationType.BOTH`	一个 `ClassificationType` 枚举值，用于指定当折线在地面上时，它是否会对地形、3D 瓦片或两者进行分类。可取值包括 `ClassificationType.BOTH`（对地形和 3D 瓦片都分类）、`ClassificationType.TERRAIN`（仅对地形分类）、`ClassificationType.ENTITIES`（仅对 3D 实体分类）。
`zIndex`	`number`	`0`	一个数值或 `Property`，用于指定用于对地面几何图形进行排序的 `zIndex`。仅当 `clampToGround` 为 `true` 且支持地形上的折线时才会生效，`zIndex` 值越大，折线在显示上越靠前。

3. PolygonStyle

案例

const featureCollection = new THEngine.layer.FeatureCollection(viewer);
const entity = featureCollection.add({
  type: "LineString",
  positions: [
    [116.4234422, 39.93242235, 10],
    [116.4214402, 39.93442233, 10],
  ],
  style:{
   material: "yellow",
    width: 3,
  }
});
viewer.flyTo(entity);

参数

参数名称	数据类型	默认值	描述
`show`	`boolean`	`true`	一个布尔值或 `Property`，用于指定多边形（polygon）的可见性。当值为 `true` 时多边形可见，为 `false` 时多边形不可见。
`hierarchy`	`PolygonHierarchy` 或 `Cartesian3[]`	无（必填）	一个 `PolygonHierarchy` 对象，或者是包含 `Cartesian3` 位置对象的数组，用于指定多边形的层次结构。这些位置点确定了多边形的形状和轮廓。
`height`	`number`	`0`	一个数值或 `Property`，用于指定多边形相对于椭球体表面的高度（海拔）。正值使多边形高于表面，负值使其低于表面。
`heightReference`	`HeightReference`	`HeightReference.NONE`	一个 `HeightReference` 枚举值，用于指定 `height` 相对于什么，如相对于地面、绝对高度等。可取值包括 `HeightReference.NONE`、`HeightReference.CLAMP_TO_GROUND`、`HeightReference.RELATIVE_TO_GROUND` 等。
`extrudedHeight`	`number`	无	一个数值或 `Property`，用于指定多边形拉伸面相对于椭球体表面的高度（海拔）。如果设置了该值，多边形将被拉伸成立体形状。
`extrudedHeightReference`	`HeightReference`	`HeightReference.NONE`	一个 `HeightReference` 枚举值，用于指定 `extrudedHeight` 相对于什么，和 `heightReference` 类似，确定拉伸高度的参考方式。
`stRotation`	`number`	`0.0`	一个数值或 `Property`，用于指定多边形纹理相对于北方逆时针方向的旋转角度。仅当未定义 `textureCoordinates` 时，该参数才会生效。
`granularity`	`number`	`Cesium.Math.RADIANS_PER_DEGREE`	一个数值或 `Property`，用于指定每个纬度和经度点之间的角度距离。它影响着多边形在地球表面上的精度和细节程度。
`fill`	`boolean`	`true`	一个布尔值或 `Property`，用于指定多边形是否用提供的材质填充。当值为 `true` 时，多边形将被填充；为 `false` 时，多边形仅显示轮廓（如果有轮廓设置）。
`material`	`MaterialProperty` 或 `Color`	`Color.WHITE`	一个 `MaterialProperty` 或 `Color` 对象，用于指定填充多边形时使用的材质或颜色。可以是预定义的颜色，也可以是自定义的材质。
`outline`	`boolean`	`false`	一个布尔值或 `Property`，用于指定多边形是否绘制轮廓。当值为 `true` 时，多边形将显示轮廓；为 `false` 时，不显示轮廓。
`outlineColor`	`Color`	`Color.BLACK`	一个 `Color` 对象，用于指定多边形轮廓的颜色。当 `outline` 为 `true` 时，该颜色才会应用到轮廓上。
`outlineWidth`	`number`	`1.0`	一个数值或 `Property`，用于指定多边形轮廓的宽度。该值决定了轮廓在屏幕上显示的粗细程度。
`perPositionHeight`	`boolean`	`false`	一个布尔值或 `Property`，用于指定是否使用每个位置的高度。当值为 `true` 时，多边形的每个顶点可以有不同的高度；为 `false` 时，使用统一的 `height` 或 `extrudedHeight` 设置。
`closeTop`	`boolean`	`true`	一个布尔值，用于指定拉伸多边形的顶部是否封闭。当值为 `false` 时，拉伸多边形的顶部是开放的；为 `true` 时，顶部封闭。
`closeBottom`	`boolean`	`true`	一个布尔值，用于指定拉伸多边形的底部是否封闭。当值为 `false` 时，拉伸多边形的底部是开放的；为 `true` 时，底部封闭。
`arcType`	`ArcType`	`ArcType.GEODESIC`	一个 `ArcType` 枚举值，用于指定多边形边缘必须遵循的线的类型。例如，`ArcType.GEODESIC` 表示遵循大地线，`ArcType.NONE` 表示不使用弧线类型。
`shadows`	`ShadowMode`	`ShadowMode.DISABLED`	一个 `ShadowMode` 枚举值，用于指定多边形是否从光源投射或接收阴影。可取值包括 `ShadowMode.DISABLED`（禁用阴影）、`ShadowMode.CAST_ONLY`（仅投射阴影）、`ShadowMode.RECEIVE_ONLY`（仅接收阴影）、`ShadowMode.CAST_AND_RECEIVE`（投射并接收阴影）。
`distanceDisplayCondition`	`DistanceDisplayCondition`	无	一个 `DistanceDisplayCondition` 对象，用于指定从相机到该多边形的距离在什么范围内时，该多边形将被显示。通过此参数可以控制多边形在不同距离下的可见性。
`classificationType`	`ClassificationType`	`ClassificationType.BOTH`	一个 `ClassificationType` 枚举值，用于指定当多边形在地面上时，它是否会对地形、3D 瓦片或两者进行分类。可取值包括 `ClassificationType.BOTH`（对地形和 3D 瓦片都分类）、`ClassificationType.TERRAIN`（仅对地形分类）、`ClassificationType.ENTITIES`（仅对 3D 实体分类）。
`zIndex`	`ConstantProperty` 或 `number`	`0`	一个数值或 `ConstantProperty`，用于指定用于对地面几何图形进行排序的 `zIndex`。仅当多边形是常量（constant）并且既未指定 `height` 也未指定 `extrudedHeight` 时，该参数才会生效，`zIndex` 值越大，多边形在显示上越靠前。
`textureCoordinates`	`PolygonHierarchy`	无	一个 `PolygonHierarchy` 对象，用于指定纹理坐标，以包含 `Cartesian2` 点的 `PolygonHierarchy` 形式表示。对于地面图元（ground primitives），该参数没有效果。

4. BillboardStyle

案例

const featureCollection = new THEngine.layer.FeatureCollection(viewer);
const entity = featureCollection.add({
  type: "Billboard",
  position: [116.0234422, 39.73442235, 50],
  //属性信息
  properties: {
    name: "摄像枪",
    phone: "15512453625",
  },
  style: {
    image: "./images/camera.png",
    width: 36,
    height: 36,
  },
});
viewer.flyTo(entity);

参数

参数名称	数据类型	默认值	描述
`show`	`boolean`	`true`	一个布尔类型的属性，用于指定广告牌（billboard）是否可见。若为 `true` 则可见，`false` 则不可见。
`image`	`string` 或 `HTMLCanvasElement`	无	一个属性，用于指定广告牌要使用的图像、图像 URI 或者画布。
`scale`	`number`	`1.0`	一个数值类型的属性，用于指定对图像大小应用的缩放比例。
`pixelOffset`	`Cartesian2`	`Cartesian2.ZERO`	一个 `Cartesian2` 类型的属性，指定广告牌相对于其位置的像素偏移量。
`eyeOffset`	`Cartesian3`	`Cartesian3.ZERO`	一个 `Cartesian3` 类型的属性，指定广告牌相对于相机位置的偏移量。
`horizontalOrigin`	`HorizontalOrigin`	`HorizontalOrigin.CENTER`	一个属性，指定广告牌的水平原点位置。
`verticalOrigin`	`VerticalOrigin`	`VerticalOrigin.CENTER`	一个属性，指定广告牌的垂直原点位置。
`heightReference`	`HeightReference`	`HeightReference.NONE`	一个属性，指定广告牌高度的参考基准。
`color`	`Color`	`Color.WHITE`	一个属性，指定图像的着色颜色。
`rotation`	`number`	`0`	一个数值类型的属性，指定广告牌绕对齐轴的旋转角度。
`alignedAxis`	`Cartesian3`	`Cartesian3.ZERO`	一个 `Cartesian3` 类型的属性，指定旋转的单位向量轴。
`sizeInMeters`	`boolean`	无	一个布尔类型的属性，指定广告牌的大小是否以米为单位进行测量。
`width`	`number`	无	一个数值类型的属性，指定广告牌的宽度（以像素为单位），会覆盖图像的原始宽度。
`height`	`number`	无	一个数值类型的属性，指定广告牌的高度（以像素为单位），会覆盖图像的原始高度。
`scaleByDistance`	`NearFarScalar`	无	一个 `NearFarScalar` 类型的属性，用于根据相机到广告牌的距离来缩放广告牌。
`translucencyByDistance`	`NearFarScalar`	无	一个 `NearFarScalar` 类型的属性，用于根据相机到广告牌的距离来设置广告牌的透明度。
`pixelOffsetScaleByDistance`	`NearFarScalar`	无	一个 `NearFarScalar` 类型的属性，用于根据相机到广告牌的距离来设置像素偏移量。
`imageSubRegion`	`BoundingRectangle`	无	一个属性，指定一个 `BoundingRectangle`，用于定义使用图像的子区域而非整个图像，以像素为单位从左下角开始测量。
`distanceDisplayCondition`	`DistanceDisplayCondition`	无	一个属性，指定从相机到广告牌的距离在什么范围内时，广告牌会被显示。
`disableDepthTestDistance`	`number`	无	一个属性，指定从相机到广告牌的距离达到此值时，禁用深度测试。

二、应用于矢量图层的样式

Cesium 对应渲染geojson的样式设置封装得很粗糙，很多时候想自定义一下geojson的样式外观都不知道怎么弄。THEngine 封装了geojson样式的设置，方便开发者使用。

1. SimpleStyle 所有要素相同样式

案例

const layerCollection = new THEngine.layer.LayerCollection(viewer);
layerCollection.add({
  type: "geojson",
  url: "http://127.0.0.1:4321/resource1/%E7%9F%A2%E9%87%8F%E6%95%B0%E6%8D%AE/%E8%A7%86%E9%A2%91%E7%82%B9%E4%BD%8D.json",
  style: new THEngine.material.SimpleStyle(),
});

案例地址 http://43.139.54.82:8098/sdk/sandbox/editor.html?data=layer/geojson.html.

SimpleStyle 参数

参数名称	数据类型	默认值	描述

`clampToGround`	`Boolean`	`true`	一个布尔值，指定是否将矢量图层（如 GeoJSON、KML 等）贴地显示。当值为 `true` 时，图层将贴合地面；当值为 `false` 时，图层不会贴地。
`symbol`	`Object`	`{ billboard: new BillboardStyle(), polyline: new PolylineStyle(), polygon: new PolygonStyle() }`	一个对象，用于指定矢量图层中不同几何类型（广告牌、线、面）的样式。
`symbol.billboard`	`BillboardStyle`	`new BillboardStyle()`	一个 `BillboardStyle` 类型的对象，用于配置广告牌（如点要素的显示样式）的样式属性。
`symbol.polyline`	`PolylineStyle`	`new PolylineStyle()`	一个 `PolylineStyle` 类型的对象，用于配置线要素的样式属性，如线的颜色、宽度等。
`symbol.polygon`	`PolygonStyle`	`new PolygonStyle()`	一个 `PolygonStyle` 类型的对象，用于配置面要素的样式属性，如面的填充颜色、轮廓颜色等。

样式

一、应用于单个Feature或者Entity的样式

1. PointEntityStyle

案例

参数

2. PolylineStyle

案例

参数

3. PolygonStyle

案例

参数

4. BillboardStyle

案例

参数

二、应用于矢量图层的样式

1. SimpleStyle 所有要素相同样式

案例

SimpleStyle 参数

2.UniqueValueStyle 根据值不同样式

3. ClassBreaksStyle 根据字段范围不同样式

4. HeatmapStyle 热力图

一、应用于单个Feature或者Entity的样式​

1. PointEntityStyle​

案例​

参数​

2. PolylineStyle​

案例​

参数​

3. PolygonStyle​

案例​

参数​

4. BillboardStyle​

案例​

参数​

二、应用于矢量图层的样式​

1. SimpleStyle 所有要素相同样式​

案例​

SimpleStyle 参数​

2.UniqueValueStyle 根据值不同样式​

3. ClassBreaksStyle 根据字段范围不同样式​

4. HeatmapStyle 热力图​

一、应用于单个Feature或者Entity的样式

1. PointEntityStyle

案例

参数

2. PolylineStyle

案例

参数

3. PolygonStyle

案例

参数

4. BillboardStyle

案例

参数

二、应用于矢量图层的样式

1. SimpleStyle 所有要素相同样式

案例

SimpleStyle 参数

2.UniqueValueStyle 根据值不同样式

3. ClassBreaksStyle 根据字段范围不同样式

4. HeatmapStyle 热力图