2

As the needs of customers are becoming more and more "variable", Grape, which is doing large-screen design recently, is in trouble. The recent demand from customers is to add a "route map" display function and data analysis to the BI tool. Not only that, this "route map" also has both practical functions and beautiful dynamic effects, a typical "necessary and necessary" series. But this is a little more difficult for our designer grapes. It is not difficult to display static pictures, but it is indeed difficult to make the map move. So we split the problem into two parts to solve this problem. First, we need a route map tool. Production and display of the "Route Map" tool First, we need to integrate the map materials and map animations in our hands. Let us first analyze the main application scenarios of "route map": (1) Intra-regional route map, such as: factory inspection route map, vehicle driving route map and other application scenarios of trajectory maps. (2) Point information in the area: for example: the point mark of the safety door in the factory, the location of the camera and other punctuation information.

图片

When it comes to image processing, we should first think of using SVG. After converting the image to SVG, the corresponding points are obtained from the coordinates of the image, and the information such as the route is displayed according to the corresponding position. As the saying goes, "There is no life problem that cannot be solved by code. If there is, write two pieces of code." (The final tool has been placed at the end of the article, everyone can pick it up by yourself) After that, we will disassemble it from the function to realize the needs of the map. The plug-ins include: drawing, taking points, setting routes and other functions. In the early custom map background, the map background needs to be an image in SVG format, which is convenient for obtaining coordinates and ensuring consistency under any resolution. If you need to find the image and manually convert it to SVG format every time, it will be very complicated. We use this step as one of the functions of the map tool. In Paint, we can convert the target image to SVG and set the area. If you need to use the linkage area in the later stage, try to use drawing to solve it. The usage method is similar to the custom map in Wyn.

图片

Obtaining the "coordinate points" of the displayed data When we define a "route map", we often need to mark some key data in the map, such as the location of the device, the number of people in the location, the number of parking spaces, etc. In order to ensure the key data of the custom map To be able to display the precise location on the map, we have provided you with a map coordinate point acquisition tool, which can be used for business data storage. The function of coordinate picking is mainly to obtain the coordinates in the custom map, provide the function of displaying the position later, and have functions such as setting and preview.

图片

The function of customizing the route is the core and most eye-catching part of the route map, that is, we need to define the route and direction of the inspection. Many times, this function is used for the inspection of the park, or the inspection of the large area map and so on. In many cases, we need to specify specific inspection routes according to our own business, so BI tools provide inspection routes to draw maps. Link the current route to realize route drawing. The route set can be previewed.

图片

Final tool display:

图片

The specific tools have been placed at the end of the article for students to pick up and use. Now that the tools are available, how to add a "route map" to BI for data analysis? Using the route map for data analysis tools in BI is ready, the next step is how to use the route map for data analysis in BI.
1. Download and install BI analysis tools
2. Data preparation Find a flat picture required in the project, because the file format required in this plugin is SVG, so for the first step, we need to use the above tools to convert the picture to SVG format.

Steps:

① Convert pictures to SVG content

图片

②Get the punctuation and record the punctuation information in the data table

图片

③Get directions

图片

④Organize the data sheet

图片

3. Plug-in operation:

(1) Select the plugin

图片

(2) Technical setting map address: SVG code content can be placed here, or a URL address can be placed. Custom route: Here you can set a fixed route and fill in according to the content. Other content can be operated by yourself to see the effect.

(3) Binding data Binding and fixing route and coordinate information according to requirements

图片

After setting, you can see the result of motion trajectory and punctuation information.

图片

(4) Route attribute settings

图片

Here, we can set the displayed icon, size, color, etc. for the mobile icon in the route. It is also possible to implement personalized settings according to different numerical classifications. At present, the corresponding classification conditions in the plug-in are judged according to the classification value. It can be seen that different effects are displayed according to different settings.

图片

(5) Coordinate point setting:

图片

The function is similar to the route setting, you can try it.
(6) Label setting, guide line setting

图片

Through this function, the content displayed on our entire page can be enriched.

图片

Here we have realized the use of map routes for data analysis in BI.
Tool Experience Tool Site: http://svg.sxtrips.com/
Data package: https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=140403
Experience more industry online demos: https://www.grapecity.com.cn/solutions/wyn/demo


葡萄城技术团队
2.7k 声望29.4k 粉丝

葡萄城是专业的软件开发技术和低代码平台提供商,聚焦软件开发技术,以“赋能开发者”为使命,致力于通过表格控件、低代码和BI等各类软件开发工具和服务,一站式满足开发者需求,帮助企业提升开发效率并创新开发模式。