Avalon.js Practice SVG Map Configuration Tool

The MVVM pattern, under a lot of complex interaction logic, has a great advantage. Now the relevant framework is also many, now the project uses the avalon.js, choose its reason, is the compatibility of consideration, of course, also to support the development of the domestic Daniel, as for performance, no actual test, dare not explain here.

Requirements: The first page of the project needs to display a map showing the number of classrooms deployed by the company in the area, the homepage can show the administrative center, the area name, add ★ focus on the city

Front Desk: page display uses the Raphael.js, the map information JS, converted into vml,svg (Baidu's Echart map is also good, but it does not have the county below the data, not adopted)

Question: Art sister out of all SVG pictures, how to convert SVG images into the necessary map information JS, became a problem. Art mm, but not JS. If you let the front end according to SVG collation, manual comparison of Trouble, the tool produced a

Design: JS file is mainly stored in the map information (

Originally designed to preserve the provincial and municipal level relations, provinces and cities have no use of the presentation form, resulting in a stronger coupling, expansion is more troublesome. Map information is present in a JS file, the first page loading is too slow.

Now designed to not care about provincial and municipal relations, can be configured, so that the configuration personnel want what look like. Each level of the map is returned by request, by returning which map has a map to determine whether it can enter the map or jump to the page.

）

Map configuration, Poke here. For demonstration convenience, the upload SVG file was changed to HTML5 file read, SVG file IE8 also not supported, so please ie10+, see the effect

Here is the map effect shown under configure, online address stamp here. The file is slightly larger, please wait patiently.

Operating instructions:

The left is the original SVG diagram, and the right is done in real time

Red dot for user drag custom, Admin center or ★ Config

Blue Squares for users to drag and drop the custom, adjust the text display position (by default, displayed above the administrative center)

Click on the SVG path or polygon image to configure the map area block (you can select a color value; You can configure multiple blocks to one region, a single region by default, and the original region by configuring the same region; can be configured to exist in the classroom, highlighted)

Click the SVG circle image to configure the Map Administration Center

　　

Avalon.js Practice SVG Map Configuration Tool