Baidu Gaode Map Administrative Region Boundary GeoJSON Data Acquisition and Drawing of Administrative Regions

highcharts provides map data packages: https://www.highcharts.com/docs/maps/map-collection

echart vector map or map drawing vector layer, where can GeoJSON be provided?

dataV provides data download, DataV.GeoAtlas geographical gadget series

These data also come from Amap. After looking at the API of Amap, you can actually get them directly.

Amap obtains map boundary data

Regional query to obtain boundary data

Administrative area query official document: Administrative area query-API documentation-Development Guide-Web Service API | Amap API

restapi.amap.com/v3/config/district?key=yourkey&keywords=Shandong&subdistrict=2&extensions=all

The returned polyline is coordinate boundary data. Use ; to separate the point coordinate array. Then use , to separate the coordinate array.

AMap.DistrictSearch plugin query

Search Service-Reference Manual-Map JS API | Amap API

let opts = {

// Set the optional values for displaying the number of lower-level administrative divisions: 0, 1, 2, 3 and other numbers

subdistricts: 2,

// base: does not return the administrative district boundary coordinate points; all: only returns the boundary value of the current query district, not the boundary value of the child node ; currently, the boundary value of the township/street level cannot be returned

extensions: 'all',

level: data.level

}

var district = new AMap.DistrictSearch(opts);

district.search('河北省', function (status, result) { result.districtList[0].boundaries})

Official demo

The obtained data needs to be converted to GeoJSON data by yourself, plug-in geojson - npm

var GeoJSON = require('geojson')
var data = [{name: 'Location A', category: 'Store', street: 'Market', lat: 39.984, lng: -75.343}]
var data2 = { name: 'Location A', category: 'Store', street: 'Market', lat: 39.984, lng: -75.343 }

GeoJSON.parse(data, {Point: ['lat', 'lng']})
GeoJSON.parse(data2, {Point: ['lat', 'lng'], include: ['name']})
var data3 = [
  {
    x: 0.5,
    y: 102.0,
    prop0: 'value0'
  },
  {
    line: [[102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]],
    prop0: 'value0',
    prop1: 0.0
  },
  {
    polygon: [
      [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0] ]
    ],
    prop0: 'value0',
    prop1: {"this": "that"}
  }
]
GeoJSON.parse(data3, {'Point': ['x', 'y'], 'LineString': 'line', 'Polygon': 'polygon'});

This method can only obtain the boundaries of the current administrative region and cannot obtain the boundaries of sub-regions.

Browse administrative divisions to obtain boundary data

DistrictExplorer (administrative division browsing) official documentation: Overview-Map JS API | Amap API

Feature is taken directly from GeoJSON. In AreaNode, both the parent region (ParentFeature) and the child region (SubFeature) can obtain map coordinate boundary data, but parentFeature is not in the standard GeoJSON format and needs to be converted by yourself.

//Create an instance
var districtExplorer = new DistrictExplorer({
  map: map //Associated map instance
})
var adcode = 100000 //National division code
districtExplorer.loadAreaNode(adcode, function (error, areaNode) {

  if (error) {
    console.error(error)
    areaNode.Feature 
    return
  }
  //Feature is taken directly from GeoJSON
  var subFeatures = areaNode.getSubFeatures()
  var parentFeature = areaNode.getParentFeature()
})

The method is very simple.

Baidu Maps obtains administrative region boundaries

Obtain map boundary data through BMap.Boundary().

var bdary = new BMap.Boundary();

bdary.get(name, function(rs){rs.boundaries})

var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 5);
map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL}));
map.enableScrollWheelZoom();

function getBoundary(){
  var bdary = new BMap.Boundary();
  var name = document.getElementById("districtName").value;
  bdary.get(name, function(rs){ //Get the administrative region
    map.clearOverlays(); //Clear map overlays
    var count = rs.boundaries.length; //How many points are there in the administrative area?
    for(var i = 0; i < count; i++){
      var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"});
      //Create polygon cover
      console.log(rs.boundaries)
      map.addOverlay(ply); //Add overlay
      map.setViewport(ply.getPath()); //Adjust the field of view
    }
  });
}

The data on Baidu Map is encrypted with Mars coordinates. I personally do not recommend using the longitude and latitude obtained from the data on Baidu Map.

Reprint the article " Baidu Gaode Map Administrative Region Boundary GeoJSON Data Acquisition and Drawing Administrative Regions ",
please indicate the source: Baidu Gaode Map Administrative Region Boundary GeoJSON Data Acquisition and Drawing Administrative Regions - WebGIS Web Map Development Notes - Zhou Junjun personal website