百度地图（27）-GL 图层

1. 三维GL库中增加了新的图层支持比如视频层
2. 代码
  1 /**
  2  * 叠加地面图片层
  3  */
  4 function addGroundOverlay(){
  5   map.centerAndZoom(new BMapGL.Point(117.200, 36.2437), 18);
  6   map.enableScrollWheelZoom(true);
  7   map.setTilt(45);
  8   map.setDisplayOptions({
  9     poiText: false,  // 隐藏poi标注
 10     poiIcon: false,  // 隐藏poi图标
 11     building: false  // 隐藏楼块
 12   });
 13 
 14 
 15   var pStart = new BMapGL.Point(117.19635, 36.24093);
 16   var pEnd = new BMapGL.Point(117.20350, 36.24764);
 17   var bounds = new BMapGL.Bounds(new BMapGL.Point(pStart.lng, pEnd.lat), new BMapGL.Point(pEnd.lng, pStart.lat));
 18   var imgOverlay = new BMapGL.GroundOverlay(bounds, {
 19     type: 'image',
 20     url: '../img/gl/shouhuimap.png',
 21     opacity: 1
 22   });
 23   map.addOverlay(imgOverlay);
 24 }
 25 
 26 /**
 27  * 叠加地面Canvas图层
 28  */
 29 function addCanvasLayer(){
 30 
 31   map.centerAndZoom(new BMapGL.Point(116.450484, 39.921283), 17);
 32   map.enableScrollWheelZoom(true);
 33   map.setDisplayOptions({
 34     poiText: false,  // 隐藏poi标注
 35     poiIcon: false   // 隐藏poi图标
 36   });
 37   map.addEventListener('click', function (e) {
 38     alert('点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat);
 39   });
 40 
 41 // 自定义canvas
 42   function getTextureCanvas() {
 43     var textureCanvas = document.createElement('canvas');
 44     textureCanvas.width = textureCanvas.height = 200;
 45     var ctx = textureCanvas.getContext('2d');
 46     ctx.fillStyle = '#79a913';
 47     ctx.strokeStyle = 'white';
 48     ctx.lineWidth = 6;
 49     ctx.lineCap = 'square';
 50     ctx.fillRect(0, 0, 200, 200);
 51     ctx.moveTo(50, 50);
 52     ctx.lineTo(150, 50);
 53     ctx.lineTo(150, 150);
 54     ctx.lineTo(50, 150);
 55     ctx.lineTo(50, 50);
 56     ctx.stroke();
 57     return textureCanvas;
 58   }
 59 
 60 // 添加canvas叠加层
 61   var canvasSource = getTextureCanvas();
 62   var pStart = new BMapGL.Point(116.447717, 39.919173);
 63   var pEnd = new BMapGL.Point(116.453125, 39.923475);
 64   var bounds = new BMapGL.Bounds(new BMapGL.Point(pStart.lng, pEnd.lat), new BMapGL.Point(pEnd.lng, pStart.lat));
 65   var canvasOverlay = new BMapGL.GroundOverlay(bounds, {
 66     type: 'canvas',
 67     url: canvasSource,
 68     opacity: 0.9
 69   });
 70   map.addOverlay(canvasOverlay);
 71 
 72 // 添加文本标注
 73   var opts = {
 74     position: new BMapGL.Point(116.4503, 39.9213),
 75     offset: new BMapGL.Size(-28, -20)
 76   };
 77   var label = new BMapGL.Label('日坛公园', opts);
 78   label.setStyle({
 79     color: '#fff',
 80     borderRadius: '5px',
 81     borderColor: '#fff',
 82     backgroundColor: '#79a913',
 83     fontSize: '16px',
 84     height: '30px',
 85     lineHeight: '30px'
 86   });
 87   map.addOverlay(label);
 88 }
 89 
 90 /**
 91  * 叠加地面视频层
 92  */
 93 function addVideoLayer() {
 94   map.centerAndZoom(new BMapGL.Point(119.308, 25.668), 4);
 95   map.enableScrollWheelZoom(true);
 96 
 97 // 增加地面视频叠加层
 98   var pStart = new BMapGL.Point(94.582033, -7.989754);
 99   var pEnd = new BMapGL.Point(145.358572, 30.813867);
100   var bounds = new BMapGL.Bounds(new BMapGL.Point(pStart.lng, pEnd.lat), new BMapGL.Point(pEnd.lng, pStart.lat));
101   var imgOverlay = new BMapGL.GroundOverlay(bounds, {
102     type: 'video',
103     url: '../img/cloud.mov',
104     opacity: 0.5
105   });
106   map.addOverlay(imgOverlay);
107 }
108 
109 /**
110  * 叠加路况，注意与 2D 的区别
111  */
112 function addTrafficLayer(){
113 
114   map.setDisplayOptions({   //为防止隐藏图层后，交通路况图层出不来，所以先把 layer 属性设 true. 否则点击 隐藏图层 后，路况无法再次显示
115     layer:true
116   })
117   map.setTrafficOn(); // 叠加路况图层
118 }
119 
120 function removeTrafficLayer(){
121   map.setTrafficOff(); // 关闭路况图层
122 }
3. 页面显示