Baidu map tutorial 6 (reproduced from Baidu)

Map Layer

1. 1. Concept of map layers
2. 2. add and remove layers
3. 3. Custom Layers

Map layer concept

A map can contain one or more layers. Each layer is composed of several blocks at each level, covering the whole surface of the earth. For example, you can see that the map display of the street, interest point, school, Park, and other content is a layer, and the display of traffic flow is also achieved through the layer.

Currently, Baidu map provides the following layers:

Trafficlayer:Traffic flow layer.

Add and remove layers

You can use map. addtilelayer to add layers to a map. For example, the following code shows the traffic flow in Beijing.

VaR map = new bmap. map ("Container"); // create a map instance var point = new bmap. point (116.404, 39.915); // create Point Coordinate Map. centerandzoom (point, 15); // initialize the map and set the central point coordinates and map Level VAR traffic = new bmap. trafficlayer (); // create a map of the traffic layer instance. addtilelayer (Traffic); // Add the layer to the map

To remove a layer from a map, call map. removetilelayer.

Map. removetilelayer (Traffic); // remove the Layer

Custom layer map coordinate system

Before using a custom layer, you need to understand the map coordinate system of Baidu map. Baidu map coordinate system involves:

• Longitude and latitude Spherical Coordinate System
• Mocato plane coordinate system
• Image block number system

Longitude and latitude is a spherical coordinate system that defines space on the Earth using the sphere of three-dimensional space. It can mark any location on the earth. The longitude line at the original site of the London Greenwich Mean observatory is a zero-degree longitude line, with a longitude line of 180 degrees to the east and west. The equator is a zero-degree weft. The Weft in the north of the equator is called the north latitude and the south latitude. In Baidu map, longitude and latitude are marked with positive numbers, longitude and latitude are marked with negative numbers. For example, if the location in Beijing is about 39.9 degrees north latitude and 116.4 degrees east longitude, the longitude is 116.6 degrees and the latitude is 39.9 degrees. In Baidu map, the longitude is used to the front and the latitude is behind, for example:

VaR point = new bmap. Point (116.404, 39.915); // create the coordinate of the vertex. the longitude is in the front and the latitude is in the back.

Baidu map is displayed on a plane. Therefore, in the internal system of the map, you must convert the spherical coordinate to the plane coordinate. This conversion process is called projection. Baidu map uses Mercato projection. As shown in mokto plane coordinate, the point of the plane coordinate system is the same as that of the longitude and latitude coordinate system.

Baidu map divides the whole map into several map blocks at each level, and the whole map block is integrated by the numbering system to display the complete map. When a map is dragged or its level changes, the map API calculates the number of the map blocks to be displayed in the current field of view based on the plane coordinates.

Shows the Baidu map block numbering rules:

The block number in the upper right direction starting from the origin of the plane coordinate is 0, 0, and so on. At the lowest scaling level (level 1), the whole earth consists of four blocks. As the level increases, the number of map blocks used increases.

Define image fetch rules

You can use tilelayer to customize layers. The gettilesurl method of the tilelayer instance needs to be implemented to tell the API to obtain the image rules. Parameters of the gettilesurl method include tilecoord and zoom. tilecoord indicates the number of the graph block and zoom indicates the level of the graph block, this method is automatically called whenever a map needs to display blocks at a specific level and provides these two parameters. The user needs to inform the address of the graph block corresponding to the API's specific number and level, so that the API can display the custom layer normally.

Add and remove custom Layers

The following code displays a simple transparent stacked layer on all scaling levels of each graph block, and uses floating red water drops to represent the outline of the graph block.

VaR map = new bmap. map ("Container"); // create a map instance var point = new bmap. point (116.404, 39.915); // create Point Coordinate Map. centerandzoom (point, 15); // initialize the map and set the central point coordinates and map Level VAR tilelayer = new bmap. tilelayer (); // creates a map layer instance tilelayer. gettilesurl = function () {// set the block path return "layer.gif" ;}; map. addtilelayer (tilelayer); // Add the layer to the map