Baidu Map API: Use the tile generation tool to customize the background image

Refer to the yogurt Little sister's blog "Baidu Map API" How to make a Map of Warcraft!! --cs map is also available, ha-ha (http://www.cnblogs.com/milkmap/archive/2011/05/27/2060021.html).

and blog " Baidu map: The new tile generation tool came" link:http://blog.csdn.net/bq_cui/article/details/9396703, the development of the tool: Http://blog.csdn.net /bq_cui/article/details/47372005.

Preparation of Map making

In fact, you just need to prepare some maps of the tile map, you can.

Using the slicing tool, put a complete picture (preferably larger, clearer), cut into small pieces, and use the Tilecutter tool.

Second, understand the Baidu Map API map Layer Interface

constructor function	Describe
TileLayer([opts:TileLayerOptions])	Create an instance of a map layer.

Interface Address: Http://openapi.baidu.com/map/classReference.html#anchor6_TileLayer

Using this interface, you can spread the tiled map tiles on the original Baidu map.

VarTilelayer= NewBmap.tilelayer ();
Tilelayer.gettilesurl= function(Tilecoord, zoom) {
VarX=tilecoord.x;
VarY=Tilecoord.y;
VarUrl= ‘images/tiles/‘ + zoom + '

Third, limit the display level of the map

If you only cut a level 1-4 map, your warcraft map should only show level 1-4.

So, make a limit to the map's display. Look at the first line of the source code below.

You also need to specify a custom map type to see the second line of the source code.

The third line, add the Fishbone control, will only show level 1-4 yo ~ because the first line controls the Minzoom and Maxzoom.

VarMyMap= new Bmap.maptype (mymap " Tilelayer, {minzoom: 14});
var map = new Bmap.map ( container " Map.addcontrol (new Bmap.navigationcontrol ());

----------------------------------------------------------------------------------

I used it.

1. Use the Tilecutter tool to cut the original picture to level 1-5, with the original image at level 2.

2. Direct modification of the offline API JS

Instead: Uc.gettilesurl=function (a,b,c) {var x=a.x,y=a.y,e=1,z=b;return "tiles/" +z+ "/" +x+ "/tile" +x+ "_" +y+ ". png" ;};

3. Replace Tile Map Folder images/tiles/xxx

Baidu Map API: Use the tile generation tool to customize the background image