Use HTML5 to draw a map

HTML5 has now become another focus of mobile development. There have been many discussions about native apps, Web apps, and hybrid apps. In the original brilliant flash, Adobe announced that it would abandon the development of the mobile version and turn to support HTML5 with greater strength. Although canvas in HTML5 can replace Flash in the future, I personally think it is not optimistic. Let's talk about a few things.

Nearly a decade ago, we saw that flash K (an organization was later extinct) had been working on a flash-based pipe network system. At that time, we felt that it was cool to use flash as a map engine.

Later, I thought SVG was good, and I had a little bit of a comparison with GML, but SVG is still not a part of HTML5, and no popular application has been made with SVG for so many years, although SVG looks powerful, it supports hot spots and embedded JS, and many browsers also provide good support for SVG. (I first saw SVG as a map. I should have mentioned it in my blog in, but at that time, tile maps should be in the state of hard work)

I started to study the subway map of Baidu last night. It was made in flash and vectorized. It was still quite beautiful and I always liked it, however, mobile devices are basically unavailable (not supported by flash or poor support ). There are two intentions to study this. One is to take it offline so that other websites can use it. The other is to look at their data directly. After all, it is still quite tiring to do data by yourself. Now the result is that the local display is basically OK, and some functions are unavailable (for example, the path calculation must be supported by the server, and it is found that the subway path calculation is actually a part of Baidu map, subway after calculationProgramParse the obtained JSON data. Maybe the subway transfer is also part of Baidu's walking navigation algorithm. I am stuck in the shell that the Js of the Subway cannot get JSON and parse, do not know whether it has a certain relationship with cross-origin ). In the subway data section, we can see that the data is a collection of coordinate points in a two-dimensional plane. We are going to export the data to see if it can be directly mapped.

Today, I spent a little time simply browsing the canvas chapter in HTML5. Although there are a lot of functions, it seems similar to the drawing tool, which reminds me of Mapinfo, what to draw a line, screen, circle, draw an arc, fill the color, set the width and color of the border, and so on. I am thinking: If you use HTML5 to draw a map, it is not only to draw the map once (to obtain the Coordinate Control Point), but also to implement the map through JS language. OMG, I thought it was a little big. Was Flash so troublesome? Even if Flash is so troublesome, there is at least a visual editing environment. Does HTML5 drawing have a visual editing environment? (Maybe I haven't found it yet ). In addition, there are indeed many flash problems, such as CPU usage and power consumption, so does HTML5 canvas not have this problem?

When I searched for "HTML5 canvas map", I saw two maps, one world map and the other United States map, all of which were drawn using html5. I suddenly felt that I wanted to draw a map using html5, so I studied this open-source HTML5 map in the United States, but after a simple look, I felt afraid, because: the map in the United States is beautiful, but how did the series of coordinate points on the plane come from? Of course, there are tools, but I think it would be so hard to do this (see his map. JS files, with a total of nearly 1300 lines, account for half of the map data ). Interested friends to see it: http://dougx.net/map/usmap.html

However, since the HTML5 trend is so great, HTML5 will surely be brilliant in the future. However, we can conclude that we can use HTML5 to draw maps before there is a good tool, it is a very troublesome thing, not to mention making HTML5 graphics into an engine, so as to implement operations such as Zoom-in, zoom-out, translation, and hotspot event response. I am very pleased to see a giant HTML5 website. The animation effect is the same as that of flash. Visit http://www.ro.me /. (Although it is an HTML5 Animation Website with great performance, the project is actually quite large. Looking at the source file, we found that a page has loaded more than 90 functional JavaScript, and drawing JS is also a dazzling coordinate series, check whether this file will scare you)

Summary:

1. It is not easy to do things

2. Tools (or frameworks or engines, such as the openlayers engine and jquery framework) are very useful.

3. Availability and usability are critical.

Finally, I would like to ask you: Will you use HTML5 to draw a map?