百度地圖（27）-GL 圖層

1. 三維GL庫中增加了新的圖層支持 比如視頻層

 

2.  代碼

/**
 * 疊加地面圖片層
 */
function addGroundOverlay(){
  map.centerAndZoom(new BMapGL.Point(117.200, 36.2437), 18);
  map.enableScrollWheelZoom(true);
  map.setTilt(45);
  map.setDisplayOptions({
    poiText: false,  // 隱藏poi標注
    poiIcon: false,  // 隱藏poi圖標
    building: false  // 隱藏樓塊
  });


  var pStart = new BMapGL.Point(117.19635, 36.24093);
  var pEnd = new BMapGL.Point(117.20350, 36.24764);
  var bounds = new BMapGL.Bounds(new BMapGL.Point(pStart.lng, pEnd.lat), new BMapGL.Point(pEnd.lng, pStart.lat));
  var imgOverlay = new BMapGL.GroundOverlay(bounds, {
    type: 'image',
    url: '../img/gl/shouhuimap.png',
    opacity: 1
  });
  map.addOverlay(imgOverlay);
}

/**
 * 疊加地面Canvas圖層
 */
function addCanvasLayer(){

  map.centerAndZoom(new BMapGL.Point(116.450484, 39.921283), 17);
  map.enableScrollWheelZoom(true);
  map.setDisplayOptions({
    poiText: false,  // 隱藏poi標注
    poiIcon: false   // 隱藏poi圖標
  });
  map.addEventListener('click', function (e) {
    alert('點擊位置經緯度：' + e.latlng.lng + ',' + e.latlng.lat);
  });

// 自定義canvas
  function getTextureCanvas() {
    var textureCanvas = document.createElement('canvas');
    textureCanvas.width = textureCanvas.height = 200;
    var ctx = textureCanvas.getContext('2d');
    ctx.fillStyle = '#79a913';
    ctx.strokeStyle = 'white';
    ctx.lineWidth = 6;
    ctx.lineCap = 'square';
    ctx.fillRect(0, 0, 200, 200);
    ctx.moveTo(50, 50);
    ctx.lineTo(150, 50);
    ctx.lineTo(150, 150);
    ctx.lineTo(50, 150);
    ctx.lineTo(50, 50);
    ctx.stroke();
    return textureCanvas;
  }

// 添加canvas疊加層
  var canvasSource = getTextureCanvas();
  var pStart = new BMapGL.Point(116.447717, 39.919173);
  var pEnd = new BMapGL.Point(116.453125, 39.923475);
  var bounds = new BMapGL.Bounds(new BMapGL.Point(pStart.lng, pEnd.lat), new BMapGL.Point(pEnd.lng, pStart.lat));
  var canvasOverlay = new BMapGL.GroundOverlay(bounds, {
    type: 'canvas',
    url: canvasSource,
    opacity: 0.9
  });
  map.addOverlay(canvasOverlay);

// 添加文本標注
  var opts = {
    position: new BMapGL.Point(116.4503, 39.9213),
    offset: new BMapGL.Size(-28, -20)
  };
  var label = new BMapGL.Label('日壇公園', opts);
  label.setStyle({
    color: '#fff',
    borderRadius: '5px',
    borderColor: '#fff',
    backgroundColor: '#79a913',
    fontSize: '16px',
    height: '30px',
    lineHeight: '30px'
  });
  map.addOverlay(label);
}

/**
 * 疊加地面視頻層
 */
function addVideoLayer() {
  map.centerAndZoom(new BMapGL.Point(119.308, 25.668), 4);
  map.enableScrollWheelZoom(true);

// 增加地面視頻疊加層
  var pStart = new BMapGL.Point(94.582033, -7.989754);
  var pEnd = new BMapGL.Point(145.358572, 30.813867);
  var bounds = new BMapGL.Bounds(new BMapGL.Point(pStart.lng, pEnd.lat), new BMapGL.Point(pEnd.lng, pStart.lat));
  var imgOverlay = new BMapGL.GroundOverlay(bounds, {
    type: 'video',
    url: '../img/cloud.mov',
    opacity: 0.5
  });
  map.addOverlay(imgOverlay);
}

/**
 * 疊加路況，注意與 2D 的區別
 */
function addTrafficLayer(){

  map.setDisplayOptions({   //為防止隱藏圖層后，交通路況圖層出不來，所以先把 layer 屬性設 true. 否則點擊 隱藏圖層 后，路況無法再次顯示
    layer:true
  })
  map.setTrafficOn(); // 疊加路況圖層
}

function removeTrafficLayer(){
  map.setTrafficOff(); // 關閉路況圖層
}

 

3. 頁面顯示