Marker 标记点

---

演练场

引入

import { Marker } from "@m-tech/gis-core";

new Marker(position, options);

入参

属性名称	类型	必填	默认值	描述
position	Position	是	-	位置
options	Object	是	-	配置
options.id	string | number	是	-	唯一标识
options.tweening	boolean	否	false	是否开启缓动(位置变化时)
options.tweenDuration	number	否	1000	缓动时间(ms)
options.billboard	Cesium.BillboardGraphics	否	-	图标配置
options.label	Cesium.LabelGraphics	否	-	文字配置
options.model	Cesium.ModelGraphics	否	-	模型配置

图标配置 options.billboard

属性名称	类型	必填	默认值	描述
icon	string	是	-	图标路径
size	[number, number]	否	[32, 32]	图标尺寸

更多属性参照Cesium.BillboardGraphics

文字配置 options.label

属性名称	类型	必填	默认值	描述
text	string	是	-	文字内容
direction	'top' 'right' 'bottom' 'left' 'center' 'top-center'	否	'right'	文字方位

更多属性参照Cesium.LabelGraphics

模型配置 options.model

属性名称	类型	必填	默认值	描述
uri	string	是	-	模型路径

更多属性参照Cesium.ModelGraphics

属性

属性	类型	读/写	描述
position	Position	读写	设置位置
text	string	读写	设置文字内容
icon	string	读写	设置图标路径
uri	string	读写	设置模型路径
tweening	boolean	读写	设置是否开启缓动(位置变化时)
wink	boolean	读写	设置是否闪烁
winkSpeed	number	读写	设置闪烁速度

方法

• setBillboardStyle(style)

设置图标样式。

• setLabelStyle(style)

设置文字样式。

• on(OverlayEventType, Function)

监听事件。

OverlayEventType 事件枚举、 Function 事件回调

示例

import { Marker, Position, OverlayEventType, Cesium } from "@m-tech/gis-core";

const marker = new Marker(new Position(114.315782, 30.47449, 0), {
  id: "17788889999", // 唯一标识
  tweening: true, // 是否开启缓动(位置变化时)
  tweenDuration: 1000, // 缓动时间(ms)
  billboard: {
    icon: new URL("../../assets/images/enterprise.png", import.meta.url).href,
    size: [32, 32],
    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 8000),
  },
  label: {
    text: "测试点位", // 文字内容
    direction: "top-center", // 文字方位
    offset: [0, -2], // 文字偏移
    showBackground: true, // 是否显示背景
    backgroundColor: Cesium.Color.BLACK, // 背景颜色
    style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 文字样式
    translucencyByDistance: new Cesium.NearFarScalar(450, 1, 500, 0), // 透明度随距离变化
  },
  model: {
    uri: new URL("../../assets/models/Cesium_Man.glb", import.meta.url).href, // 模型路径
    scale: 10.0, // 模型缩放
    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 500), // 距离显示条件
  },
});

marker.position = new Position(114.315782, 30.47449, 0);

// 更新图标样式
marker.setBillboardStyle({
  icon: new URL("../../assets/images/enterprise.png", import.meta.url).href,
});

// 监听点击事件
marker.on(OverlayEventType.CLICK, (e) => {
  console.log(e);
});