Hiding or Displaying Data Layers of 3D Components by Click in FVS

This document applies to users who have installed the FineVis Data Visualization plugin to learn FineVis functions.

Version

Application Scenario

In FVS 3D city components, you can set multiple data layers. You want to dynamically display data layers as required, as shown in the following figure.

(1) In FVS, data layers can be hidden.

(2) FVS provides an API to hide data layers, and allows data layers to be dynamically displayed through JavaScript events.

Note:

3D components are unavailable on mobile terminals.

API Overview

(1) API for obtaining all data layers of the 3D city component

Note:

The returned value is an array. To obtain a specific data layer with an unknown name from the array, you must add [Sequence number of a data layer] at the end, for example, duchamp.getWidgetByName("Name of the 3D City").getDataLayers()[0] to get the first data layer.

duchamp.getWidgetByName("Name of the 3D City Component").getDataLayers() 

(2) API for obtaining a specific data layer of the 3D city component

duchamp.getWidgetByName("Name of the 3D City Component").getDataLayerByName("Data Layer 1"); 

Create an FVS template containing a 3D city component first.

Note:

This section only introduces how to create a simple 3D city component. For details about more functions, see FVS 3D City Scene Component.

Template Creation

Choose File > New FineVis Visualization Dashboard on the menu bar, and create a blank dashboard. You can customize the template name and size, as shown in the following figure.

Dataset Creation

Create a dataset for adding data layers to the 3D city component.

Create a built-in dataset City_Data. The following figure shows the content of the dataset.

3D City Component Adding

On Page1, choose 3D > 3D City Scene to add the component to the page.

Select the 3D city component, and choose Content > Edit Component in the configuration area to enter the editing page of the 3D city component, as shown in the following figure.

Scene Creation

You need to prepare the scene data of the 3D city component first. Download and unzip the 3D GeoJSON sample data by clicking Sample Area.zip.

Click Create Scene, and select Generate New Scene as Creation Method on the editing page of the 3D city component.

Click Select Data, select the 3D GeoJSON sample data provided in the document, and click Generate Scene, as shown in the following figure.

Data Layer Adding

(1) Adding the model layer Building Name

Choose Data > Add Data Layer > Model-Data Layer on the configuration bar.

Set Layer Name to Building Name. Select Dataset and City_Data from the drop-down lists in the Data Source area, and set Model Name to Building_Name. Click OK, as shown in the following figure.

(2) Adding the point layer Communication Coverage Rate

Choose Data > Add Data Layer > Point-Data Layer at the configuration bar.

Set Layer Name to Communication Coverage Rate. Select Dataset and City_Data from the drop-down lists in the Data Source area. The following figure shows the specific settings of the coordinate points. Click OK.

(3) Adding the point layer Number of Properties for Sale

Choose Data > Add Data Layer > Point-Data Layer at the configuration bar.

Set Layer Name to Number of Properties for Sale. Select Dataset and City_Data from the drop-down lists in the Data Source area. The following figure shows the specific settings of the coordinate points. Click OK.

(4) Adding the column layer This Month's Incident

Choose Data > Add Data Layer > Column-Data Layer at the configuration bar.

Set Layer Name to This Month's Incident. Select Dataset and City_Data from the drop-down lists in the Data Source area. The following figure shows the specific settings of the coordinate points. Click OK.

Data Layer Hiding

On the Data tab page at the configuration bar, hide the Communication Coverage Rate and Number of Properties for Sale data layers, as shown in the following figure.

Effect Preview

Click Back to Visualization Dashboard to exit the 3D city component editing page and return to the canvas page.

Click Preview in the upper right corner to preview the FVS template.

You can only view the Building Name and This Month's Incident data layers and cannot view the hidden Communication Coverage Rate and Number of Properties for Sale data layers.

Example:

There are four data layers in the 3D city component: Building Name, This Month's Incident, Communication Coverage Rate, and Number of Properties for Sale.

The Building Name data layer is always displayed. The other three data layers are dynamically displayed according to the clicked chart series name.

Note:

Complete the basic template according to the section "Basic Template", and then perform the operations in this section based on the basic template.

Dataset Creation

You need to create a dataset for adding data to the pie chart. The values in a column need to be consistent with the names of the data layers for passing parameters.

Open the FVS template made in the section "Basic Template", and create a built-in dataset Indicator_Attention_Level. The following figure shows the dataset content.

Pie Chart Component Adding

On Page1, choose Chart > Pie > Pie Chart in the component area to add a pie chart to the page.

Select the component, choose Content > Data in the configuration area, and set Dataset to Indicator_Attention_Level, Category to None, Series to Indicator, and Value to Attention_Level, as shown in the following figure.

You can set the component style as required, which will not be elaborated here.

Modifying the 3D City Component Name

Select the 3D city component, click Component on the configuration bar, and change Name to 3D City, as shown in the following figure.

Note:

The change is not forcible, but the component name in the code below needs to be consistent with the value of Name here.

JavaScript Event Setting

Select the pie chart component, choose Interaction > Interaction Event, and choose Add Event > Click > JavaScript to add a click event.

Set the event name to Dynamical Data Layer Display.

To add a parameter, set Parameter Name to abc, and Parameter Content to Series Name.

Enter the following code in the Executable JavaScript Script area.

const widget = duchamp.getWidgetByName("3D City");//Obtain the names of all data layers in the component named 3D City.
widget.getDataLayers().forEach(layer => layer.setVisible(false));//Hide all obtained data layers.
widget.getDataLayerByName("Building Name").setVisible(true);//Display the data layer named Building Name.
widget.getDataLayerByName(abc).setVisible(true);//Display the data layer consistent with the series name.

Effect Preview

Save the template and click Preview in the upper right corner. The following figure shows the effect.

The Building Name data layer is always displayed. The other three data layers are dynamically displayed according to the clicked chart series name.

Example:

There are four data layers in the 3D city component: Building Name, This Month's Incident, Communication Coverage Rate, and Number of Properties for Sale.

By clicking a button, you can hide or display all data layers.

Note:

Complete the basic template according to the section "Basic Template", and then perform the operations in this section based on the basic template.

Title Component Creation

Use a title component as the button to achieve the function of switching by click.

Open the FVS template created in the section "Basic Template", and choose Other > Title in the component area on Page2 to add a title to the page.

Select the component, click Content in the configuration area, and set Title Content to Display/Hide All Data Layers, as shown in the following figure.

Configure other styles of the title component as required, which will not be elaborated here.

Modifying the 3D City Component Name

Select the 3D city component, click Component on the configuration bar, and change Name to 3D City, as shown in the following figure.

Note:

The change is not forcible, but the component name in the code below needs to be consistent with the value of Name here.

JavaScript Event Setting

Select the title component, choose Interaction > Interaction Event, and choose Add Event > Click > JavaScript to add a click event.

Set the event name to Click to Hide/Display All Data Layers.

Enter the following code in the Executable JavaScript Script area.

const widget = duchamp.getWidgetByName("3D City");
const layers = widget.getDataLayers();
const visible = !layers.some(layer => layer.visible);layers.forEach(layer => layer.setVisible(visible));

Save the template and click Preview in the upper right corner. The following figure shows the effect.

Effect Preview

When you click the title component, the system checks whether any data layer is displayed.

• If so, all data layers are hidden by click.

• If not, all data layers are displayed by click.

Completed template: Hiding or Displaying FVS Data Layers by Click.fvs.

Example One and Example Two correspond to Page1 and Page2 in the template, respectively.

Download and unzip the 3D city GeoJSON data by clicking: Sample Area.zip.