• 官方文档 https://lbs.amap.com/api/jsapi-v2/guide/overlays/overlaygroup
  • 需求：根据屏幕范围显示当前路段车辆拥堵状态，鼠标拖动滚轮缩放更新数据，点击图例显示隐藏道路拥堵状态，根据道路拥堵状态为0-4级

    覆盖物群组 OverlayGroup

    1.gif ```javascript // 初始化地图 initMap() { this.map = new AMap.Map(‘map’, {}); this.map.on(‘complete’, () => { / 道路拥堵状态 / this.trafficJamState(); }) // 缩放级别begin============= AMap.event.addListener(this.map, ‘zoomend’, () => {
    if(this.showRoadlineOverlayGroup){
    1. this.initCreatRoadLink();
    } }); //地图平移结束begin============= AMap.event.addListener(this.map, ‘moveend’, () => { if(this.showRoadlineOverlayGroup){
    1.  this.initCreatRoadLink();
    } });
    }, / 初始化道路拥堵状态 / trafficJamState(){ this.creatRoadlayGroup(); this.creatRoadLink(); }, / 创建拥堵图层 / creatRoadlayGroup(){ this.roadlineOverlayGroup = createOverlayGroup(); this.map.add(this.roadlineOverlayGroup); this.oldRoadlineOverlayGroup = createOverlayGroup(); }, / 创建拥堵画线 / creatRoadLink(){ let arrayBounds = this.map.getBounds();
    let leftTop = arrayBounds.path[0]; let leftTopGcj02 = gcj02towgs84(leftTop[0], leftTop[1]); let rightTop = arrayBounds.path[1]; let rightTopGcj02 = gcj02towgs84(rightTop[0], rightTop[1]); let rightDown = arrayBounds.path[2]; let rightDownGcj02 = gcj02towgs84(rightDown[0], rightDown[1]); let leftDown = arrayBounds.path[3]; let leftDownGcj02 = gcj02towgs84(leftDown[0], leftDown[1]);

getTrafficJamState({ regionId:this.regionId, leftTop:{lat:leftTopGcj02[1],lon:leftTopGcj02[0]}, leftDown:{lat:leftDownGcj02[1],lon:leftDownGcj02[0]}, rightTop:{lat:rightTopGcj02[1],lon:rightTopGcj02[0]}, rightDown:{lat:rightDownGcj02[1],lon:rightDownGcj02[0]}, }).then(res => { let data = res.data; if(data.length>0){ / 清空数据图层 / this.oldRoadlineOverlayGroup.setMap(null); data.forEach(item => { / 数据图层重新赋值 / setRoadLineArr(this.map, this.oldRoadlineOverlayGroup, item); }); setTimeout( ()=>{ / 数据图层赋值给数据展示图层 避免单图层操作鼠标滚轮拖动展示图层清空数据造成闪的问题 / this.roadlineOverlayGroup = this.oldRoadlineOverlayGroup; this.currenZoom = this.map.getZoom(); / 缩放级别大于15 并且 图例状态是否显示 / if(this.currenZoom > 15 && this.showRoadlineOverlayGroup){ this.roadlineOverlayGroup.show(); }else{ this.roadlineOverlayGroup.hide(); } }) } }) }, / 地图拖拽平移超过15级不请求接口 / initCreatRoadLink(){ this.currenZoom = this.map.getZoom(); if (this.currenZoom > 15) { this.creatRoadLink(); } }

  2. - 道路拥堵状态数据画线
  3. ```javascript
  4. export function setRoadLineArr(map, roadlineOverlayGroup, lineArr) {
  5.   let unblockedPolyline;
  6.   let tmpMap = map
  7.   if(lineArr.color == '0'){
  8.     for (let i = 0; i < lineArr.lines.length; i++) {
  9.       // 绘制轨迹
  10.       unblockedPolyline = new AMap.Polyline({
  11.         map: tmpMap,
  12.         path: lineArr.lines[i],
  13.         showDir: true,
  14.         strokeColor: "#34843D",  //线颜色
  15.         strokeWeight: 6,      //线宽
  16.       });
  17.       // 创建覆盖物群组，传入覆盖物组成的数组
  18.       roadlineOverlayGroup.addOverlay(unblockedPolyline);
  19.     }
  20.   }
  21.   if(lineArr.color == '1'){
  22.     // 绘制轨迹
  23.     for (let i = 0; i < lineArr.lines.length; i++) {
  24.       unblockedPolyline = new AMap.Polyline({
  25.         map: tmpMap,
  26.         path: lineArr.lines[i],
  27.         showDir: true,
  28.         strokeColor: "#8ACF26",  //线颜色
  29.         strokeWeight: 6,      //线宽
  30.       });
  31.       // 创建覆盖物群组，传入覆盖物组成的数组
  32.       roadlineOverlayGroup.addOverlay(unblockedPolyline);
  33.     }
  35.   }
  36.   if(lineArr.color == '2'){
  37.     // 绘制轨迹
  38.     for (let i = 0; i < lineArr.lines.length; i++) {
  39.       unblockedPolyline = new AMap.Polyline({
  40.         map: tmpMap,
  41.         path: lineArr.lines[i],
  42.         showDir: true,
  43.         strokeColor: "#ECEE1F",  //线颜色
  44.         strokeWeight: 6,      //线宽
  45.       });
  46.       // 创建覆盖物群组，传入覆盖物组成的数组
  47.       roadlineOverlayGroup.addOverlay(unblockedPolyline);
  48.     }
  50.   }
  51.   if(lineArr.color == '3'){
  52.     // 绘制轨迹
  53.     for (let i = 0; i < lineArr.lines.length; i++) {
  54.       unblockedPolyline = new AMap.Polyline({
  55.         map: tmpMap,
  56.         path: lineArr.lines[i],
  57.         showDir: true,
  58.         strokeColor: "#F38321",  //线颜色
  59.         strokeWeight: 6,      //线宽
  60.       });
  61.       // 创建覆盖物群组，传入覆盖物组成的数组
  62.       roadlineOverlayGroup.addOverlay(unblockedPolyline);
  63.     }
  65.   }
  66.   if(lineArr.color == '4'){
  67.     // 绘制轨迹
  68.     for (let i = 0; i < lineArr.lines.length; i++) {
  69.       unblockedPolyline = new AMap.Polyline({
  70.         map: tmpMap,
  71.         path: lineArr.lines[i],
  72.         showDir: true,
  73.         strokeColor: "#ED212C",  //线颜色
  74.         strokeWeight: 6,      //线宽
  75.       });
  76.       // 创建覆盖物群组，传入覆盖物组成的数组
  77.       roadlineOverlayGroup.addOverlay(unblockedPolyline);
  78.     }
  79.   }
  80. }