❝
飞渡科技DTS数字孪生引擎下载地址：www.freedo3d.com/download
新用户可以领取一个月的免费试用~~
在数字孪生三维场景开发中，为模型添加标签是一项常见且重要的开发需求。能够帮助我们展示和突出模型或场景的相关信息。那么，在我们所使用的DTS中，是可以实现怎么样的效果以及如何实现这一效果？
关于标签
在飞渡DTS SDK中使用根据二三维标签进行区分标签的创建。
二维标签：Marker、MarkerLayer
三维标签：Marker3d
本章节针对二维标签进行详细讲解~三维标签在后续的推文中详细介绍使用方法和技巧
效果呈现
1. 文字点位
适用于标记道路、地块、行政区划范围及各类标识的创建与展示。
2. 图标点位
适用于纯图标展示设备以及楼栋等各类场景的标记点位。
3. 文字+图标点位
适用于同时需要图标和文字展示，用于标识楼栋、设备及其他相关设施的点位。
4. 自定义样式弹窗
自定义样式点位采用嵌入html页面的方式展示点位，可以直观地展示数据，还能嵌入监控视频，可以提供更加全面、详细的点位信息展示体验。
5. marker交互操作
适用于通过标签进行交互操作，点击标签可执行多种回调操作；弹窗与三维场景双向通信。
6. 创建大量点
主要用于批量加载点位信息，并支持聚合效果的显示与应用。
7. 分层点位
主要用于根据不同观看距离设置不同层级的内容展示，近距离可展现详细图标与文字信息，中距离仅展示图标，远距离则以点要素进行简化展示。
领略完二维标签的效果呈现后，咱们一同探索这些效果的实现。
二维标签详解
Marker
Marker标签的创建，需要通过fdapi.marker.add()方法进行添加。创建的效果由下面这些属性字段进行决定，我们来逐一进行了解。
属性
不同的效果由不同属性决定。
- 基础属性设置
id和coordinate是必须传入的参数。当需要对多种类型的图标进行操作，尤其是涉及多个图标时，可以使用groupId。此外，coordinate功能支持工程坐标系点位以及地理坐标系点位，用户需根据实际点位数据信息选择相应的coordinateType类型。
注意事项：
- 如果点位是地理坐标系点位，它会将对应的地理坐标系点位数据转换为工程坐标系点位，因此当前工程需要有对应的工程坐标系！！！
- 设置anchors：情况下[0,0]是以图标左上角作为锚点，为了让图标以中心作为锚点，因此需要对此偏移，不同的图片偏移不同，可参考下面的功能实现例子进行了解。
- 自动判断下方是否有物体autoHeight：如果数据没有z值，将其设置true，则会自动判断位置下方是否有物体并进行贴合。
用于设置与文字相关的样式参数，包括文字内容、文字偏移、文字大小及文字颜色等参数。
用于设置图标尺寸、图标路径，同时允许设置当鼠标悬停时图标的路径以及悬停时图标的大小。
其中，图片路径支持本地路径、网络路径，本地路径需是绝对路径，本地路径更推荐使用Cloud文件资源进行添加图片进行引用，将资源放在文件资源中，相当于使用本地路径直接加载，减少了网络传输过程，显著提高了加载速度。
绝对路径格式参考：
imagePath: `${window.origin}/img/摄像头.png`, //图片路径
将资源放入Cloud文件资源的路径获取方式：
- 可视范围属性设置
用于设置相机距离范围内标签、文字的可视距离的可见性。
主要用于展示各类数据信息，支持HTML格式以及实流媒体视频地址(实时监控视频)【支持rtsp、rtmp协议】，用户可自由设置弹窗的路径、大小以及偏移量。
- 牵引线属性设置
用于设置牵引线显隐、牵引线粗细、牵引线颜色、牵引线偏移。
- 聚合效果属性设置
用于设置多点位信息时的聚合效果。
0：移动的过程中是不会显示的，移动结束之后，就会参与聚合的显示方式；
1：移动时会显示，会有一个算法进行调度，停下来会聚合；
2：常显，不会聚合；
3：移动时不显示。停下来的时候，不会聚合；
4：会根据当前的可视范围区判断，高层级的时候聚合，低层级就不聚合；阈值范围，通过autoDisplayModeSwitchFirstRatio、autoDisplayModeSwitchSecondRatio参数进行设置。
- 其他属性设置
设置其避让优先级以及是否参与遮挡剔除。
方法
除了使用 fdapi.marker.add() 来添加标记外，Marker 还提供了多种实用功能，比如删除、显示、隐藏以及定位等。只需提供相应的 ID，就能精准地管理和操作每一个 Marker 了。此外，通过fdapi.marker.showPopupWindow()可以直接控制弹窗的显示。特别值得一提的是，通过指定分组 ID (groupId)，可以轻松实现对特定分组内所有 Marker 的显示或隐藏。
功能实现
a. 文字点位
实现效果：以文字进行展示对应点位。
功能实现：需要传入与文字相关的属性信息。将这些属性信息封装在一个对象中，然后通过调用fdapi.marker.add()的方法将文字点位添加到三维场景中。通过fdapi.marker.focus()传入对应id进行定位到对应的文字点位
代码如下：
const add_text = () => {
// 定义点位坐标
const coordinate = [8063.56, 4678.0803125, 3.0140869140625]
let o1 = {
// 基础属性
id: 'marker_text',
coordinate: coordinate, //坐标位置
coordinateType: 0, //默认0是投影坐标系，也可以设置为经纬度空间坐标系值为1
anchors: [0, 0], //锚点，设置Marker的整体偏移，取值规则和imageSize设置的宽高有关，图片的左上角会对准标注点的坐标位置。示例设置规则：x=-imageSize.width/2，y=imageSize.height
range: [0, 5000], //可视范围
// 文字属性
text: '孪创大道', //显示的文字
useTextAnimation: true, //关闭文字展开动画效果 打开会影响效率
textRange: [1, 1000], //文本可视范围[近裁距离, 远裁距离]
textOffset: [0, 0], // 文本偏移
textBackgroundColor: [1, 1, 1, 0], //文本背景颜色
fontSize: 22, //字体大小
fontOutlineSize: 2, //字体轮廓线大小
fontColor: Color.White, //字体颜色
fontOutlineColor: Color.Black //字体轮廓线颜色
}
// 添加dts marker
fdapi.marker.add(o1)
// 定位到 marker
fdapi.marker.focus('marker_text')
}
b. 图标点位
实现效果：默认情况下，点位会以图标的形式进行显示。当用户的鼠标移入到图标上时，会显示与该图标对应的文字内容。当用户点击该图标时，会触发展示对应弹窗的操作。
功能实现：需要传入图标、文字和弹窗设置相关的属性。这些属性包括图片路径（用于设置图标的图片）、文字内容（用于在鼠标移入时展示）以及弹窗路径（用于设置点击图标后展示的弹窗）。将这些属性放入一个对象中，并通过fdapi.marker.add()的方法将图标点位添加到三维场景中。同时，为点位分配一个唯一的id，通过fdapi.marker.focus()的方法可以传入对应的id，从而定位到特定的图标点位并展示相关的文字内容和弹窗。
注意事项：
- 实现鼠标移入图标上聚焦时，才显示对应的文字内容： 需要设置文本可视范围textRange: [0, 0]！！
- 在三维场景中图标偏移，是因为锚点没设置正确。
以这个监控摄像头为例，需要将图标打在摄影头正上方。
锚点偏移
锚点在正确位置
初始状态下，[0,0]锚点是在图标的左上角。但在三维中看图标是会有所偏移。
实际场景中，每个锚点的位置都不同。例如，这张图片的锚点在图片底部的中心。
因此需要对锚点位置进行偏移，将锚点设置为图片底部的中心，图标需要向左、向上进行偏移。
锚点偏移值：[-图标宽度/2，图标高度]
const add_icon = () => {
// 定义点位坐标
const coordinate = [8054.56, 4687.913125, 6.715758666992188]
const imageScale = 0.5
let o2 = {
// 基本属性
id: 'marker2_icon',
coordinate: coordinate, //坐标位置
coordinateType: 0, //默认0是投影坐标系，也可以设置为经纬度空间坐标系值为1
anchors: [(-108 * imageScale) / 2, 142 * imageScale], //锚点
range: [0, 100000], //可视范围
// 图片属性
imagePath: '@path:二三维标签添加/img/marker.png', //显示图片路径
// 文字属性
text: '孪创大道监控', //显示的文字
useTextAnimation: true, //关闭文字展开动画效果 打开会影响效率
textRange: [0, 0], //文本可视范围[近裁距离, 远裁距离]
textOffset: [0, 0], // 文本偏移
textBackgroundColor: [118 / 255, 73 / 255, 44 / 255], //文本背景颜色
fontSize: 18, //字体大小
fontOutlineSize: 1, //字体轮廓线大小
fontColor: Color.White, //字体颜色
fontOutlineColor: Color.Black, //字体轮廓线颜色
// 弹窗属性
popupURL: '@path:二三维标签添加/html/popup.html', //弹窗HTML链接
popupSize: [250, 380], //弹窗大小
popupOffset: [0, 0], //弹窗偏移
autoHidePopupWindow: true // 是否自动关闭弹出窗口，默认值：true
}
// 添加dts marker
fdapi.marker.add(o2)
// 定位到 marker
fdapi.marker.focus('marker2_icon')
}
c. 文字+图标点位
实现效果：以图片文字进行展示对应点位。
功能实现：需要传入图片和文字的相关属性。将相关的属性放入到对象中，通过fdapi.marker.add()传入对应的对象进行添加。
注意事项：
- 文字部分： 使用
textOffset来实现文字相对于图片的偏移，从而确保文字能够准确地展示在预期的位置上。 - 锚点设置： 像这种不是正方形的图片，它的锚点设置由最终想要的结果进行决定它的锚点偏移值。如果是以小房子图标底部中心为锚点，偏移值效果如下。
anchors偏移值修改为：[-小图标宽/2，图片高]
代码如下：
const add_marker = () => {
// 定义点位坐标
const coordinate = [8018.24, 4701.2096875, 45.794990234375]
let o2 = {
// 基础属性
id: 'marker_marker',
coordinate: coordinate, //坐标位置
coordinateType: 0, //默认0是投影坐标系，也可以设置为经纬度空间坐标系值为1
anchors: [-35, 82], //锚点
range: [0, 10000000], //可视范围
// 图片属性
imagePath: '@path:二三维标签添加/img/build_bg.png', //显示图片路径
// imagePath: 'http://114.132.48.157/dts/images/build_bg.png', //显示图片路径
imageSize: [320, 82],
// 文字属性
text: '孪创大楼', //显示的文字
useTextAnimation: true, //打开文字展开动画效果
textRange: [0, 100000], //文本可视范围[近裁距离, 远裁距离]
textBackgroundColor: [0, 0, 0, 0], //文本背景颜色
fontSize: 15, //字体大小
textOffset: [-240, 0, 0],
fontOutlineSize: 1, //字体轮廓线大小
fontColor: Color.White, //字体颜色
fontOutlineColor: Color.Black //字体轮廓线颜色
}
// 添加dts marker
fdapi.marker.add(o2)
// 定位到 marker
fdapi.marker.focus('marker_marker')
}
d. 自定义样式弹窗
实现效果：以弹窗进行展示对应点位。
功能实现：需要传入弹窗的相关属性，其中弹窗支持传值。将相关的属性放入到对象中，通过fdapi.marker.add()传入对应的对象进行添加；通过fdapi.marker.showPopupWindow()传入对应的id直接展示对应的弹窗
注意事项：
- 弹窗传参： 弹窗传参用查询字符串方法，以问号(?)开始，参数之间用与号(&)分隔，每个参数由键和值组成键和值之间用等号(=)分隔，传参格式：num1=${num}; 【num1为键，num为值】；
- 传参的弹窗需要以 &.html结尾。
例子：
popupURL: `@path:二三维标签添加/html/population.html?num1=${num}&time1${time}&.html`
代码如下：
const add_html = () => {
// 定义点位坐标
const coordinate = [7978.52, 4744.829375, 21.675634765625002]
const imageScale = 0.5
const num = 1400
let o2 = {
id: 'marker5',
coordinate: coordinate, //坐标位置
coordinateType: 0, //默认0是投影坐标系，也可以设置为经纬度空间坐标系值为1
range: [0, 100000], //可视范围
anchors: [0, 0], //锚点
popupURL: `@path:二维标签资源/html/population.html?num1=${num}&.html`, //弹窗HTML链接
popupSize: [300, 130], //弹窗大小
popupOffset: [-150, -70], //弹窗偏移
autoHidePopupWindow: false
}
// 添加dts marker
fdapi.marker.add(o2)
fdapi.marker.showPopupWindow('marker5')
// 定位到 marker
fdapi.marker.focus('marker5')
}
e. marker点击交互
功能实现：创建对应的点，在DigitalTwinPlayer类的onEvent方法中设置鼠标左键点击的监听器LeftMouseButtonClick，根据点击的类型和id，执行相应的预定义事件处理函数或回调操作。
代码如下：
const add_event = () => {
// 定义点位坐标
const coordinate = [8039.56, 4771.005, 35.71572265625]
const imageScale = 0.5
let o2 = {
id: 'marker_交互',
coordinate: coordinate, //坐标位置
coordinateType: 0, //默认0是投影坐标系，也可以设置为经纬度空间坐标系值为1
anchors: [(-108 * imageScale) / 2, 142 * imageScale], //锚点
range: [0, 100000], //可视范围
imagePath: '@path:二三维标签添加/img/marker.png', //显示图片路径
// imagePath: 'http://114.132.48.157/dts/images/marker.png', //显示图片路径
imageSize: [108 * imageScale, 142 * imageScale],
text: '楼顶监控', //显示的文字
useTextAnimation: true, //关闭文字展开动画效果 打开会影响效率
textRange: [0, 0], //文本可视范围[近裁距离, 远裁距离]
textOffset: [0, 0], // 文本偏移
textBackgroundColor: [118 / 255, 73 / 255, 44 / 255], //文本背景颜色
fontSize: 18, //字体大小
fontOutlineSize: 1, //字体轮廓线大小
fontColor: Color.White, //字体颜色
fontOutlineColor: Color.Black, //字体轮廓线颜色
popupURL: '@path:二三维标签添加/html/交互弹窗.html', //弹窗HTML链接
popupSize: [400, 520], //弹窗大小
popupOffset: [0, 0], //弹窗偏移
autoHidePopupWindow: true // 是否自动关闭弹出窗口，默认值：true
}
// 添加dts marker
fdapi.marker.add(o2)
// 定位到 marker
fdapi.marker.focus('marker6')
}
const OnLoad = () => {
const __DigitalTwinPlayer = new DigitalTwinPlayer(HostConfig.Player, {
domId: 'player',
apiOptions: {
onReady: function () {
fdapi.reset(2 | 4)
},
onEvent: function (event) {
const eventType = event.eventtype
console.log('onEvent', event)
switch (eventType) {
case 'LeftMouseButtonClick':
console.log(
'触发事件类型：鼠标左键单击，eventType：' + eventType
)
if (event.Type === 'marker') {
if (event.Id === 'marker_交互') {
alert('点击了marker点')
}
}
break
case 'MarkerCallBack':
alert(event.Data)
break
default:
break
}
}
}
})
}
ps：其中，嵌入的弹窗也支持与三维场景双向通信。
实现效果：实现弹窗向主页面发送事件通知，三维场景能够接收到弹窗发送的通知；点击关闭按钮将弹窗在三维场景中关闭等。功能实现：需要使用FdExternal类实现与三维场景双向通信。使用FdExternal.postEvent()向主页面发送事件通知；使用FdExternal.close()关闭当前的窗口。三维页面在DigitalTwinPlayer类的onEvent方法监听器MarkerCallBack中获取弹窗的回调信息。
注意事项：
- 因为该弹窗需要实现与三维场景的交互，所以在该弹窗代码中需要引入ac.min.js
<script type="text/javascript" src="./lib/ac.min.js"></script>
- 要保证引入的ac.min.js为本地Cloud本地SDK的ac.min.js
Cloud本地SDK的ac.min.js获取方式：将其进行复制
该资源中的ac.min.js需要替换成Cloud本地SDK的ac.min.js；
- 对应的弹窗按钮实现与三维场景的双向通信，弹窗嵌入三维场景并且ac.min.js引入，则可以获取到
window.FdExternal
核心代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript" src="./lib/ac.min.js"></script>
<title>Title</title>
</head>
<body>
<div class="tag-container">
<div class="close" onclick="popupClose()"></div>
<div class="title-box">
<div class="title" id="title">项目概况</div>
</div>
<div class="img">
<img src="./images/图片.png" alt="" />
<div class="label">
<img src="./images/三角形@2x.png" alt="" />
<span>孪创园区</span>
</div>
</div>
<div class="index-list">
<div class="item">
<div class="label">用地面积</div>
<div class="count" id="index1">约200亩</div>
</div>
<div class="item">
<div class="label">建筑面积</div>
<div class="count" id="index2">约120万m²</div>
</div>
<div class="item">
<div class="label">绿地率</div>
<div class="count" id="index3">13.21%</div>
</div>
</div>
<div class="text" id="text">
随着经济的发展及园区投资的不断深化，大型园区建设运营企业寻求园区发展新途径的意愿日趋强烈，国内优秀的园区建设运营企业愈来愈重视对行业市场的研究，特别是对发展环境和园区企业需求趋势变化的深入研究。正因为如此，一大批国内优秀的园区品牌迅速崛起，逐渐成为园区建设运营企业中的翘楚!
</div>
<div class="btn" onclick="clickBtn()">进入项目</div>
</div>
<script>
window.onload = async function () {
new DigitalTwinAPI()
}
let urlParam = window.location.search.slice(1)
let urlParamArr = urlParam.split('&')
let titleArr = urlParamArr.find(item => item.includes('title'))
if (titleArr) {
document.getElementById('title').innerHTML = decodeURI(
titleArr.split('=')[1]
)
}
let parmasArr = urlParamArr.find(item => item.includes('parmas'))
if (parmasArr) {
const parmas = JSON.parse(decodeURI(parmasArr.split('=')[1]))
for (let key in parmas) {
if (document.getElementById(key))
document.getElementById(key).innerHTML = parmas[key]
}
}
function popupClose() {
if (window.FdExternal) FdExternal.close()
}
function clickBtn() {
if (window.FdExternal) {
FdExternal.postEvent('进入项目')
}
}
</script>
</body>
</html>
- 三维场景获取弹窗传递的信息：在
DigitalTwinPlayer类的onEvent方法监听器MarkerCallBack中获取弹窗的回调信息。
const OnLoad = () => {
const __DigitalTwinPlayer = new DigitalTwinPlayer(HostConfig.Player, {
domId: 'player',
apiOptions: {
onReady: function () {
fdapi.reset(2 | 4)
},
onEvent: function (event) {
const eventType = event.eventtype
console.log('onEvent', event)
switch (eventType) {
case 'MarkerCallBack':
alert(event.Data)
break
default:
break
}
}
}
})
}
f. 创建大量点
实现效果：当有大量点时，点位有聚合效果。
功能实现：需要添加图片、聚合相关属性。
const add_more = () => {
const bbox = [
7717.92, 4540.8575, 2.9991015625, 8233.4, 5078.333125, 3.12015625
]
const getRandNumBetween = (min, max) => {
return Math.round((Math.random() * (max - min) + min) * 10) / 10
}
// 定义marker数组
const markerList = []
for (let i = 0; i <= 200; i++) {
let x = getRandNumBetween(bbox[0], bbox[3]) //minX ~ maxX
let y = getRandNumBetween(bbox[1], bbox[4]) //minY ~ maxY
// 定义点位坐标
const coordinate = [x, y]
const o = {
// 基础属性
id: 'marker_' + i,
coordinate: coordinate, //坐标位置
coordinateType: 0, //默认0是投影坐标系，也可以设置为经纬度空间坐标系值为1
anchors: [-108 / 4, 142 / 2], //锚点
range: [0, 50000], //可视范围
// 图片属性
imagePath: '@path:二三维标签添加/img/marker.png', //显示图片路径
imageSize: [108 / 2, 142 / 2],
// 聚合模式属性设置
autoHeight: true, // 自动判断下方是否有物体
displayMode: 4, // 智能显示模式 开发过程中请根据业务需求判断使用四种显示模式
clusterByImage: true, // 聚合时是否根据图片路径分类，即当多个marker的imagePath路径参数相同时按路径对marker分类聚合
occlusionCull: false // 是否参与遮挡剔除
}
// 往数组中添加 marker 对象
markerList.push(o)
}
// 添加dts marker
fdapi.marker.add(markerList)
fdapi.camera.set(
8353.092805,
4459.31082,
495.031523,
-45.886406,
-140.454117,
2
)
}
MarkerLayer
除了利用Marker聚合来添加大量的点之外，我们还可以选择使用MarkerLayer类实现。使用MarkerLayer可以根据可视距离的不同，将这些点巧妙地分为三层进行展示。
咱一起看看是如何实现fdapi.markerLayer.add()进行添加这样的效果吧~
属性
- 基础属性设置
id是必须传入的参数。range属性则用于分层展示范围的设置，分为三个层级：近距离可展现详细图标与文字信息，中距离仅展示图标，远距离则以点要素进行简化展示 。
注意事项：
-
如果点位是地理坐标系点位，它会将对应的地理坐标系点位数据转换为工程坐标系点位，因此当前工程需要有对应的工程坐标系！！！
-
锚点设置anchors： 【可以参考上面Marker的锚点设置】。
-
自动判断下方是否有物体autoHeight：如果数据没有z值，将其设置true，则会自动判断位置下方是否有物体并进行贴合。
-
图层对象三段可视范围range：[minDis,lod1Dis,lod2Dis,maxDis]。当点位处于第一段近距离[minDis,lod1Dis]时，将显示图标和文字；当处于第二段中距离[lod1Dis,lod2Dis]时，仅显示图标；当处于第三段远距离[lod2Dis,maxDis]时，则以圆形点要素的形式表示。
近距离：显示图标和文字
中距离：仅显示图标
远距离：显示圆形点要素
用于设置文字可视范围、文字偏移、文字大小等属性。
用于设置弹窗的大小以及偏移等属性。
用于存储点位相关的详细信息，包括id唯一标识、coordinate点位的坐标信息、图片路径以及弹窗路径等必要数据。
- 聚合效果设置
用于设置多点位信息时的聚合效果。与前面Marker聚合相同，可参考Marker聚合属性。
设置其避让优先级以及是否参与遮挡剔除。
方法
MarkerLayer同样支持对标记点的添加、删除、定位等操作。调用方式：fdapi.MarkerLayer.方法()
a. 分层点位
实现效果：根据设定的距离范围（range属性）将点位划分为三种不同的状态，并对应地展示不同的视觉元素。
功能实现：设置range属性范围：根据需求设定三个距离阈值，这些阈值将用于划分近距离、中距离和远距离的范围；存储点位信息：markers属性来存储对应的点位信息，这些信息应包括点位的坐标、图标信息、文字描述等。
const add = () => {
const bbox = [7717.92, 4540.8575, 2.9991015625, 8233.4, 5078.333125, 3.12015625]
const getRandNumBetween = (min, max) => {
return Math.round((Math.random() * (max - min) + min) * 10) / 10
}
// 定义marker数组
const markerList = []
for (let i = 0; i <= 200; i++) {
let x = getRandNumBetween(bbox[0], bbox[3]) //minX ~ maxX
let y = getRandNumBetween(bbox[1], bbox[4]) //minY ~ maxY
// 定义点位坐标
const coordinate = [x, y]
const marker = {
id: 'marker_' + i,
text: 'M_' + i, //显示的文字
coordinate: coordinate, //坐标位置
range: [0, 100000], //可视范围
imagePath: '@path:二三维标签添加/img/marker.png', //显示图片路径
imageSize: [108 / 3, 142 / 3]
}
// 往数组中添加 marker 对象
markerList.push(marker)
}
// 添加dts marker
let markerLayer = {
id: 'markerLayer1',
groupId: 'markerLayer',
coordinateType: 1, //默认0是投影坐标系，也可以设置为经纬度空间坐标系值为1
range: [0, 200, 2000, 10000],
autoHeight: true,
color: '#ffffff',
radius: 10,
fixedSize: false,
anchors: [-108 / 6, 142 / 3], //锚点
useTextAnimation: false, //关闭文字展开动画效果 打开会影响效率
textRange: [1, 1000], //文本可视范围[近裁距离, 远裁距离]
textOffset: [0, 0], // 文本偏移
textBackgroundColor: '#6b4020', //文本背景颜色
fontSize: 12, //字体大小
fontOutlineSize: 1, //字体轮廓线大小
fontColor: Color.White, //字体颜色
fontOutlineColor: Color.Black, //字体轮廓线颜色
autoHeight: true, // 自动判断下方是否有物体
displayMode: 2, //智能显示模式 开发过程中请根据业务需求判断使用四种显示模式
clusterByImage: true, // 聚合时是否根据图片路径分类，即当多个marker的imagePath路径参数相同时按路径对marker分类聚合
priority: 0, //避让优先级
occlusionCull: true, //是否参与遮挡剔除
markers: markerList
}
fdapi.markerLayer.add(markerLayer)
}
注意事项
❝
该专题资源链接：pan.baidu.com/s/1ILVe5rA5…
资源链接中包含代码、文件资源【代码中引入的图片、弹窗资源】。
- 代码启动：需要将代码Code/lib/aircity文件下的替换成本地Cloud的SDK的ac.min.js，则可以将html在浏览器直接打开。
本地Cloud的SDK的ac.min.js获取方式：将其ac.min.js进行复制
将Code/lib/aircity的ac.min.js替换成复制的ac.min.js
