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. 页面显示
