百度地圖（8）-圖層

1. 圖層其實是使用了疊加的概念，將一個類型或者屬性的物體，疊加在另外一個物體上，只不過這些物體

都是有位置的，當這些物體疊加在一起時，就能顯示出對應的位置關系了，再賦予它們不同的樣式，

當這樣的疊加越來越多時，則能描述出一個復雜的空間物體關系了。

 

2. CanvasLayer

首先按照正常程序繪制canvas，然后將canvas通過Overlay添加到地圖上，和前面添加 Marker 的原理其實是一樣的。

// 添加Canvas2D覆蓋物
var canvasLayer = null;

function addCanvasLayer(){

  /**
   * 如果已存在，則刪除，否則添加多個后，無法通過 removeCanvasLayer 函數刪除，
   **/
  if(canvasLayer){
    removeCanvasLayer();
    canvasLayer = null;
  }

  canvasLayer = new BMap.CanvasLayer({
    update:update
  });

  function update(){
    var ctx = this.canvas.getContext("2d");
    if(!ctx){
      return;
    }

    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
    var temp = {};
    ctx.fillStyle = "rgba(50,50,255,0.7)";
    ctx.beginPath();
    var data = [
      new BMap.Point(117.3223,31.8534),
      new BMap.Point(117.3568,31.85863),
      new BMap.Point(117.3465,31.88641)
    ];
    for(var i=0,len = data.length; i<len;i++) {
      var pixel = map.pointToPixel(data[i]);
      ctx.fillRect(pixel.x,pixel.y,30,30);
    }
  }
  map.addOverlay(canvasLayer);
}

 

3. 添加TileLayer

TileLayer 一般為金字塔形的圖片地址，根據xyz的排列規則進行加載。

此代碼是加載清華的微圖。

function addTileLayer(){
  map.centerAndZoom(new BMap.Point(116.332782, 40.007978), 16);
  tileLayer = new BMap.TileLayer({isTransparentPng:true});
  tileLayer.getTilesUrl = function (tileCoord, zoom) {
    var x = tileCoord.x;
    var y = tileCoord.y;
    return '../img/tsinghua/' + zoom + '/tile' + x + '_' + y + '.png';;
  }
  map.addTileLayer(tileLayer);
}

 

4. 地面疊加層高

地面疊加層使用的是 GroundOverlay，添加到地圖上時，使用的是  map.addOverlay。此處以圖片為地圖，添加到地圖上。

可以通過設置 opacity | displayOnMinLevel | displayOnMaxLevel 控制顯示內容。

function addGroundOverlay() {

  // 西南角和東北角
  var SW = new BMap.Point(116.29579,39.837146);
  var NE = new BMap.Point(116.475451,39.9764);

  map.centerAndZoom(SW, 13);


  groundOverlayOptions = {
    opacity: 1,
    displayOnMinLevel: 10,
    displayOnMaxLevel: 14
  }

  // 初始化GroundOverlay
  groundOverlay = new BMap.GroundOverlay(new BMap.Bounds(SW, NE), groundOverlayOptions);

  // 設置GroundOverlay的圖片地址
  groundOverlay.setImageURL('../img/si-huan.png');

  // 單擊事件
  groundOverlay.addEventListener('click', function (clickEvent) {
    // console.log('clickEvent', clickEvent);
  });

  // 雙擊事件
  groundOverlay.addEventListener('dblclick', function (dblclickEvent) {
    // console.log('dblclickEvent', dblclickEvent);
  });

  // 添加GroundOverlay
  map.addOverlay(groundOverlay);
}

 

4. 交通流量層 TrafficLayer

TrafficLayer 是BMap 中封裝好的對象，可以直接調用。這里是自己寫的邏輯，其實完全可以使用 TrafficControl 代替這些代碼。

TrafficControl 的內部代碼我沒有去看，邏輯上應該和這個差不多，只不過封裝為了一個Control對象。

var trafficLayer = null;//交通流量圖層
var trafficType = 0 ;
/**
 * 添加交通流量圖層
 */
function showTrafficLayer(){

  if(trafficType == 0){
    addTrafficeLayer();
    trafficType = 1;
  } else {
    removeTrafficLayer();
    trafficType = 0 ;
  }
}

function addTrafficeLayer(){
  trafficLayer = new BMap.TrafficLayer();
  map.addTileLayer(trafficLayer);
}

function removeTrafficLayer(){
  if(trafficLayer){
    map.removeTileLayer(trafficLayer);
  }
}

 

5. DrawManager

這是一個開源的封裝個對象庫，http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/mouse2draw

主要引用了以下文件

<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />

實際代碼

function addDrawManager(){
  var styleOptions = {
    storkColor:"red",
    fillColor:"red",
    strokeWeight:3,
    strokeOpacity:0.7,
    fillOpacity: 0.6,
    strokeStyle:'solid'
  }

  var drawingManager = new BMapLib.DrawingManager(map,{
    _isOpen:false,
    enableDrawingTool:true,
    drawingToolOptions:{
      anchor: BMAP_ANCHOR_TOP_RIGHT,
      offset: new BMap.Size(5,5)
    },
    circleOptions:styleOptions,
    polylineOptions:styleOptions,
    polygonOptions: styleOptions,
    rectangleOptions: styleOptions
  });
  drawingManager.addEventListener('overlaycomplete',overlaycomplete);

}

 

6.  頁面顯示

CanvasLayer

 

TileLayer

 

GroundOverlay

 

 

 

DrawManager

 

 

7. 代碼參考:

https://github.com/WhatGIS/bdMap