I. Overview
a) Scene Switch Map integrates multiple 3D map scenes in a chart. With powerful information display capabilities, each map scene displays points, lines, columns and planes simultaneously.
b) Set the Scene Switch Map with the same method for setting up Rotating GIS Point Map and Three-dimensional Earth. This document firstly introduces how to set up a basic scene switch map, with which dazzling scenes can be produced using default chart style and data. Then the document will walk you through how to modify default settings so that you can customize the visual effect of the scene as per specific business needs.
II. Make a basic scene switch map
1. Update plugin and JSON file
a) Update the Extended Chart plugin to version 4.0 and above (you can contact our sales or technical support for help).
b) Open the webapps/webroot/WEB-INF/assets/map/geographic folder in the FineReport installation folder. If no world-3.json can be found there, please download the attachment using the link below and place the file in the folder.
c) Restart the Designer to use the scene switch map.
https://attachments-cdn.shimo.im/3BfWrPyDRtyyoCwT.json?attname=world-3d.json
2. Insert a scene switch map
a) Insert a floating chart and select [Extended Chart - Scene] for Chart Type.
b) Adjust the chart size
3. How to set up a scene switch map
You can set up the attributes of the scene switch map in a separate interface so as to preview setup effects in real time.
4. Set the map boundary
a) Map Boundary is set as [world-3d] by default. You can select a smaller area as the boundary.
b) [Auto Smooth] is enabled by default. Some complicated map boundaries will be simplified, without showing some smaller points, such as islands. It is suitable for maps with a larger display area.
c) If [Auto Smooth] is disabled, the map boundaries will become more complicated and more practical in displaying the actual territory. It is suitable for maps with a smaller display area, especially those with a number of islands.
5. Prepare data
a) The embedded datasets [ds1] and [ds2] of the supplied template can be used.
b) [ds1] shows the gross profit of a company in various regions.
c) [ds2] shows the export volumes to various regions.
6. Set data for the first scene
a) Select [Data]> [Point], and set up the data as shown in the diagram below. Once completed, the preview on the left will display these data in default point style.
b) Select [Line] and set up the data as shown in the diagram below. Once completed, the preview on the left will display these data in default line style. The line is superimposed with the points. Please be noted that the lines are of the same thickness.
7. Set data for the second scene
a) Click [+] to create a new scene. Keep the default settings of the map boundary.
b) Select [Data]> [Column], and set up the data as shown in the diagram below.
c) Select [Area] and set up the data as shown in the diagram below. Once completed, the data display area will be highlighted in the preview on the left.
8. Set as carousel
Click to select [Carousel]. Set the Time Interval to 10 seconds.
9. Preview
a) The scene automatically switches every 10 seconds.
b) Use the buttons below to switch between scenes. Press the Pause button to keep the current scene. Click the Left or Right button to switch to the previous or next scene.
10. Download the template
III. Modify default settings
1. Modify the initial perspective
a) Select the first scene. Click and drag it with mouse within the preview box and adjust the perspective. Then click [Save as initial perspective].
b) Re-adjust the perspective, click [Back to initial perspective], and the map will be displayed at the original initial perspective.
c) In preview, the first scene will display at the new initial perspective.
2. Modify the scene color
With the first scene selected, click [Style], and then the drop-down box following [Color Style] to change the color to [Blue-green].
3. Modify the point style
a) Select [Point], and set it as [Quadrangular Pyramid], [Triangular Cone Point], [Angular Cone Point] or [Light Point]. You can also customize the color of these points.
b) Turn off [Aperture] to display no light spots below each point.
5. Modify the point label
a) The method for setting up general charts is applicable to setting labels. The character size of labels can be adjusted.
b) You may set display method as [Floating], which means the label will only be displayed when the mouse is hovering over the point. In this case, a label is equivalent to a prompt box.
6. Modify the line style
a) Select [Line] to customize its colors.
b) Opacity of lines is adjustable.
c) The starting and finishing points of a line always turn on aperture by default. You can turn it off respectively.
7. Set the background
Select [BG] to turn off some special effects in the background: [Particle], [Meteor], [Gear], [Light Wipe], and [Bottom Layer]. The sky background is displayed in dark by default, which can be set as [None].
8. Modify the column style
a) Select [Column] to have it displayed in gradient color.
b) The width and height of the column are adjustable.
c) The aperture can be turned off to eliminate the aperture at the bottom of the column.
9. Modify the column label
Similar to the settings of point labels, the character size of columns can be adjusted.
10. Modify the area style
Select [Area] to customize the color of the area.
11. Modify the area label
Scale up the character size of the area label and modify the character color so as to tell it from the column label.
12. Final preview
13. Download the template
IV. Drill-dwon Scene and Component Linkage
In this part, your will learn how to create a dirll-down map in Scene and use the drill-down level to control data of other components in the same dashboard.
The final result:
A map on the left shows the sales data of all provinces and a chart on the right plays the provinces with top 5 sales.
After clicking a province named Jiangsu in the map, the map drills down to this province and shows the sales data of its subordinate cities while the chart on the right changes the displayed data as cities in Jiangsu with top 5 sales.
If clicking China(Province) in the drill-down directory of the map, the map changes to display sales data of all provinces and the chart on the right changes accordingly.
1. Insert components
Create a new dashboard and drag two components to the canvas: one is Extended Chart-Scene and the other is Carousel Catalog Gear.
2. Prepare data
Create 3 datasets. Two of them is for creating a drill-down map in Scene and the other is for Carousel Catalog Gear.
1) The source database table integrates province level data and city level data.
2) SQL for dataset province
SELECT * FROM drill_down_jiangsu
WHERE [level] = "China(Province)"
Preview dataset:
3) SQL for dataset jiangsu
SELECT * FROM drill_down_jiangsu
WHERE [level] = "Jiangsu"
Preview dataset:
4) SQL for dataset other chart:
SELECT * FROM drill_down_jiangsu
WHERE [level] = '${region}'
ORDER BY sales DESC
LIMIT 5
Set the default value of parameter region as China(Province).
The statement ORDER BY sales DESC LIMIT 5 is to filter regions with top 5 sales.
Preview dataset:
3. Set boundary for the drill-down map
1) Set map boundary as China(Province). In the left window, drag the boundary and scroll the mouse to make the boundary be fully displayed and click Save as initial perspective.
4. Set data for the drill-down map
1) In tab Data, select Area > Drill Map and choose All levels are designated.
2) Set data for 1st layer
3) Set data for 2nd layer
5. Set data for Carousel Catalog Gear
6. Link the 2 components
1) Add a hyperlink for map area and the hyperlink type is Current Form Object. After setting this hyperlink, the displayed area in the map can be used to control data in other charts.
2) Set the hyperlink. Set the Form Object as chart1, which is the id of Carousel Catalog Gear (this id varies for different situations). Click [+] to add a parameter passing rule. The parameter that is controled is named region, and this is used to control the dataset other chart. The value passed to region is Area Name and you can choose it by clicking .
3) If you only set the hyperlink for map area, the data of Carousel Catalog Gear cannot change back for all provinces when you click China(Province) in the drill-down directory. Therefore, you need to add a hyperlink for the drill-down directory in the same way.
Note 1: If the two components are cell/floating elements in a cpt template, you shoud change the hyperlink type to Hyperlink: Linkage Cell or Hyperlink: Linkage Floating Elements.
Note 2: Using Dynamic Parameters can also realize component linkage, however, this type of hyperlink will refresh the whole report each time you change the drill-down level. In other words, you will see that the Scene and other charts restart each time you change the drill-down level, and this harms the visual effects.
7. Preview the result
You will get the effect as show at the beginning.
8. Mechanism
1) When the map displays data for all provinces, the area name is China(Province) as indicated by the drill-down directory. Since this value is passed to parameter region, it helps to filter provinces with top 5 sales in dataset other chart.
2) When the map is drilled down to Jiangsu, the area name changes to Jiangsu either. Similarly, by passing the value to parameter region, cities with top 5 sales become the result of dataset other chart.
3) The two area name China(Province) and Jiangsu can be known in advance by checking the Geographic Information in the Decision-making Platform.
Previous：ECharts Graph Referencing Template Dataset
