需求及效果
原本项目使用的是百度地图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;.....]
}
然后将代码修改一下：
import heilon
