Title

--- theme: devui-blue highlight: idea --- > **❝** > > 飞渡科技DTS数字孪生引擎下载地址：**** > > 新用户可以领取一个月的免费试用\~\~ 在数字孪生三维场景开发中，为模型添加标签是一项**常见且重要**的开发需求。能够帮助我们展示和突出模型或场景的相关信息。那么，在我们所使用的DTS中，是可以实现怎么样的效果以及如何实现这一效果？ # **关于标签** 在飞渡DTS SDK中使用根据二三维标签进行区分标签的创建。二维标签：**Marker**、**MarkerLayer** 三维标签：**Marker3d** 本章节针对二维标签进行详细讲解\~三维标签在后续的推文中详细介绍使用方法和技巧 ## **效果呈现** ### **1. 文字点位** 适用于标记道路、地块、行政区划范围及各类标识的创建与展示。

### **2. 图标点位** 适用于纯图标展示设备以及楼栋等各类场景的标记点位。

### **3. 文字+图标点位** 适用于同时需要图标和文字展示，用于标识楼栋、设备及其他相关设施的点位。

### **4. 自定义样式弹窗** 自定义样式点位采用嵌入html页面的方式展示点位，可以直观地展示数据，还能嵌入监控视频，可以提供更加全面、详细的点位信息展示体验。

### **5. marker交互操作** 适用于通过标签进行交互操作，点击标签可执行多种回调操作；弹窗与三维场景双向通信。

### **6. 创建大量点** 主要用于批量加载点位信息，并支持聚合效果的显示与应用。

### **7. 分层点位** 主要用于根据不同观看距离设置不同层级的内容展示，近距离可展现详细图标与文字信息，中距离仅展示图标，远距离则以点要素进行简化展示。

领略完二维标签的效果呈现后，咱们一同探索这些效果的实现。 # **二维标签详解** ## **Marker** Marker标签的创建，需要通过`fdapi.marker.add()`方法进行添加。创建的效果由下面这些属性字段进行决定，我们来逐一进行了解。 ### **属性** 不同的效果由不同属性决定。 1. 基础属性设置 `id`和`coordinate`是必须传入的参数。当需要对多种类型的图标进行操作，尤其是涉及多个图标时，可以使用`groupId`。此外，`coordinate`功能支持工程坐标系点位以及地理坐标系点位，用户需根据实际点位数据信息选择相应的`coordinateType`类型。\ 注意事项： * 如果点位是地理坐标系点位，它会将对应的地理坐标系点位数据转换为工程坐标系点位，因此当前工程需要有对应的工程坐标系！！！ * **设置anchors**：情况下\[0,0]是以图标左上角作为锚点，为了让图标以中心作为锚点，因此需要对此偏移，不同的图片**偏移**不同，可参考下面的功能实现例子进行了解。 * **自动判断下方是否有物体autoHeight**：如果数据没有z值，将其设置true，则会自动判断位置下方是否有物体并进行贴合。

2. 文字属性设置用于设置与文字相关的样式参数，包括文字内容、文字偏移、文字大小及文字颜色等参数。

marker_文字.png

3. 标签图片属性设置用于设置图标尺寸、图标路径，同时允许设置当鼠标悬停时图标的路径以及悬停时图标的大小。

marker_图片.png

其中，图片路径支持本地路径、网络路径，本地路径需是**绝对路径**，本地路径更推荐使用**Cloud文件资源**进行添加图片进行引用，将资源放在文件资源中，相当于使用本地路径直接加载，减少了网络传输过程，显著提高了加载速度。\ **绝对路径**格式参考： imagePath: `${window.origin}/img/摄像头.png`, //图片路径 *将资源放入Cloud文件资源的路径获取方式：*

4. 可视范围属性设置用于设置相机距离范围内标签、文字的可视距离的可见性。

marker_可视距离.png

5. 弹窗属性设置主要用于展示各类数据信息，支持HTML格式以及实流媒体视频地址(实时监控视频)【支持rtsp、rtmp协议】，用户可自由设置弹窗的路径、大小以及偏移量。

