Custom Image as Map Border

Application Scenario

• You want to customize layers, for example, to divide areas as needed instead of using built-in layers.

• You want the map to display the sales volume of each store in a mall after you import the mall map into FineReport.

• You have an effect map and want to customize the area and parameters of it, for example, to create a mall map, a workshop map, or other maps, as shown in the following figure.

Implementation Method

You need to add a custom image type map border on the map configuration panel in the decision-making system. When designing the map, select Custom Image in the drop-down list of Map Border.

Customizing the Map Border

1. Enter the decision-making system, choose System Management > Map Configuration > Custom Image, select the custom image directory, click  to add a custom image, set the name of the custom map boundary as 2F Mall, and click OK, as shown in the following figure.

2. Select the created map border 2F Mall and click the Import Image button on the right to import a floor plan of the second floor of the shopping mall, as shown in the following figure.

Note:

Imported images will be resized automatically and can also be freely scaled by scrolling the mouse wheel.

3. Click the Rectangle icon to outline the area of each store, set the area name to the corresponding store name, and click Save in the upper right corner, as shown in the following figure.

Note:

If the area is in an irregular shape, you can click the Polygon icon for delineation.

4. The custom map border is created and the generated JSON file is saved to %FR_HOME%\webapps\webroot\WEB-INF\assets\map\image, as shown in the following figure.

Component Creation

Data Preparation

Create a built-in dataset market with 3 fields: store name, product, and brand, as shown in the following figure.

Chart Insertion

Merge required cells, insert a chart by choosing Map > Area Map, and clicking OK, and choose Custom Image > 2F Mall from the drop-down list of Map Border, as shown in the following figure.

Data Binding

Bind the data to the chart, as shown in the following figure.

Style Setting

1. Deselect Show Legend to hide the legend.

2. Select Use Label, select Area Name as Text, and click Format to customize the character format.

3. Select Series as Color Section, select Custom Combination as Color Scheme, and set Opacity to 100%.

4. Select Area Name and Value for Text in Prompt.

Effect Display

PC

Save the template and click Pagination Preview. The effect is shown in section "Application Scenario."

Mobile Terminal

The template can be previewed on both the DataAnalyst app and the HTML5 terminal. The following figure shows the effect.

For details, you can click to download the template Custom Mall Map.cpt.

File Placement Server Needing the Synchronized Geographic Files

If the generated custom image JSON file is copied to the server for use, the geographic files need to be synchronized in Map Configuration in the decision-making system. For more details, see Map Configuration Section 2.4.

Label and Prompt Hiding

After enabling the range legend, and if the label and prompt are not displayed as shown in the following figure, you need to modify the corresponding fields of the values to numeric type, or change the legend into a regular legend.

Image Size Limit

The size limit for uploading images is 2M, which is the default post size limit for Tomcat. You can set it to unlimited as needed.

Offline Use of Custom Images

In FineReport of versions 11.0.6 and later versions, the Custom Image layer requires the Internet connection to request resources from AMap API, otherwise the layer will not be displayed.

1. In an intranet environment, the white-listed domain names of AMap API with open standard styles can be used, including: webapi.amap.com, vdata.amap.com, restapi.amap.com.

2. In other intranet situations, you can install the Intranet Supporting Custom Maps plugin.

After installing the plugin, the page for the custom image function will be the same as that in version 11.0.5 and earlier, without supports to the new drawing tools added in version 11.0.6.

Note:

After installing the plugin, whether you are connected to the internet or not, you can call the plugin function to configure custom images. If the plugin is not installed, you can still use the current version's map configuration function normally.

• In FineReport 11.0.5 and Earlier Versions

• In FineReport 11.0.6 and Later Versions