Introduction to Hand-drawn Maps

Hand-drawn maps, as the name implies, are more ornamental and lively than ordinary maps. By drawing out specific locations, they are both practical and commemorative, and more watchable. There are lots of hand-drawn paper maps in tourist attractions. Like this:

Pre-development preparation

1. Hand-drawn map We are looking for is a dedicated team to do hand-drawn map, because this is not print the map, is should be displayed on the page, and above have the corresponding point on the map tag, so let them on the basis of tencent map one to one in the above drawing, points, roads, rivers to alignment, as far as possible or late in the process of development, The offset is going to be huge. After the map was developed, a PNG image was given to us, and we used tile map cutting tool to cut the image. Here is the introduction of Tencent map to tile map interpretation: Map will show different accuracy when zoom in geographic content, in order to load consideration, each a complete map zoom level, will be split into several small text form, when displayed on-demand loaded, put the map, the greater the wide area of the greater, is cut into small pieces, the more, the small pieces called map tiles.

2. After loading the tile map, each tile will be numbered after slicing the picture with the slicing tool. Generally, there will be three variables XYZ, taking Tencent map as an example, the upper left corner is the origin, X represents the column number, Y represents the row number and Z represents the zoom level. Learn more about Tile maps here

3. Wechat applet load by webView, remember to set a timestamp for webview oh ~~

Adopted scheme

1. We used Tencent Map JavaScript API GL at the beginning, because there is a custom grid layer API in it, which is very convenient to use

getTileUrl: function (x, y, Z) {/ / Mosaic tiles URL var URL = 'http://localhost/javascript_gl/sample/img/tilelayer/' + z + '/' + + '_' x + y + '. PNG '; return url; }, tileSize: 256, // Tile pixel size minZoom: 14, // display the minimum level of the custom tile maxZoom: 16, // display the maximum level of the custom tile visible: true, // whether zIndex is visible: Map: map, // Set which map instance the layer is displayed in});Copy the code

However, there is a problem that in the case of too many points in the project, each time you switch different points, you need to clear the last point, and then there is a problem, the last point will not be cleared after multiple switching After consulting customer service, the reply will be:The above problems are normal on THE PC side, so I think there is a problem with my small program. Under the condition of too many points and occupying too much memory, there may be a problem in the small program. Finally, I have to change a violent method, by setting v-if on the map component, Re-render the map every time you switch points, which brings a new problem that as the number of switches increases, the map will also be re-rendered more times, which will cause the webView to reload (I guess this is also due to the small program village occupancy is too large), the experience is also very unfriendly!

Finally gave up the use of Tencent map, choseleaflet.jsFirstly, Leaflet is a modern and open source JavaScript library developed for building interactive maps suitable for mobile devices. The code is only 33 KB, but it does most of the work for developing online maps, and the API documentation is relatively easy, except that it doesn’t come in Chinese, but that’s no big deal. The experience is much better after you use it

conclusion

Leaflet.js version you can go here to see: zjh_leon.giee. IO /leaflet_map… The project itself is not difficult, but it may take time to understand this new thing for the first time. If some students want to do similar mobile terminal projects, we recommend using Leaflet. js, which has good experience, excellent performance and few pits.