I. Overview
1.1 Problem
Sometimes you want to set the map zoom level, after you select the corresponding level, the map layer can directly jump to that level. The effect is as follows:
1.2 Solution
You can set the center point of the map and the corresponding zoom level through the following interface, and set linkage through the hyperlink.
chart.setMapZoom({zoomLevel: 5, viewCenter: [110, 40]});
Note:
zoomlevel: the value range is generally 0-18. The larger the value, the higher level the layer, the more detailed the map displayed, and the smaller the range of latitude and longitude displayed.
viewCenter: center point, [longitude, latitude].
The zoom level setting is consistent with the zoom level supported by different map layer. For example, when the layer is Gaode, the zoom level is [3,18]; when there is no layer, the zoom level is [0,18].
This method does not support mobile terminals.
II. Example
2.1 General report
1) Data preparation
2) Add maps
Add a map to the cell and bind data to it. Two maps use the same data source and can be copied directly.
3) Add hyperlink
Select the map above, select Special Effect -> Interacion. Add a JavaScript hyperlink to the map, named 4 [118,32], zoom level: 4, center point: longitude 118, latitude 32:
var chart=FR.Chart.WebUtils.getChart("A21").getChartWithIndex(0);//Get Chart object in A21
chart.setMapZoom({zoomLevel:4, viewCenter: [118,32]});
//set zoomlevel to 4 and longitude&latitude of center
In the same way, add two other JavaScript hyperlinks and name them after their zoom level and the latitude, longitude of the center point.
4) Preview effect
2.2 Dashboard
1) Data preparation
2) Add drill maps
Two drill maps can be added.
The same data source is bound to them. Here is the test data, so the graded data only needs to be bound to the first level.
3) Add hyperlink
Select the map on the left, click special effects -> interaction, and add JavaScript hyperlinks under drill settings.
var chart=FR.Chart.WebUtils.getChart("chart1").getChartWithIndex(0);//Get chart1 object
chart.setMapZoom({zoomLevel:7, viewCenter: [120, 33]});
// Set zoomlevel and langitude&latitude of center point(Jiangsu Province)
Similarly, add two other hyperlinks:
4) Preview effect
