map layer

Map layer concept

A map can contain one or more layers. Each layer is composed of several tiles at each level. They cover the entire surface of the Earth. For example, the map display you see including streets, points of interest, schools, parks, etc. is a layer. In addition, the display of traffic flow is also realized through layers.

The layers currently provided by Baidu Maps include:

TrafficLayer: Traffic flow layer.

Add and remove layers

You can add layers to the map through the map.addTileLayer method. For example, the following code will display the traffic flow in Beijing.

var map = new BMap.Map("l-map");         // 创建地图实例      
var point = new BMap.Point(116.404, 39.915);  // 创建点坐标     
map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别     
var traffic = new BMap.TrafficLayer();        // 创建交通流量图层实例      
map.addTileLayer(traffic);                    // 将图层添加到地图上

To remove a layer from the map, you need to call the map.removeTileLayer method.

map.removeTileLayer(traffic);                // 将图层移除

Custom layer

Map coordinate system

Before using custom layers, you need to understand the map coordinate system of Baidu Map. The Baidu Map coordinate system involves:

▪ Latitude and longitude spherical coordinate system

▪ Mercator Plane Coordinate System

▪ Tile Numbering System

Latitude and longitude is a spherical surface that uses a three-dimensional spherical surface to define space on the earth. A coordinate system that can mark any location on the earth. The longitude passing through the original site of the Greenwich Observatory in London is the 0 degree longitude, and it is divided into 180 degrees east and west from the 0 degree longitude. The equator is 0 degrees latitude, the latitudes north of the equator are called northern latitudes, and those south of the equator are called southern latitudes. In Baidu Maps, east longitude and north latitude are represented by positive numbers, while west longitude and south latitude are represented by negative numbers. For example, the location of Beijing is approximately 39.9 degrees north latitude and 116.4 degrees east longitude, so the numerical representation is longitude 116.6 and latitude 39.9. In Baidu maps, it is customary to put longitude first and latitude last, for example:

var point = new BMap.Point(116.404, 39.915);  // 创建点坐标，经度在前，纬度在后

Since the Baidu map is displayed on a plane, the spherical coordinates need to be converted into plane coordinates in the internal map system. This conversion process is called projection. Baidu Maps uses the Mercator projection. The Mercator plane coordinates are shown in the figure below. The plane coordinates coincide with the origin of the latitude and longitude coordinate system.

Baidu Map divides the entire map into several tiles at each level, and integrates the entire tiles together through a numbering system to display a complete map. When the map is dragged or the level changes, the map API will calculate the number of the tile that needs to be displayed in the current field of view based on the plane coordinates. The tile numbering rules of Baidu map are as shown in the figure below:

#The tiles in the upper right direction starting from the plane coordinate origin are numbered 0,0, and so on. At the lowest zoom level (Level 1), the entire Earth consists of 4 tiles. As the level increases, the number of tiles used in the map also increases.

Define image taking rules

Developers can implement custom layers through the TileLayer class. Among them, the getTilesUrl method of the TileLayer instance needs to be implemented to tell the API the drawing rules. The parameters of the getTilesUrl method include tileCoord and zoom, where tileCoord is the numbering information of the tile, and zoom is the level of the tile. This method is automatically called whenever the map needs to display tiles at a specific location at a specific level, and these two are provided. parameters. Users need to inform the API of the address of the tile corresponding to a 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 overlay on each tile at all zoom levels, using a small floating red The water droplets represent the outline of the tiles.

var map = new BMap.Map("l-map");          // 创建地图实例     
var point = new BMap.Point(116.404, 39.915);  // 创建点坐标     
map.centerAndZoom(point,15);                  // 初始化地图，设置中心点坐标和地图级别     
var tilelayer = new BMap.TileLayer();         // 创建地图层实例    
tilelayer.getTilesUrl=function(){             // 设置图块路径     
          return "layer.gif";      
};      
map.addTileLayer(tilelayer);                // 将图层添加到地图上