Often when we do visual development in some parts of the need to download a moderate amount of map data, such as using echarts to render data, of course, we can make use of GIS technology to realize completely, but GIS is relatively simpler we need cost is a little too much, because you need drawings, registration, release, and then to recent development, so a little do more harm than good.

So sometimes we just need the boundary of a county, for example we need to show the administrative boundary of Fengxiang County and we can do that now

Step 1

Open the link: baidu map API sample > > covering add administrative districts lbsyun.baidu.com/jsdemo.htm#… The following interface is displayed:

function getBoundary(){       
    var bdary = new BMap.Boundary();
    bdary.get("Haidian District, Beijing".function(rs){ // Get the administrative region
        map.clearOverlays();        // Clear map overlay
        var count = rs.boundaries.length; // How many points are there in the administrative region
        if (count === 0) {
            alert('Failed to get current input administrative region');
            return; }...Copy the code

To GET the boundary of Haidian district of Beijing from a GET request, let’s print it out and see what we can do:

function getBoundary(){       
    var bdary = new BMap.Boundary();
    bdary.get("Haidian District, Beijing".function(rs){ // Get the administrative region
        //--------------------
        console.log(rs)
        //--------------------
        map.clearOverlays();        // Clear map overlay
        var count = rs.boundaries.length; // How many points are there in the administrative region
        if (count === 0) {
            alert('Failed to get current input administrative region');
            return; }...Copy the code

Results seen on the console:

  1. Store the result locallyLocal StorageInside, and then go copy it inside that.
  2. Please have a look atStep 2

Step 2

Modify the getBoundary() function in the code above:

function getBoundary(){       
    var bdary = new BMap.Boundary();
    bdary.get("Fengxiang County".function(rs){       // Get the administrative region
        map.clearOverlays();        // Clear map overlay
        var count = rs.boundaries.length; // How many points are there in the administrative region
            console.log(rs.boundaries);
        var content = rs.boundaries
        var fileName = 'Fengxiang county. TXT'
        var aLink = document.createElement('a');
        var blob = new Blob([content]);
        var evt = document.createEvent("HTMLEvents");
            evt.initEvent("click".false.false);
            aLink.download = fileName;
            aLink.href = URL.createObjectURL(blob);
            aLink.dispatchEvent(evt);
            aLink.click();
            if (count === 0) {
                alert('Failed to get current input administrative region');
                return ;
            }
        var pointArray = [];
            for (var i = 0; i < count; i++) {
                var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2.strokeColor: "#ff0000"}); // Create polygon overlay
                map.addOverlay(ply);  // Add overlay
                pointArray = pointArray.concat(ply.getPath());
            }    
        map.setViewport(pointArray);    // Adjust the view
        addlabel();               
    });   
}
Copy the code

Click the “run” button and wait for 2s. A fengxiang county. TXT file will be automatically downloaded

107.653733, 34.657435; 107.648513, 34.661217; 107.625176, 34.705117; 107.609942, 34.707262; 107.594553, 34.736579; 107.584968, 34.730437; 107.579062, 34.745847; 107.573426, 34.745894; ...Copy the code

We can use the js string slicing method to do it with ‘; ‘cut, then convert to 2d array, then draw points using convas and SVG technology, where 107.653733 is the x coordinate using JS longitude and latitude to Mercator algorithm (of course you can also render directly, but ensure that the points on the map are also longitude and latitude), then convert it to Mercator plane coordinates. This will of course result in a large value, which we can divide with the common coefficient to change the size of the overall render result. We can also use this to bind mouse events.

Latitude and longitude to Mercator algorithm

For those of you who are not familiar with GIS, you may not know what this means. It goes something like this:

As you all know, the earth is a ball, the latitude and longitude, which is clearly express a degree, directly in the mapped graphics is not a flat will have certain deformation, so scientists Mercator imagine a cylindrical cut or cut from the earth’s axis in the same direction in the earth, the isometric terms and conditions, the graticule projection into the cylinder, the cylinder after the exhibition for the plane, a quick projection. Mercator projection in the cylindrical projection and cylindrical projection, the first and most commonly used is cylindrical projection. The algorithm formula is as follows:

function _getMercator(poi) {/ / [114.32894, 30.585748]
    var mercator = {};
    var earthRad = 6378137.0;// Equator circumference
        mercator.x = poi.lng * Math.PI / 180 * earthRad;
    var a = poi.lat * Math.PI / 180;
        mercator.y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
    return mercator; / / [12727039.383734727, 3579066.6894065146]
}
Copy the code

The original address