百度地图3d区域掩膜，最常见通用的大屏地图展现形式

news2024/11/27 2:39:39

需求及效果

原本项目使用的是百度地图3.0,也就是2d版本的那个地图，客户不满意觉得不够好看，让把地图改成3d的，但是我们因为另外的系统用的都是百度地图，为了保持统一只能用百度地图做

经过3天的努力，最后我终于把这个效果实现了，效果如下：
在这里插入图片描述

如何引用GL版本

为了实现这个功能，首先要将百度地图升级为GL版本。

GL版本引用的百度地图API需将之前引入的替换为：

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>

初始化地图

地图初始化还是和之前一样，只不过要使用BMapGL

   const map = new BMapGL.Map("monitorMap");          // 创建地图实例
   var point = new BMapGL.Point( 128.2015353412464,49.76416045410938);  // 创建点坐标
   map.centerAndZoom(point, 7); // 设置地图中心点
   map.enableScrollWheelZoom(true); // 允许鼠标滚动缩放地图级别

将底图改为卫星地图

GL版本的百度地图有三种地图类型：

地球模式（BMAP_EARTH_MAP），不过这个模式能支持的交互操作有限
标准地图（BMAP_NORMAL_MAP）
卫星地图（BMAP_SATELLITE_MAP）

因此，我们给地图加上配置：

const map = new BMapGL.Map("monitorMap",{
   
    mapType:BMAP_SATELLITE_MAP,
});

禁用地图旋转，禁止技改变倾角

这个地图我们不能让用户自己去改变旋转角和倾角，因此需要禁用

const map = new BMapGL.Map("monitorMap",{
   
    mapType:BMAP_SATELLITE_MAP,
    // 禁用用户旋转
    enableRotate: false,
    // 禁用用户修改倾斜角度
    enableTilt: false,
});

代码修改地图倾角

做了这么多发现地图依然不是三维的

不要慌，我们手动来改一下地图倾角

map.setTilt(50);       //设置地图的倾斜角度

现在地图终于倾斜了

掩膜以及掩膜经常失败怎么解决

由于我们的效果只需要留下黑龙江省的地图，所以需要区域掩膜

我们需要获取黑龙江的边界，在百度地图中有对应API：

var bdary = new BMapGL.Boundary();
bdary.get('黑龙江', function (rs) {
   
     // 绘制行政区
    for (var i = 0; i < rs.boundaries.length; i++) {
   
        var path = [];
        var xyArr = rs.boundaries[i].split(';');
        var ptArr = [];
        for (var j = 0; j < xyArr.length; j++) {
   
            var tmp = xyArr[j].split(',');
            var pt = new BMapGL.Point(tmp[0], tmp[1]);
            ptArr.push(pt);
        }
        // 添加掩膜
        var mapmask = new BMapGL.MapMask(ptArr, {
   
            isBuildingMask: true,
            isPoiMask: true,
            isMapMask: true,
            showRegion: 'inside',
        });
        map.addOverlay(mapmask);
        // 给掩膜描边
        var border = new BMapGL.Polyline(ptArr, {
   
            strokeColor: '#15a6db',
            strokeWeight: 3,
            strokeOpacity: 1
        });
        map.addOverlay(border);
    }
})

现在终于把黑龙江单独拎出来了，但为什么背景是白色的？这个先不急，我们先来解决另一个问题

区域掩膜失败怎么解决

多刷新几次页面，你会发现有时候区域掩膜会失败，为什么呢？

我们分析一下，为什么有时失败有时不失败，这是不是非常像接口请求有时成功有时失败的样子，实际上百度地图也是这样做的，是因为黑龙江的边界请求有时候会失败

解决思路：
黑龙江的边界不会变的，我们把请求成功的黑龙江边界存起来就行了

// heilongjiang.js
export default {
   
    "boundaries": [
        "121.50682596458674, 53.341380780914506;121.51059812908427, 53.34188131383469;121.51345447111437, 53.34197641979837;121.51517077362173, 53.34203018226125;.....
    ]
}