3D icons are a data mapping layer in 3D City Builder. These icons are based on points of interest (POIs) in 3D space and support physically based rendering (PBR) materials. You can configure various styles and data for 3D icons, such as their geometry, environment, appearance, and background. This topic describes the configuration parameters for 3D icons.
In the layer list on the left of the scene editor, click the 3D Icon layer to configure the 3D Icon's style and data in the configuration panel.
If 3D Icon is not found in the layer list, it means you have not added the 3D Icon layer. For more information, see Add a sub-widget.
Style panel
-
Search Configuration: To quickly find a specific configuration item, click on the Configuration panel in the upper right corner and enter the item's name in the Search Configuration field. The system utilizes a fuzzy match to assist in locating items. For more information, see search configuration items.
The following parameters are available on the configuration panel for 3D icons.
General
Parameter
Description
Depth Write
Turn on the switch to enable depth writing for the 3D icon. Turn off the switch to disable it.
NoteIf depth writing is enabled, the object may occlude objects behind it.
Depth Test
Turn on the switch to enable depth testing for the 3D icon. Turn off the switch to disable it.
NoteIf depth testing is enabled, the object may be occluded by objects behind it.
Graphics
Parameter
Description
Geometry
Sets the geometric style of the 3D icon.
Icon Shape: Select the geometric shape of the 3D icon. Options are Triangular Prism, Cube, and Cylinder.
Icon Radius: Set the radius of the 3D icon. The value can range from 0.01 to 100. This parameter is valid only when Shape is set to Triangular Prism or Cylinder.
Icon Width: Set the width of the 3D icon. The value can range from 0.01 to 100. This parameter is valid only when Shape is set to Cube.
Icon Height: Set the height of the 3D icon. The value can range from 0.01 to 100. This parameter is valid only when Shape is set to Cube.
Icon Thickness: Set the thickness of the 3D icon. The value can range from 0.01 to 100.
Environment Map
Drag the slider to set the intensity coefficient of the environment map for the 3D icon. The value can range from 0 to 10.
Icon
Set the PBR icon map style for the 3D icon layer. This includes settings for the icon's color, color map style, roughness value, roughness map style, metalness value, metalness map style, normal map style, ambient occlusion map intensity value, ambient occlusion map style, emissive color, and emissive map style.
NoteMaps must be PNG or JPG images.
Background
Set the PBR background style for the 3D icon layer. This includes settings for the background's color, color map style, roughness value, roughness map style, metalness value, metalness map style, normal map style, ambient occlusion map intensity value, ambient occlusion map style, emissive color, and emissive map style.
NoteMaps must be PNG or JPG images.
Animation: Sets the rotation speed of the 3D icon. The value can range from 0 to 100. A larger value indicates a faster rotation speed.
Interaction
Parameter
Description
Mouse Interaction
Turn on the switch to enable mouse interaction with the 3D icon. Turn off the switch to disable it.
Click Color
Set the color that the icon displays when clicked.
Data panel
Field |
Description |
id |
The ID of the 3D icon. |
lng |
The longitude of the 3D icon's centroid. |
lat |
The latitude of the 3D icon's centroid. |
altitude |
The altitude of the 3D icon's centroid from the geoid. |
Configuration Item |
Description |
Controlled Mode |
Turn on the switch to prevent the widget from requesting data upon initialization. Data is requested only through a callback ID or a method configured in the blueprint editor. Turn off the switch to allow automatic data update requests. The switch is off by default. |
Automatic Update Request |
Select this option to enable dynamic polling and manually set the polling frequency. If you clear this option, data is not updated automatically. You must manually refresh the page or trigger data update requests using the blueprint editor or callback ID events. |
Data Source |
Click Configure Data Source. In the Set Data Source panel, you can modify the data source type and data query code, preview the data source return results, and view the data response. |
Data Result |
Displays the response result of a data request. When the data source changes, click the |
icon on the right to view the real-time data response.You can also use the layer data API as a block data API to configure more data source types in the data dashboard or to interact with data from common chart widgets. For more information, see One-click generation of block APIs.
If you created your 3D City Builder project in Spatial Data Project mode and the project contains data primitive layer content, you can use the Spatial Build Data Source to obtain spatial map data when you configure the data panel in the scene editor. The steps are as follows:
In the layer configuration panel, select the Data tab. Click the Data Source Type drop-down list at the bottom of the panel and select Spatial Build Data Source.
From the Data Project drop-down list at the bottom of the panel, select an existing data project from the spatial build platform.
After you select a data project, select a matching dataset from the Dataset drop-down list.
NoteIf no configurable data types are available for the Data Project and Dataset configuration items, click Go to Spatial Build Platform to Manage Data in the panel to configure data in the spatial build platform. For more information, see Overview of spatial data management.
Blueprint interaction
In the scene editor, click the
icon to the right of the 3D Icon layer in the layer list.Click the
icon in the upper-left corner of the page.On the blueprint editor configuration page, click the 3D Icon layer in the import node bar. The configuration parameters for the blueprint editor appear on the canvas, as shown in the following figure.
Events
Event
Description
When Data API Request is Completed
The event is triggered after the data API request returns a response and the data is processed by the filter. The processed data is also thrown in JSON format. For a data example, see the Data Response Result area on the Data tab of the widget's configuration panel on the right of the canvas editor.
Left-click
The event is triggered when you left-click a 3D icon. The thrown data is an object that includes the click position and the raw data item.
Actions
Action
Description
Request data API
Re-requests server-side data. Data from input data processing nodes or layer nodes is used as a parameter. For example, if a 3D icon has its API data source set to
https://api.test, and the data passed to the Request data API action is{ id: '1'}, then the final API request ishttps://api.test?id=1.Import data API
After the data is processed in the format required for component rendering, import the data to redraw the component. You do not need to request data from the server-side again. For a data example, see the Data Response Result area on the Data tab of the configuration panel on the right side of the component in the canvas editor.
Show widget
Shows the widget. No parameters are required.
Hide widget
Hides the widget. No parameters are required.
Highlight
Highlights the 3D icon that corresponds to the specified ID.
{ "ids": [] // An array of icon IDs to highlight. }Clear highlight
Clears the highlight from the currently highlighted icon. No parameters are required.
icon to the right of the 3D Icon layer in the layer list.
icon in the upper-left corner of the page.