3D · CesiumPolygon 多边形

3D 文档 · CesiumPolygon 组件

CesiumPolygon 用于展示地块、园区和业务范围。相同边界可以在不同地图中重复使用，只需要传入对应颜色。

vue

<CesiumPolygon
  v-for="plot in plots"
  :key="plot.plotId"
  :positions="plot.positions"
  :holes="plot.holes"
  :color="layerColor"
  outline-color="#7dd3fc"
  :label="{ text: plot.plotName }"
  :properties="plot"
/>

业务页面只需要提供地块边界和文字。label 不填写 position 时，组件会根据 positions 自动计算多边形中心，并把这个中心放回地球表面。地图第一次加载、缩放或旋转时，文字都会固定在对应地块上，不需要业务页面再次计算坐标。

API

属性

名称	类型	默认值	说明
`positions`	`CesiumPositionInput[]`	必填	多边形外环，至少三个坐标
`holes`	`CesiumPositionInput[][]`	—	多边形内部不填充的洞
`color`	`CesiumColorInput`	半透明蓝色	填充颜色
`opacity`	`number`	`1`	在颜色原透明度基础上调整透明度
`outline`	`boolean`	`true`	是否显示边框
`outlineColor`	`CesiumColorInput`	`#00bfff`	边框颜色
`height`	`number`	—	多边形离地高度，单位米
`extrudedHeight`	`number`	—	拉伸后的顶部高度，单位米
`perPositionHeight`	`boolean`	—	是否使用每个顶点自己的高度
`label`	`CesiumEntityLabelOptions`	—	多边形文字；未传 `position` 时自动定位到地块表面中心
`properties`	`Record<string, unknown>`	—	与多边形一起保存的业务数据
`show`	`boolean`	`true`	是否显示
`flyToOnLoad`	`boolean`	`false`	首次创建后是否自动定位
`polygon`	`CesiumPolygonGraphicsOptions`	—	透传不常用的 Cesium 原生面参数

地块复用建议

接口数据只负责提供 plotId、plotName、边界和业务信息。先在公共数据层把边界解析成 positions 与 holes，然后所有地图复用这份结果：

vue

<CesiumPolygon
  v-for="plot in plots"
  :key="plot.plotId"
  :positions="plot.positions"
  :color="activeLayerColor"
  :label="{ text: plot.plotName }"
/>

这样不需要为智慧果园、灌溉、施肥等图层分别编写一套地块实体，只需切换 color 或 polygon 样式。

一般不要在业务页面计算 label.position。只有产品明确要求文字显示在某个指定经纬度时，才需要手动传入：

vue

<CesiumPolygon
  :positions="plot.positions"
  :label="{
    text: plot.plotName,
    position: plot.labelPosition,
  }"
/>

事件

事件	返回内容	说明
`load`	`Entity`	多边形 Entity 创建并加入 Viewer 后触发

暴露方法

当前组件没有对外暴露方法。

类型声明

复杂类型统一放在 3D 类型声明中，按需查看，不影响基础用法阅读。

坐标、颜色、显隐和高度发生变化时会自动更新；组件卸载后会删除自己创建的 Entity。

3D · CesiumPolygon 多边形 ​

API ​

属性 ​

地块复用建议 ​

事件 ​

暴露方法 ​

类型声明 ​

3D · CesiumPolygon 多边形

API

属性

地块复用建议

事件

暴露方法

类型声明