marker_弹窗.png

6. 牵引线属性设置用于设置牵引线显隐、牵引线粗细、牵引线颜色、牵引线偏移。

marker_牵引线.png

7. 聚合效果属性设置用于设置多点位信息时的聚合效果。

markerLayer_聚合.png

为了更好地理解并比较不同效果之间的差异，通过图片来看看之间的区别对比，在实际项目中，可以根据实际需求灵活选择最佳的效果~ 0：移动的过程中是不会显示的，移动结束之后，就会参与聚合的显示方式；

1：移动时会显示，会有一个算法进行调度，停下来会聚合；

2：常显，不会聚合；

3：移动时不显示。停下来的时候，不会聚合；

4：会根据当前的可视范围区判断，高层级的时候聚合，低层级就不聚合；阈值范围，通过`autoDisplayModeSwitchFirstRatio`、`autoDisplayModeSwitchSecondRatio`参数进行设置。

8. 其他属性设置设置其避让优先级以及是否参与遮挡剔除。

### **方法** 除了使用 `fdapi.marker.add()` 来添加标记外，Marker 还提供了多种实用功能，比如删除、显示、隐藏以及定位等。只需提供相应的 ID，就能精准地管理和操作每一个 Marker 了。此外，通过`fdapi.marker.showPopupWindow()`可以直接控制弹窗的显示。特别值得一提的是，通过指定分组 ID (groupId)，可以轻松实现对特定分组内所有 Marker 的显示或隐藏。 ![marker\_方法.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/548d3abc9a47437487ef5556b3792fa6~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5aWz5YmN56uv5rWF5YWl5pWw5a2X5a2q55Sf:q75.awebp?rk3s=f64ab15b&x-expires=1776706492&x-signature=MB63Utf5ahEvuKLLtfdIIgXXUHo%3D) ### 功能实现 #### a. 文字点位

文字.gif

