1, Foreword
The outline map is also called administrative division. The outline map here refers to the regional outline map of Baidu map, not the special outline map for echart mentioned in the previous article. The outline map of Baidu map is an irregular polygonal area, but there are usually many coordinate points in this area. For example, the regional outline of a county or city can get a series of coordinate points, It is mainly used to highlight an area. For example, this area can be highlighted in color, and the color, thickness and transparency of lines can be set.
The online contour map can directly call the built-in boundary Get method. You only need to specify the name of the region, such as Shanghai. You can get all the coordinate point sets of the corresponding region in the callback function, which is very convenient to use. This function is built in the map. The algorithm is not found in the offline map class. The specific execution rules may be stored on the server and are always updated. For example, the administrative regions of the country are not invariable and will change.
One thing to note about the outline map is that the outline map of each region may not be a region. There are enclaves or multiple large regions in many places. For example, Shanghai has most of Chongming Island in addition to the Shanghai base camp. Therefore, when drawing, we must pay attention to the collection of multiple coordinate point regions.
2, Functional features
- Both online map and offline map modes are supported.
- It also supports webkit kernel, webengine kernel, minilink kernel and IE kernel.
- Support setting multiple annotation points, including name, address, longitude and latitude.
- You can set whether the map can be clicked, dragged and zoomed with the mouse wheel.
- You can set the protocol version, secret key, theme style, central coordinate, central city, geocoding location, etc.
- You can set the zoom scale and level of the map, and the visibility of thumbnails, scale bars, road information and other controls.
- Support map interaction, such as mouse click to obtain the longitude and latitude of the corresponding position.
- It supports route query, and can set the starting point location, terminal location, route mode, route mode and route scheme (minimum time, minimum transfer, minimum walking, no subway, minimum distance and avoiding Expressway).
- It can display point, line and surface tools, and can directly draw lines, points, rectangles, circles, etc. on the map.
- You can set the administrative division, specify the drawing layer of a certain urban area, and automatically output the boundary points of the administrative division to the js file for the offline map.
- Multiple covers can be added statically or dynamically. Support point, polyline, polygon, rectangle, circle, arc, point aggregation, etc.
- Function interface is provided to process longitude and latitude resolution into address and address resolution into longitude and latitude coordinates.
- The provided demo can directly select points to perform corresponding processing, such as route query.
- You can get the point coordinate information set queried by the route, such as for robot coordinate navigation.
- It encapsulates rich functions, such as deleting specified points and all points, deleting specified covers and all covers, etc.
- The label point pop-up box information can be customized in standard html format.
- Mark point click event optional 0 - do not process 1 - pop up box 2 - send signal.
- Annotation points can be animated 0 - do not handle 1 - jump 2 - fall
- Label points can be set to local picture files, etc.
- The function interface is friendly and unified, simple and convenient to use, just one class.
- Support js dynamic interactive adding points, deleting points, clearing points and resetting points without refreshing the page.
- Support any Qt version, any system and any compiler.
3, Experience address
- Experience address: https://pan.baidu.com/s/1ZxG-oyUKe286LPMPxOrO2A Extraction code: o05q file name: bin_map.zip
- Domestic sites: https://gitee.com/feiyangqingyun
- International sites: https://github.com/feiyangqingyun
- Personal homepage: https://blog.csdn.net/feiyangqingyun
- Zhihu homepage: https://www.zhihu.com/people/feiyangqingyun/
4, Renderings
5, Related code
void MapBaiDu::addBoundary(QStringList &list)
{
//Define an array to store draggable boundary points
//It is defined here and called in the getBoundary function
list << QString(" var polygons = [];");
//Dynamically add administrative divisions
list << QString(" function addBoundary(cityname, callfun, edit, color, weight, opacity) {");
//Clear map overlay
list << QString(" map.clearOverlays();");
//The offline map is loaded directly through the file. The js file corresponding to cityname has been introduced above
//Draw irregular shapes directly by reading js array data
if (mapLocal) {
QString property = getOverlayProperty();
list << QString(" var pointArray = [];");
list << QString(" var count = boundarys.length;");
list << QString(" for (var i = 0; i < count; ++i) {");
list << QString(" var ply = new %1.Polygon(boundarys[i].points, %2);").arg(mapFlag).arg(property);
list << QString(" map.addOverlay(ply);");
list << QString(" pointArray = pointArray.concat(ply.getPath());");
list << QString(" }");
//Adjusting vision adaptive administrative division region
list << QString(" map.setViewport(pointArray);");
list << QString(" }");
return;
}
//Clears previously stored boundary point array data
list << QString(" polygons = [];");
//Instantiate administrative division object
list << QString(" var bdary = new %1.Boundary();").arg(mapFlag);
//Call the built-in method to get the point collection of the city
list << QString(" bdary.get(cityname, function(rs) {");
//How many points are there in the administrative region
list << QString(" var datas = rs.boundaries;");
list << QString(" var count = datas.length;");
list << QString(" if (count <= 0) {");
list << QString(" return;");
list << QString(" }");
list << QString(" var pointsAll = [];");
list << QString(" var pointArray = [];");
list << QString(" for (var i = 0; i < count; ++i) {");
//Create polygon cover
list << QString(" var property = getProperty(color, weight, opacity);");
//Create polygon cover
list << QString(" var ply = new %1.Polygon(datas[i], property);").arg(mapFlag);
//Fetch point set
list << QString(" var pts = ply.getPath();");
list << QString(" var points = [];");
list << QString(" for (var j = 0; j < pts.length; ++j) {");
list << QString(" var point = pts[j].lng + ',' + pts[j].lat;");
list << QString(" points.push(point);");
list << QString(" }");
list << QString(" pointsAll.push(points.join(';'));");
//The range can be edited. After it is turned on, you can drag the boundary, and then re output the boundary point set
list << QString(" if (edit) {");
list << QString(" ply.enableEditing();");
list << QString(" }");
//Added to the polygon array to get the adjusted boundary array
list << QString(" polygons.push(ply);");
//Add cover
list << QString(" map.addOverlay(ply);");
list << QString(" pointArray = pointArray.concat(pts);");
list << QString(" }");
//Adjusting vision adaptive administrative division region
list << QString(" map.setViewport(pointArray);");
//Pop up + debug output + callback output boundary coordinate point set of administrative division
//list << QString(" alert(count);");
//list << QString(" alert(datas);");
//list << QString(" console.log(datas);");
list << QString(" if (callfun) {");
list << QString(" receiveData('boundary', pointsAll.join('|'));");
list << QString(" }");
list << QString(" });");
list << QString(" }");
}