HTML5 Canvas: a high-performance visual GIS map development standard in Web browsers

Introduction: traditional Web GIS methods
The traditional method of drawing a map in a tile format (PNG or JPEG image) is usually to transfer geospatial data over the network today. This is done by producing tile images on the server and providing them to the map client. This technology has been used by many Web Map providers and is suitable for creating nice-looking maps, such as OpenStreetMap, Google, and Bing Maps.

This can be well used for Web map plotting, but what about GIS? Generally, when creating a GIS project, you need to modify data, rearrange layers, adjust symbols and labels, edit and create functions, and perform geographic processing and analysis, the results of these operations need to be instantly implemented and the traditional method of server-side tile rendering cannot achieve such cutting. Creating a complete map tile cache usually takes several hours or even days to complete. If you somehow forget to open the waterway layer label before the tile cache is generated, you have to re-run the program for the rest of the week.

You may need to interact with map data, which is impossible if your data is used as a plane grating image. The map client has made some improvements. They can use Flash and Silverlight technologies, but the map tile technology is still the same and requires third-party plug-ins to draw your map.

Rendering vectors as Vectors
We all know that geospatial vector data includes three basic types: point, line, and polygon. In addition, each element has a series of data attributes. The disadvantage of traditional ing technology is that all the useful vector and attribute information is lost in the process of converting and rendering points, line and Polygon into raster tiled images.

Using vectors as vectors allows GIS to enable new possibilities on Web and mobile devices. Imagine how to interact with your data with a mouse: hover your mouse, click it, or double-click it. Imagine that a large number of elements are drawn through rapid and Low-latency, real-time dynamic changes to symbols. Imagine that in a browser, you will have complete GIS editing functions in the desktop GIS, such as topology modification and capturing.

What if we have a solution that may actually render vector data in its natural Vector Form? In fact, in many map clients, vectors can overwrite raster images, but they are not implemented in the real world, especially when you need to deal with millions, even thousands of elements. In order to achieve this capability, the existing map rendering engine will need a big change, especially at the backend. Of course, the same is true for the front end. Www.2cto.com

HTML5 Canvas
Over the past few years, we have witnessed incredible innovations and advances in Web browsers. Web browsers have become an important component and platform for many modern applications, along with the emergence of their cross-desktop, mobile devices, and tablet computers. In modern browsers, a series of brand new functions have emerged due to HTML5.

Among the many functions provided by the HTML5 standard, the key to improving GIS lies in the HTML5 Canvas. Canvas is basically a dynamic Bitmap (image) generated in the browser ). Vector rendering performance makes it so useful in GIS applications.

Vector as vector form, coupled with all the complex symbol systems and map rendering functions, transfer to the client (such as IE browser), so that the server only needs to provide original vector data and attribute data. This means that the map engine can respond more effectively. As mentioned above, This method requires a completely different policy on the server where map tiles are actually produced.

HTML5 Canvas tile vector map Engine
Based on its original tile vector map engine, GIS Cloud has created and implemented the world's first HTML5 vector map engine, which can generate vector map tiles in Flash format. It provides unprecedented performance. The original system has been applied to HTML5 Canvas and is now the main method that GIS Cloud provides all maps.

The core of the engine is a very fast server component, which can be quickly created from scratch to efficiently read geometric data and attribute data, and transmit them to the client in the form of optimized vector map tiles. On the map client, the vector map technology uses Leaflet (an excellent open source Javascript drawing client library developed by CloudMade) to visualize data.

Summary
What does HTML5 Canvas bring to GIS:

· A smooth user experience with map creation, whether on a desktop browser, mobile phone, or tablet

· Vector Rendering

· Ability to instantly render millions of Elements

· Quick rendering without pre-Cache maps

· Significantly reduce the bandwidth required by tiles

· Requires less storage space

· Maps are completely interactive: Click, hover, and style dynamic

· The symbols that are fully applicable on the client, which means it is easy to change the map style without reloading the layer.

· Out-of-the-box, Web browsers on all platforms adopt the HTML5 standard (desktop, IOS, Android, etc)

· Bring excellent background of real desktop GIS experience to users in Web browsers