Overview
Version
Report Server Version | Functional Change |
11.0.15 | Added Map Data > Custom GIS layer, allowing you to customize maximum/minimum zoom levels with the parameters maxZoom/minZoom. |
Application Scenarios
Currently, the maximum zoom level of the GIS layer in FineReport is 18, but in some scenarios, you may need to set the zoom levels of layers above 18.
At this time, Custom GIS layers can be configured through Map Data, and the parameter maxZoom can be added to the custom URL to define the maximum zoom level. Then, you can adjust the zoom level through the map zoom level interface in the designer.
Note:
1. You can add the URL parameter to configure tilelayer/WMS/WMTS layers, but AMap layer is not supported.
2. You need to confirm with the map service provider that whether the layer itself supports corresponding zoom level.
3. Mobile devices are not supported.
Example
Creating a Template
Click File > New Dashboard in the top left corner of the designer to create a blank template, and drag a map into the body.
Configuring the Map
Click Server > Map Data in the top toolbar of the designer, and select Custom GIS layer. Take the tilelayer > Blue layer as an example. Add the parameter ?maxZoom=25 in URL to define the maximum zoom level of the layer as 25. Then Click Save.
Setting the Map
1. Setting the GIS Layer
Go back to the designer, double-click the map to go to the editing mode, and set GIS Layer as Custom > Blue.
2. Setting Initialization Event
After modifying the map configuration, the Zoom Level setting in Basic does not change. For example, the maximum zoom level for the Blue layer in this example is 16. After setting the maxZoom parameter, the maximum zoom level in the designer is still 16.
At this time, it is necessary to adjust the zoom level through JS events.
Click the map, add an After Initialization event in the Events section, with the following JavaScript code:
Note: If the map is in editing mode, you need to select other components first, and then select the map to enter Events setting page.
setTimeout(function() {
var chart = FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0); chart.setMapZoom({ zoomLevel: 20 });
}, 1000);
Note: In a general report, you need to add a Load ending event in Template > Web Attributes > Pagination Preview, and replace chart0 in the JavaScript code with the cell where the map is located.
Demonstration
The maximum zoom level supported by the Blue layer used in this example is only 16. Although the example in this article can successfully achieve a map zoom level of 20, during preview, no geographical information can be seen on the layer after zooming in, as the map resources beyond level 16 cannot be obtained. Therefore, no preview effects and template downloads are provided in this article. If you have demands in larger zoom level, you can refer to the method in this article to achieve corresponding effects.
Previous：Map Automatic Refresh
