FVS Click to Hide/Show Data Layer

Applicable scenarios: Users who have installed the " FVS Large Screen Editing Mode " plug-in can refer to this article to learn about the functions of the FVS template.

1. Version

2. Application scenarios

In the FVS 3D city component, multiple data layers can be set, and users want to display the data layers dynamically according to their needs. As shown below:

1) In the FVS large screen editor, support for hidden data layers.

2) Provide an interface for hiding data layers, and support dynamic display of data layers through JavaScript events.

3. Introduction to the interface

1) Obtain all data layers of a 3D city

Note: The return value is data, which must be followed by an array object such as [0].

duchamp.getWidgetByName("3D city name").getDataLayers()

2) Get the layer with the specified name of the 3D city

duchamp.getWidgetByName("3D city name").getDataLayerByName("Layer 1");

The user needs to make a FVS large screen template containing 3D city components first.

Note: This chapter only demonstrates how to make a simple 3D city component. For more functions, please refer to: 3D City Component.

1. Create a new large screen template

The user clicks "File > New Big Screen Dashboard" in the menu bar, sets the name of the large screen template to "FVS Click to Hide/Show Data Layer", and click "OK", as shown in the following figure:

2. Create a new dataset

A new dataset needs to be created to add a data layer to the 3D city.

The user creates a new built-in dataset "City Data", and the content of the dataset is shown in the following figure:

3. Adding 3D city components

On "Page1", the user selects "3D Components > 3D City" in the component area, and clicks to add to the page.

Select the 3D city component and click "Content > Edit Component" in the configuration area to enter the 3D city editing interface. As shown below:

4. Create a scene

The user needs to prepare the scene data of the 3D city first, click to download and unzip the 3D geojson sample data: 

Example.zip

In the 3D city editing interface, the user clicks the "Create Scene" button and selects "Generate a New Scene" as the creation method. Click "Select Data", select the 3D geojson sample data provided by the document, and click "Generate Scene", as shown in the following figure:

5. Adding data layers

1) Add the model layer "Building Name"

Click on the configuration bar "Data > +Add Data Layer > Model - Data Layer".

Set the layer name to "Building Name". The dataset is taken from "City Data", and the model name is "Building Name". Click "Finish", as shown below:

2) Add a point layer "Communication Coverage"

Click the configuration bar "Data > +Add Data Layer > Point-Data Layer".

Set the layer name to "Communication Coverage". The data set is taken from "City Data", and the specific settings of the coordinate points are shown in the following figure. Click "Finish".

3) Add a point layer "Number of properties for sale"

Click the configuration bar "Data > +Add Data Layer > Point-Data Layer".

Set the layer name to "Number of Properties for Sale". The data set is taken from "City Data", and the specific settings of the coordinate points are shown in the following figure. Click "Finish".

4) Add a column layer "Emergencies of the month"

Click the configuration bar "Data > +Add Data Layer > Cylinder - Data Layer".

Set the layer name to "Emergencies of the month". The data set is taken from "City Data", and the specific settings of the coordinate points are shown in the following figure. Click "Finish".

6. Hide data layers

In the "Data" interface of the configuration bar, hide the "Communication Coverage" and "Number of Properties for Sale" data layers. As shown below:

7. Effect preview

Click "Return to Editor" to exit from the 3D city editing interface to the large screen editing interface.

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

Users can only see the data layers of "Building Name" and "Emergencies of the month", but cannot see the hidden "Communication Coverage" and "Number of Properties for Sale" data layers.

Examples of this section:

There are four data layers in the 3D city component: "building name", "emergencies of the month", "communication coverage" and "number of properties for sale".

The "Building Name" data layer is always displayed. Dynamically display the other three data layers according to the clicked chart series name.

Please complete the basic template creation according to Chapter II, and then perform the operations in this chapter based on the basic template.

1. Create a new dataset

You need to create a new dataset to add data to the pie chart. One of the columns needs to match the name of the data layer and is used to pass parameters.

Open the FVS large screen template created in Chapter II, and create a new built-in dataset "Indicator Attention". The content of the dataset is shown in the following figure:

2. Adding Pie Chart Components

On "Page1", the user selects the component area "Chart > Pie > Pie Chart" and clicks to add to the page.

Select the component, set the component "Content > Data" in the configuration area, set the dataset as "Indicator Attention", the category is "None", the series name is "Indicator", and the value is "Attention", as shown in the following figure.

Component styles can be set according to personal preferences, and this article will not repeat them.

3. Modify the name of the 3D city component

Select the 3D city component, click "Component" in the configuration bar, and change the component name to "3D City". As shown below:

Note: It is also not necessary to modify, but the component names in the following code need to be modified by yourself.

4. Setting up JavaScript events

Select the pie chart component, click "Interaction > Click", and add the click event "JavaScript".

Set the event name to "Dynamic display data layers".

Set the parameter, the parameter name is "abc", the parameter type is "Component Field", and the parameter content is "Series Name".

Set the JavaScript execution script to:

const widget = duchamp.getWidgetByName("3D City");
widget.getDataLayers().forEach(layer=>layer.setVisible(false));
widget.getDataLayerByName("Building Name").setVisible(true);
widget.getDataLayerByName(abc).setVisible(true);

5. Effect Preview

Save the template, click "Preview" in the upper right corner, the preview effect is as shown below:

The "Building Name" data layer is always displayed. Dynamically display the other three data layers according to the clicked chart series name.

Examples of this section:

There are four data layers in the 3D city component: "building name", "emergency of the month", "communication coverage" and "number of properties for sale".

By clicking the button, you can hide all data layers/show all data layers

Please complete the basic template creation according to Chapter II, and then perform the operations in this chapter based on the basic template.

1. Create a new title component

The title component is used as a button to implement the function of click to toggle.

Open the FVS large screen template created in Chapter II, in "Page2", select "Text > Title" in the component area, and click to add to the page.

Select the component, set the component "Content" in the configuration area, and set the title content to "Show/hide all data layers". As shown below:

Please configure other styles of the title component according to your personal preferences, which will not be repeated in this article.

2. Modify the name of the 3D city component

Select the 3D city component, click "Component" in the configuration bar, and change the component name to "3D City". As shown below:

Note: It is also not necessary to modify, but the component names in the following code need to be modified by yourself.

3. Setting up JavaScript events

Select the title component, click "Interaction > Click", and add the click event "JavaScript".

Set the event name to "Dynamic display data layer".

Set the JavaScript execution script to:

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

4. Effect preview

Save the template, click "Preview" in the upper right corner, the preview effect is as shown below:

First determine whether there is a data layer displayed.

• If there are data layers displayed, click Hide All.

• If all data layers are hidden, click Show All.

For the completed template, please refer to: 

FVS Click to Hide or Show Data Layer.fvs

Example 1 and Example 2 correspond to page1 and page2 in the template, respectively.

Click to download and unzip the 3D city geojson data: 

Example.zip