07、带高度的点纹理贴图
在百度地图的 BMapGL API 中，除了可以使用 Marker3D 绘制带有高度的点标记外，你还可以为这些标记添加 纹理贴纸（例如图像或自定义图标）。这样可以使标记更加生动，适用于如建筑物、标志性位置等有具体图形表示的场景。
示例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><title>带高度的点纹理贴图</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="initial-scale=1.0, user-scalable=no"><meta http-equiv="X-UA-Compatible" content="IE=Edge"><style>body,html,#container {overflow: hidden;width: 100%;height: 90%;margin: 0;font-family: "微软雅黑",serif;}</style><script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=4LNKXPO0VCgfpZstdvYkRozvWh6JFEgQ"></script>
</head>
<body>
<div id="container"></div>
</body>
</html>
<script>const map = new BMapGL.Map('container');const point = new BMapGL.Point(116.443, 39.935);map.centerAndZoom(point, 13);map.enableScrollWheelZoom();map.setTilt(70);const citys = [{name: '北京大学',img: '/jsdemo/img/beida.png'}, {name: '北京交通大学',img: '/jsdemo/img/beijiao.png'}, {name: '北京工业大学',img: '/jsdemo/img/beigong.png'}, {name: '北京邮电大学',img: '/jsdemo/img/beiyou.png'}];const cityGeo = new BMapGL.Geocoder();for (let i = 0; i < citys.length; i++) {cityGeo.getPoint(citys[i].name, function (point) { // 地址解析获取对应经纬度const pt = new BMapGL.Point(point.lng, point.lat);const icon = new BMapGL.Icon(citys[i].img, new BMapGL.Size(40, 40));const marker = new BMapGL.Marker3D(pt, Math.round(Math.random()) * 6000, {size: 80,icon: icon});map.addOverlay(marker);});}
</script>代码解释
- 通过
BMapGL.Icon对象来设置标记的自定义纹理贴纸（图标）。
实现效果
