【百度地图】仅显示中国边界区域

最新推荐文章于 2025-03-12 14:48:37 发布

心酱儿

最新推荐文章于 2025-03-12 14:48:37 发布

阅读量1.1w

点赞数 5

分类专栏：百度地图

本文链接：https://blog.csdn.net/wbx_wlg/article/details/103144129

版权

本篇的主要思路是通过绘制全国的行政区划边界点来添加遮罩层从而视觉上达到只显示中国区域的效果，具体实现看代码：
一、Js

//绘制中国区域行政边界
function drawBoundary() {
    /*画遮蔽层的相关方法
     *思路: 首先在中国地图最外画一圈，圈住理论上所有的中国领土，然后再将每个闭合区域合并进来，并全部连到西北角。
     *      这样就做出了一个经过多次西北角的闭合多边形*/
    //定义中国东南西北端点，作为第一层
    //向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点
    var pStart = new BMap.Point(180,90);
    var pEnd = new BMap.Point(0,-90);
    var pArray = [
        new BMap.Point(pStart.lng,pStart.lat),
        new BMap.Point(pEnd.lng,pStart.lat),
        new BMap.Point(pEnd.lng,pEnd.lat),
        new BMap.Point(pStart.lng,pEnd.lat)
    ];
    //循环添加各闭合区域
    $.get('./ChinaPly.json',{},function (data) { //此处替换为自己的文件地址
        var chinaPly=data.chinaPly;
        $.each(chinaPly,function (index,value) {
            pArray.push(new BMap.Point(value[0],value[1]));
        });
        //添加遮蔽层
        var plyall = new BMap.Polygon(pArray,
            { strokeOpacity: 1, strokeColor: "#091934",
                strokeWeight: 1, fillColor: "#091934",fillOpacity: 1 }); //建立多边形覆盖物
        map.addOverlay(plyall);

        pStart = new BMap.Point(180,90);
        pEnd = new BMap.Point(0,-90);
        pArray = [
            new BMap.Point(135.077218,48.454352),
            new BMap.Point(pStart.lng,pStart.lat),
            new BMap.Point(pStart.lng,pEnd.lat),
            new BMap.Point(135.077218,48.454352)];
        var boundary = new BMap.Polygon(pArray,
            { strokeOpacity: 1, strokeColor: "#091934",
                strokeWeight: 1, fillColor: "#091934",fillOpacity: 1}); //建立多边形覆盖物
        map.addOverlay(boundary);
    });
}

在初始化地图以及地图缩放时调用此方法，比如：

map.addEventListener("zoomstart", function () {
         drawBoundary(); //绘制中国区域行政边界
 });

二、Json文件

{"chinaPly":[
          [135.077218,48.544352],
          [134.92218,48.584352],
          [134.

最低0.47元/天解锁文章