公司项目有个需求是要在地图上贴个航拍的照片做出类似卫星地图的效果,但是只有一张图片而且可以随时替换,也不好做瓦片地图,而且照片的角度可以任意旋转。
要实现这个功能需要解决以下问题:
- 百度地图怎么贴图片
- 图片角度如何旋转
不卖关子,我先放出实现的效果,为了不涉及侵权,我换成了一张同事的爱犬的照片
实现需求
百度地图怎么贴图片
百度地图api中有GroundOverlay能实这个效果。
代码如下:
// 西南角和东北角
const SW = new BMap.Point(119.74455912589518, 36.92779662557118);
const NE = new BMap.Point(119.75332658767256, 36.936756872224294);
const groundOverlayOptions = {
opacity: 1,
displayOnMinLevel: 8,
displayOnMaxLevel: 20
}
// 初始化GroundOverlay
const groundOverlay = new BMap.GroundOverlay(new BMap.Bounds(SW, NE), groundOverlayOptions);
const url = "(图片地址,可以是绝对地址也可以是相对地址)"
groundOverlay.setImageURL(url);
map.addOverlay<