实现效果：以文字进行展示对应点位。功能实现：需要传入与文字相关的属性信息。将这些属性信息封装在一个对象中，然后通过调用`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]！！** * 在三维场景中图标偏移，是因为锚点没设置正确。以这个监控摄像头为例，需要将图标打在摄影头正上方。 **锚点偏移**

锚点偏移.png

**锚点在正确位置**

锚点正确.png

**锚点anchors设置详解：** 初始状态下，\[0,0]锚点是在图标的左上角。但在三维中看图标是会有所偏移。

实际场景中，每个锚点的位置都不同。例如，这张图片的锚点在图片底部的中心。

因此需要对锚点位置进行偏移，将锚点设置为图片底部的中心，图标需要**向左、向上**进行偏移。

锚点偏移值：\[-图标宽度/2，图标高度]

锚点移动静态.png

代码如下： 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，图片高] ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e541385c8528401c9205f45b42e77f4e~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5aWz5YmN56uv5rWF5YWl5pWw5a2X5a2q55Sf:q75.awebp?rk3s=f64ab15b&x-expires=1776706492&x-signature=QX7m%2B5lDMvR3jYlpT2iWSe1oIN4%3D) 代码如下： 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：其中，嵌入的弹窗也支持与三维场景双向通信。** ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/8215b78bb07d4816b92fe0a4996f456d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5aWz5YmN56uv5rWF5YWl5pWw5a2X5a2q55Sf:q75.awebp?rk3s=f64ab15b&x-expires=1776706492&x-signature=y05E6CqCI%2BsCiB6%2FXZBJnExFGR8%3D) 实现效果：实现弹窗向主页面发送事件通知，三维场景能够接收到弹窗发送的通知；点击关闭按钮将弹窗在三维场景中关闭等。功能实现：需要使用`FdExternal`类实现与三维场景双向通信。使用`FdExternal.postEvent()`向主页面发送事件通知；使用`FdExternal.close()`关闭当前的窗口。三维页面在`DigitalTwinPlayer`类的onEvent方法监听器`MarkerCallBack`中获取弹窗的回调信息。注意事项： * 因为该弹窗需要实现与三维场景的交互，所以在该弹窗代码中需要引入ac.min.js * 要保证引入的ac.min.js为本地Cloud本地SDK的ac.min.js Cloud本地SDK的ac.min.js获取方式：将其进行复制

sdk获取.png

该资源中的ac.min.js需要**替换成Cloud本地SDK的ac.min.js**；

文件资源_替换路径.png

* 对应的弹窗按钮实现与三维场景的双向通信，弹窗嵌入三维场景并且ac.min.js引入，则可以获取到`window.FdExternal` 核心代码如下： Title

项目概况

孪创园区

用地面积

约200亩

建筑面积

约120万m²

绿地率

13.21%

随着经济的发展及园区投资的不断深化，大型园区建设运营企业寻求园区发展新途径的意愿日趋强烈，国内优秀的园区建设运营企业愈来愈重视对行业市场的研究，特别是对发展环境和园区企业需求趋势变化的深入研究。正因为如此，一大批国内优秀的园区品牌迅速崛起，逐渐成为园区建设运营企业中的翘楚!

进入项目

* **三维场景获取弹窗传递的信息**：在`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()`进行添加这样的效果吧\~ ### **属性** 1. 基础属性设置 `id`是必须传入的参数。`range`属性则用于分层展示范围的设置，分为三个层级：近距离可展现详细图标与文字信息，中距离仅展示图标，远距离则以点要素进行简化展示。

markerLayer_基础属性.png

markerLayer_基础属性2.png

注意事项： * 如果点位是地理坐标系点位，它会将对应的地理坐标系点位数据转换为工程坐标系点位，因此当前工程需要有对应的工程坐标系！！！ * **锚点设置anchors：** 【可以参考上面Marker的锚点设置】。 * **自动判断下方是否有物体autoHeight**：如果数据没有z值，将其设置true，则会自动判断位置下方是否有物体并进行贴合。 * **图层对象三段可视范围range**：\[minDis,lod1Dis,lod2Dis,maxDis]。当点位处于第一段近距离\[minDis,lod1Dis]时，将显示图标和文字；当处于第二段中距离\[lod1Dis,lod2Dis]时，仅显示图标；当处于第三段远距离\[lod2Dis,maxDis]时，则以圆形点要素的形式表示。 **近距离**：显示图标和文字

近距离.png

**中距离**：仅显示图标

中距离.png

**远距离**：显示圆形点要素

远距离.png

2. 文字属性设置用于设置文字可视范围、文字偏移、文字大小等属性。

markerLayer_文字.png

3. 弹窗属性设置用于设置弹窗的大小以及偏移等属性。

markerLayer_弹窗.png

4. 点位信息设置用于存储点位相关的详细信息，包括`id`唯一标识、`coordinate`点位的坐标信息、图片路径以及弹窗路径等必要数据。

markerLayer_点位信息.png

5. 聚合效果设置用于设置多点位信息时的聚合效果。与前面Marker聚合相同，可参考Marker聚合属性。

markerLayer_聚合.png

6. 其他属性设置设置其避让优先级以及是否参与遮挡剔除。

markerLayer_其他属性.png

### 方法 MarkerLayer同样支持对标记点的添加、删除、定位等操作。调用方式：`fdapi.MarkerLayer.方法()`

markerLayer_方法.png

### 功能实现 #### 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) } # **注意事项** > **❝** > > 该专题资源链接：**** 资源链接中包含代码、文件资源【代码中引入的图片、弹窗资源】。 1. 代码启动：需要将代码Code/lib/aircity文件下的**替换成**本地Cloud的SDK的ac.min.js，则可以将html在浏览器直接打开。本地Cloud的SDK的ac.min.js获取方式：将其ac.min.js进行**复制**

sdk获取.png

将Code/lib/aircity的ac.min.js**替换成**复制的ac.min.js

代码_替换路径.png

2. 需要将文件资源挂载，代码中的图片、弹窗才可以显示。

文件资源挂载.png