3D World Map (2019)

Pattern

• Size/Position
  • Size: width and height of the component. Unit: pixel.
  • Position: position where the component is located in the canvas. Unit: pixel.
• Global Style
  • Map Center: location of the map center on the canvas.
  • Globe Rotation: to set Scaling, Horizontal, and Vertical of the map.
  • Map Color: fill color of the area blocks on the map.
  • Borderline: color and width of the borderline on the map.
    Figure 2 Borderline of a 3D world map (2019)
    
• Subcomponents

  You can add subcomponents Flying Lines, Scatters, and Columns to a 3D world map (2019).

  The operations can be performed on those subcomponents:

  • Adding subcomponents

    In the Pattern panel, click Add Subcomponent. In the displayed menu, select a subcomponent. After the subcomponent is added, the name of the added subcomponent is displayed under Add Subcomponent, for example, fly line.

    Figure 3 Adding a subcomponent
    
  • Editing subcomponents

    After clicking a subcomponent, you can edit it.

  • Deleting subcomponents

    To delete a subcomponent, click .

Data

The following figure shows the data of the 3D world map (2019):

Figure 4 Data of a 3D world map (2019)

• Field and Mapping: The data format contains two fields by default.
  • value: value of the area displayed on the map. It determines the map color together with Max. Value, Min. Value, and No Data in Map Color under Global Style.
  • name: name of the area displayed on the map component.
• Data Source Type: to select the data source of the chart. Multiple data sources are provided for you to select. You need to add data sources first. For details, see Data Connection Overview.
• Automatic Update: If you select Automatic Update and set Update Interval, the data is automatically updated based on the interval.
• View Response Result: to view the data information of the selected data source.

Interaction

For details about whether the component supports the interaction function and how to use the interaction function, see Configuring Component Interaction.

Flying Lines

A flying line dynamically connects two geographical locations on the map.

Figure 5 Flying lines of a 3D world map (2019)

• Pattern
  • Dotted Line: style of dotted lines.
  • Height: curve height of flying lines. When the value is 1, a flying line is approximately a straight line.
  • Speed: speed of flying lines
  • Width: width of flares.
  • Color: color of flying lines.
• Data
  Figure 6 Data of flying lines
  
  • Field and Mapping: The data format contains the following fields. Set the field names in the data source to which each field is mapped. If the field names are left empty, the field names are the same as those in the data source to which each field is mapped.
    • from: longitude and latitude of the start point of a flying line. The longitude and latitude are separated by commas (,).
    • to: longitude and latitude of the end point of a flying line. The longitude and latitude are separated by commas (,).

    The data source is in JSON format. The following is an example:

    [
      {
        "from": "116.85059,31.69078",
        "to": "118.69629,36.20882"
      },
      {
        "from": "120.89355,37.09024",
        "to": "116.93848,31.61597"
      }
    ]

  • Data Source Type: to select the data source of the chart. Multiple data sources are provided for you to select. You need to add data sources first. For details, see Data Connection Overview.
  • Automatic Update: If you select Automatic Update and set Update Interval, the data is automatically updated based on the interval.
  • View Response Result: to view the data information of the selected data source.
• Interaction

  For details about whether the component supports the interaction function and how to use the interaction function, see Configuring Component Interaction.

Scatters

Data information about geographical locations on the map can be displayed by scatters.

Figure 7 Scatters of a 3D world map (2019)

• Pattern
  • Size: size of scatters.
  • Color: color of scatters.
• Data
  Figure 8 Data of scatters
  
  • Field and Mapping: The data format contains the following fields. Set the field names in the data source to which each field is mapped. If the field names are left empty, the field names are the same as those in the data source to which each field is mapped.
    • lat: latitude of a scatter.
    • lon: longitude of a scatter.
    • value: value of a scatter. The value and the scatter size in the style determine the scatter size together. A larger value leads to a larger scatter.

    The data source is in JSON format. The following is an example:

    [
      {
        "lat": 62.103883,
        "lon": -106.523438,
        "value": 51
      },
      {
        "lat": 50.064192,
        "lon": -74.179688,
        "value": 94
      }
    ]

  • Data Source Type: to select the data source of the chart. Multiple data sources are provided for you to select. You need to add data sources first. For details, see Data Connection Overview.
  • Automatic Update: If you select Automatic Update and set Update Interval, the data is automatically updated based on the interval.
  • View Response Result: to view the data information of the selected data source.
• Interaction

  For details about whether the component supports the interaction function and how to use the interaction function, see Configuring Component Interaction.

Columns

Data information about geographical locations on the map can be displayed by column.

Figure 9 Columns of a 3D world map (2019)

• Pattern

  Height: height of columns. Unit: pixel.

  Color: color of columns.

• Data
  Figure 10 Data of columns
  
  • Field and Mapping: The data format contains the following fields. Set the field names in the data source to which each field is mapped. If the field names are left empty, the field names are the same as those in the data source to which each field is mapped.
    • lat: latitude of a column.
    • lon: longitude of a column.

    The data source is in JSON format. The following is an example:

    [
      {
        "lat": 6,
        "lon": 159
      },
      {
        "lat": 30,
        "lon": 99
      }
    ]

  • Data Source Type: to select the data source of the chart. Multiple data sources are provided for you to select. You need to add data sources first. For details, see Data Connection Overview.
  • Automatic Update: If you select Automatic Update and set Update Interval, the data is automatically updated based on the interval.
  • View Response Result: to view the data information of the selected data source.
• Interaction

  For details about whether the component supports the interaction function and how to use the interaction function, see Configuring Component Interaction.