Baidu map API explanation-custom map types

Today'sArticleThis section describes how to use the map API to create a custom map.

Baidu map API currently supports two map types by default: Common and 3D maps, which are represented by constant bmap_normal_map and bmap_perspective_map respectively, in version 1.2, these two constants are actually examples of maptype objects. Of course, developers can also instantiate a maptype to implement a custom map.

Use of graph cutting tool

We start with the use of the graph cutting tool, and then analyzeCodeTo learn more about the custom map method. The graph cutting tool is placed on GitHub. The specific address is https://github.com/jiazheng/baidumaptilecutter. when you enter it, download tilecutter.exe:

Note: This tool is developed based on the. NET platform. Therefore, A. NET Framework 4 or later is required.

After this EXE is started, this interface will appear:

The first thing we need to do is to select an image as the map basemap (the image is downloaded from here ):

After clicking Next, you need to set the output directory. Here we select the desktop directly:

Next, set the output type. We use the default value, that is, the block and related code are generated by the tool:

We use the default value for coordinate settings, that is, the position of the center of the image. Because we create an independent map type, set the central point to 0 and 0.

Level range setting: We use custom settings to set the range to 5 to 10, and the source image to 10th, so that the tools of Level 5 to 9 will automatically narrow down the image. It is recommended that the level of the source image be the same as the maximum level. Otherwise, the image will be blurred when it is higher than the level of the source image (because the tool will enlarge the image ).

Set the map type name:

Everything is ready. Finally, you can confirm that all information is correct. Then you can click "start to cut the graph.

Finished:

At this time, we will find an index.html folder and a tiles folder on the table. Open index.html and you will see the result:

Source codeAnalysis

Now let's take a look at the code section of this page:

 <!  Doctype html  > 
 <  Html  > 
 < Head  > 
 <  Title  > Custom map type </  Title  > 
 <  Meta  HTTP-equiv  = "Content-Type"  Content  = "Text/html; charsets = UTF-8"     /> 
 <  Script  Type  = "Text/JavaScript"  SRC  = "Http://api.map.baidu.com/api? V = 1.2"  > </  Script  > 
 </  Head  > 
 <  Body  > 
<  Div  ID  = "Map"  Style  = "Width: 800px; Height: 540px"  > </  Div  > 
 <  Script  Type  = "Text/JavaScript"  >  
  VaR Tilelayer  =     New  Bmap. tilelayer ();
Tilelayer. gettilesurl  =     Function  (Tilecoord, zoom ){
  VaR  X =  Tilecoord. X;
  VaR  Y  =  Tilecoord. Y;
  Return     '  Tiles/  '    +  Zoom  +     '  /Tile  '     +  X  +    '  _  '     +  Y  +     '  . PNG  '  ;
}
 VaR  Mymap  =     New  Bmap. maptype (  '  Mymap  '  , Tilelayer, {minzoom:  5 , Maxzoom:  10  });
  VaR  Map  =     New  Bmap. Map (  '  Map  ' , {Maptype: mymap });
Map. addcontrol (  New  Bmap. navigationcontrol ());
Map. centerandzoom (  New  Bmap. Point (  0  ,  0  ),  10  );
 </  Script  > 
 </  Body  > 
 </  Html  > 

The code first creates a tilelayer instance, which represents a layer, and then implements the gettilesurl method to provide the image path. The gettilesurl method is called by the API when paving a graph. During the call, the image block number and level information are provided, the developer must return the correct image address based on the block number and level information (for details about coordinates and block numbers, refer to this Article ).

The following code creates a maptype instance. The first parameter is the map type name, and the second parameter is the layer corresponding to the map type. Here we will directly pass the tilelayer instance we created earlier, the following are some optional configuration parameters. The minimum and maximum levels are specified here.

The following code is simple: create a map instance and specify the map type as mymap by configuring parameters.

If you have images of the Moon or Mars, creating a map of the Moon or Mars is not difficult.