百度地图（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