An InfoWindow layer is a component of the 3D globe widget. It allows you to display geographical details in your DataV project. You can configure the style and data of an info window, including the size, color, content, longitude, and latitude. This topic describes the configuration items of the InfoWindow layer.
Settings
- Show: Turn on the switch to enable the infoWindow layer display.
- Scale: the distance between the InfoWindow layer and the globe.
- InfoWindow Options
Size: the size of the InfoWindow layer.
Data
Sample code in the preceding figure:
[
{
"type": "dom",
"id": 1,
"latlngs": {
"lng": -180.1904296,
"lat": 7.29701788
},
"content": {
"title": "NO.2",
"content": "This is the content of an info window.",
"width": 900,
"height": 350,
"paddingLeft": 90,
"paddingRight": 60,
"paddingTop": 110,
"titleFontSize": 45,
"titleColor": "#fbf320",
"contentColor": "#000",
"contentFontSize": 40,
"fontFamily": "Microsoft Yahei, serif",
"bgImgUrl": "https://img.alicdn.com/tps/TB1bymmOFXXXXaxXpXXXXXXXXXX-2201-753.png"
}
},
{
"type": "dom",
"id": 2,
"latlngs": {
"lng": -20.83203125,
"lat": 13.94426488
},
"content": {
"title": "NO.1",
"content": "This is the content of an info window.",
"width": 900,
"height": 350,
"paddingLeft": 90,
"paddingRight": 60,
"paddingTop": 110,
"titleFontSize": 45,
"titleColor": "#fbf320",
"contentColor": "#000",
"contentFontSize": 40,
"fontFamily": "Microsoft Yahei, serif",
"bgImgUrl": "https://img.alicdn.com/tps/TB1bymmOFXXXXaxXpXXXXXXXXXX-2201-753.png"
}
}
]
Parameter | Description |
---|---|
type | The type of an info window. |
id | The ID of an info window. |
latlngs | The latitude and longitude where an info window is located. |
content | The information displayed in an info window, which contains the following fields:
|
Parameter | Description |
---|---|
Controlled Mode | If you turn on the switch, data is not requested when a widget is initialized. Data requests are triggered only based on callback IDs or the method configured in Blueprint Editor. If you turn off the switch, data requests are automatically triggered. By default, the switch is turned off. |
Auto Data Request | After you select the Auto Data Request check box, you can enable dynamic polling, and manually specify the polling interval. If you do not select this check box, data is not automatically requested. You must manually refresh the page to request data or use Blueprint Editor or callback ID events to trigger data requests. |
Data Source | In the right-side panel of Canvas Editor, click the Data tab. Click Set next to Static Data. In the Configure Datasource panel, select a data source from the Data Source Type drop-down list. Enter code for data query in the code editor, click Preview Data Response to preview the response of the data source, and then view the response. For more information, see Configure widget data. |
Data Filter | If you select the Data Filter check box, you can convert the data structure, filter data, and perform simple calculations. If you click the plus sign (+) next to Add Filter, you can configure the script for the data filter in the editor that appears. For more information, see Use the data filter. |
Data Response Result | The response to a data request. If the data source changes, you can click the icon next to Data Response Result to view the data response in real time. |
Interaction
This component does not support interaction events.
Interaction configuration in the blueprint editor
- In the canvas editor of the 3D globe widget, click the icon next to InfoWindow Layer under Components.
- Click the icon in the upper-left corner of the page.
- In the blueprint editor, click InfoWindow Layer in the Added Nodes pane. You can configure parameters of the InfoWindow layer on
the canvas.
- Event
On Completion of InfoWindow Request: After data of the InfoWindow layer is returned by the API and processed by filters, this event is triggered to pass JSON-format data. For more information, see Example data.
On Error of InfoWindow Request: When a data interface request fails (the request may be caused by network problems or interface errors, etc.), the event is returned and processed by the filter, and the processed JSON-formatted data is also thrown. For more information about specific data examples, see the Data Response Result section on the Data tab of the canvas editor..
- Action
Action Description Request InfoWindow This action takes parameters passed by an upstream data processing node or widget and requests data from the server. For example, the InfoWindow layer uses the API data source http://api.test
, and the data passed to the Request InfoWindow action is{ id: '1'}
. As a result, thehttp://api.test? id=1
API is called to request data.Import InfoWindow This action imports data from the API to render the InfoWindow layer and dose not request data from the server. For more information, see Example data. Show This action shows the component and does not need parameter input. Hide This action hides the component and does not need parameter input.
- Event