Class: Marker

Marker

用于三维中添加 marker 标记

// 添加图层
const layer = new EntityLayer().addToViewer(this.$viewer);
// 添加 Marker
const marker = new Marker({
  position: new Position(118.78600228, 31.9135434, 1.66113721),
  billboard: {
    icon: require("../../assets/dataImages/locate.png")
  },
  label: {
    text: "测试点位",
    direction: "right"
  }
}).addToLayer(layer);
// 注册 marker 鼠标移入事件
marker.on(MouseEventType.MOUSE_OVER, evt => {
  console.log(evt);
});

new Marker(options)

overlay/base/Marker.js, line 42
Name Type Description
options *

marker 可选属性

Name Type Description
position Position

坐标位置
billboard Object

图标参数

Name Type Default Description
icon Property | string | HTMLCanvasElement

图标资源，可以为 URI, Canvas等
size Array [32, 32] optional

大小
备注 *

更多 billboard 样式设置，参考 #setBillboardStyle 展示的参数
label Object

文字参数

Name Type Default Description
text String

文字内容
direction String "right" optional

相对于图标的方位,可选值： 'top' 'right' 'bottom' 'left' 'center'
offset Array [0, 0] optional

相对于 direction 的位置偏移
style Number 2 optional

指定 label 绘制风格。FILL: 0, OUTLINE: 1, FILL_AND_OUTLINE: 2
font String "16px 黑体" optional

CSS 字体设置
outlineWidth Number 3 optional

字体轮廓线大小
备注 *

更多 label 样式设置，参考 #setLabelStyle 展示的参数

Classes

Marker

Methods

setBillboardStyle(style)

overlay/base/Marker.js, line 158

设置图标样式

Name Type Description
style Billboard

图标样式

// 样式参数(可选)
{
  "icon": require("../xxx.png"), // 图标资源，可以为 URI, Canvas等
  "size": [32,32], // 图标尺寸
  "scale": 1, //比例
  "pixelOffset": { "x": 0, "y": 0 }, //偏移像素
  "rotation": 0, //旋转角度
  "heightReference": 0, // 指定 billboard 高度模式。 NONE: 0, CLAMP_TO_GROUND: 1, RELATIVE_TO_GROUND: 2
  "color": Color.WHITE, // 指定 billboard 图片的颜色。
  "translucencyByDistance": {
    "near": 0, //最近距离
    "nearValue": 0, //最近距离值
    "far": 1, //最远距离值
    "farValue": 0 //最远距离值
  }, //根据距离设置透明度
  "scaleByDistance": {
    "near": 0, //最近距离
    "nearValue": 0, //最近距离值
    "far": 1, //最远距离值
    "farValue": 0 //最远距离值
  }, //根据距离设置比例
  "distanceDisplayCondition": {
    "near": 0, //最近距离
    "far": Number.MAX_VALUE //最远距离
  }, //根据距离设置可见
  "disableDepthTestDistance": 0 // 深度检测距离，用于防止剪切地形，设置为零时，将始终应用深度测试。设置为Number.POSITIVE_INFINITY时，永远不会应用深度测试。
}

setLabelStyle(style)

overlay/base/Marker.js, line 208

设置文本样式

Name Type Description
style Lable

文本样式

// 样式参数(可选)
{
  "text": "测试文本", // 文本内容
  "style": 2, // 指定 label 绘制风格。`FILL: 0, OUTLINE: 1, FILL_AND_OUTLINE: 2`
  "direction": "right", //相对于图标的方位,可选值： 'top' 'right' 'bottom' 'left' 'center'
  "offset": [0, 0]  // 相对于 `direction` 的位置偏移
  "font": "30px sans-serif", // CSS 字体设置
  "scale": 1, //比例
  "pixelOffset": { "x": 0, "y": 0 }, //偏移像素
  "heightReference": 0, //高度参照，0：位置无参照，位置是绝对的，1：位置固定在地形上 2：位置高度是指地形上方的高度。
  "showBackground": false, //是否显示背景
  "backgroundColor":Color.BLACK, //背景颜色
  "backgroundPadding": { "x": 0, "y": 0 }, //背景间隙
  "fillColor": Color.BLACK, //文字颜色
  "outlineColor": Color.WHITE, //边框颜色
  "outlineWidth": 0, //边框大小，
  "scaleByDistance": {
    "near": 0, //最近距离
    "nearValue": 0, //最近距离值
    "far": 1, //最远距离值
    "farValue": 0 //最远距离值
  }, //根据距离设置比例
  "translucencyByDistance": {
    "near": 0, //最近距离
    "nearValue": 0, //最近距离值
    "far": 1, //最远距离值
    "farValue": 0 //最远距离值
  }, //根据距离设置透明度
  "distanceDisplayCondition": {
    "near": 0, //最近距离
    "far": Number.MAX_VALUE //最远距离
  }, //根据距离设置可见
  "disableDepthTestDistance": 0 // 深度检测距离，用于防止剪切地形，设置为零时，将始终应用深度测试。设置为Number.POSITIVE_INFINITY时，永远不会应用深度测试。
}