点击查看：最新Cesium可视化系统实战视频课程
在Cesium中，Pin是指在3D地球或地图上标记特定位置的小图标或图形。Pin常用于表示兴趣点（POI）、位置标记或者其他类型的空间数据。通过Cesium的API，可以通过设置不同的标记形式（如自定义图标、文字、图像等）来创建和管理这些Pin。本文将详细讲解如何在Cesium中添加和使用Pin标记。
一、Cesium中的Pin概述
在Cesium中，Pin通常作为一个实体（Entity）被添加到viewer对象中。每个Pin都有一个位置、一个图标或者其他视觉表现。通过Billboard实体类型，可以将Pin添加到Cesium的场景中，Billboard支持多种类型的标记，比如文本、图像、SVG图标、Maki图标等。
Pin的基本组件
- 位置（Position）：Pin的位置通过
Cesium.Cartesian3.fromDegrees()方法指定，经度、纬度和高度三个参数确定Pin的位置。 - 图标（Billboard）：Pin的图形展示通过
Billboard实体类型的属性来配置。常见的属性有：
-
image：Pin的图标或者图像，支持多种类型（如图片、Canvas、文字等）。verticalOrigin：设置Pin在垂直方向上的对齐方式，常用的选项有Cesium.VerticalOrigin.BOTTOM（底部对齐）、Cesium.VerticalOrigin.CENTER（居中对齐）等。
二、在Cesium中添加Pin标记
1. 使用简单的图片Pin
最常见的Pin类型是使用图片作为标记。通过pinBuilder.fromColor()方法，可以快速生成一个指定颜色和大小的圆形图标，作为Pin的标记。
示例代码
javascript
const pin = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(110.0, 30.0, 0.0),
billboard: {
image: pinBuilder.fromColor(Cesium.Color.RED, 32).toDataURL(),
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
}
})解释
- 位置：使用
Cesium.Cartesian3.fromDegrees(110.0, 30.0, 0.0)方法指定了Pin的经度、纬度和高度。 - 图标：通过
pinBuilder.fromColor(Cesium.Color.RED, 32).toDataURL()创建了一个红色圆形图标，大小为32像素。 - 对齐方式：
verticalOrigin: Cesium.VerticalOrigin.BOTTOM表示该图标的底部与指定的位置对齐。
2. 使用文字作为Pin标记
除了使用图片，Cesium还允许使用文本来作为Pin标记。这通常用于表示简短的标签或者名称。
示例代码
javascript
const pin2 = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(115.0, 30.0, 0.0),
billboard: {
image: pinBuilder.fromText("A", Cesium.Color.RED, 32).toDataURL(),
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
}
})解释
- 位置：设置经度、纬度为
115.0, 30.0，标记会显示在该位置。 - 图标：
pinBuilder.fromText("A", Cesium.Color.RED, 32)生成了一个显示字母”A”的图标，字体颜色为红色，字体大小为32像素。 - 对齐方式：同样使用底部对齐，
verticalOrigin: Cesium.VerticalOrigin.BOTTOM。
3. 使用外部图片作为Pin标记
Cesium还允许使用外部图片作为Pin的图标。通过加载图片资源，并将其转换为Canvas，再转为Base64格式，可以自定义更复杂的Pin标记。
示例代码
const url = Cesium.buildModuleUrl("../public/images/sdg.png")
const pin3 = Promise.resolve(
pinBuilder.fromUrl(url, Cesium.Color.RED, 32)
).then((canvas) => {
return viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(120.0, 30.0, 0.0),
billboard: {
image: canvas.toDataURL(),
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
}
})
})
解释
- 位置：Pin将显示在
120.0, 30.0的位置。 - 图标：通过
pinBuilder.fromUrl(url, Cesium.Color.RED, 32)加载了外部图片，并对其进行了调整，颜色为红色，大小为32像素。 - Canvas处理：
canvas.toDataURL()将Canvas图像转换为Base64编码的图片，以便在Cesium中使用。
4. 使用Maki图标作为Pin标记
Maki图标是一个广泛使用的图标集，Cesium提供了直接支持Maki图标的功能，可以快速为Pin标记设置标准化图标，例如“医院”、“餐厅”等。
示例代码
const hospitalPin = Promise.resolve(
pinBuilder.fromMakiIconId("hospital", Cesium.Color.RED, 32)
).then((canvas) => {
return viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(125.0, 30.0, 0.0),
billboard: {
image: canvas.toDataURL(),
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
}
})
})
解释
- 位置：此Pin标记将显示在
125.0, 30.0的位置。 - 图标：
pinBuilder.fromMakiIconId("hospital", Cesium.Color.RED, 32)生成了一个“医院”图标，并设置了红色和大小为32像素。 - 对齐方式：使用
Cesium.VerticalOrigin.BOTTOM进行底部对齐。
三、Pin的其他配置
1. 自定义Pin的大小和颜色
通过调整pinBuilder中的图标大小、颜色以及文本大小等，可以轻松改变Pin的视觉效果。例如，可以使用不同颜色表示不同类型的位置（如红色表示医院、绿色表示公园等）。
2. 动态更新Pin的位置和属性
Cesium的Pin标记可以根据需求动态更新。例如，可以通过改变Pin的position属性来移动标记位置，也可以通过改变image属性来更改标记的图标。
pin.position = Cesium.Cartesian3.fromDegrees(125.0, 35.0, 0.0); // 移动位置
pin.billboard.image = pinBuilder.fromColor(Cesium.Color.BLUE, 32).toDataURL(); // 更新图标3. 交互功能
Cesium还支持对Pin进行交互，例如，当用户点击Pin时，可以触发事件来显示信息窗口或执行其他操作。通过ScreenSpaceEventHandler等API，可以实现Pin的点击事件响应。
const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function (movement) {
const pickedObject = viewer.scene.pick(movement.endPosition);
if (Cesium.defined(pickedObject)) {
alert("Pin clicked!");
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);四、总结
在Cesium中，Pin标记是非常常用的功能，能够帮助用户在3D地图上标记特定位置。通过Cesium的billboard实体，可以轻松地自定义Pin的外观和位置。常见的Pin类型包括简单的颜色圆形、文本标记、外部图片和Maki图标等。同时，Cesium提供了丰富的API支持，可以根据需要动态更新标记的属性和响应用户交互。
无论是地图上的位置标注、兴趣点展示，还是数据可视化，Pin标记都为开发者提供了强大的灵活性和便利性。
