高德地图-快速上手-图层示例在angular里的实现

高德地图 快速上手 示例 地址： https://lbs.amap.com/api/javascript-api/guide/abc/quickstart
高德官方图层： https://lbs.amap.com/api/javascript-api/guide/layers/official-layers

图层

默认情况下，地图只显示标准底图，如需要叠加别的图层，可以通过map.add方法添加图层：

<div id='map' style='width:1000px; height:600px;margin: 0 auto;'></div>

declare var  AMap: any;

@Component({
   
  selector: 
  templateUrl: 
  styleUrls: 
})

 ngAfterViewInit(): void {
   
    setTimeout(() => {
   
      this.Map();
    }, 100);
  }
  // tslint:disable-next-line:typedef
  Map() {
   
    const map: any = new AMap.Map('map', {
   
      resizeEnable: true,
      zoom: 11, // 级别
      center: [116.397428, 39.90923], // 中心点坐标
      viewMode: '3D', // 使用3D视图
    });
    // 实时路况图层  Traffic:交通
    const trafficLayer = new AMap.TileLayer.Traffic({
   
      zIndex: 10
    });
    map.add(trafficLayer); // 添加图层到地图
  }

效果

也可以在地图初始化的时候通过layers属性为地图设置多个图层：

  ngAfterViewInit(): void {
   
    setTimeout(() => {
   
      this.Map();
    }, 100);
  }
  Map() {
   
    const map: any = new AMap.Map('map', {
   
      resizeEnable: true,
      zoom: 11, // 级别
      center: [116.397428, 39.90923], // 中心点坐标
      viewMode: '3D', // 使用3D视图
      layers: [
      	// 使用多个图层
      	// Satellite：卫星图   RoadNet路况图
        new AMap.TileLayer.Satellite(),
        new AMap.TileLayer.RoadNet()
    ],
    });
  }

效果：

点击：亲手试一试

官网上的图层api

tilelayer类–顶级父类

实时交通图层–AMap.TileLayer.Traffic

测试代码：

<button (click)="hide()">隐藏</button>
<button (click)="show()">显示</button>
<div id='map' style='width:1000px; height:600px;margin: 0 auto;'></div>

// 定义
  trafficLayer: any;


  // tslint:disable-next-line:use-lifecycle-interface
  ngAfterViewInit(): void {
   
    setTimeout(() => {
   
      this.Map();
    }, 100);
  }


  // tslint:disable-next-line:typedef
  Map() {
   
    const map: any = new AMap.Map('map', {
   
      resizeEnable: true,
      zoom: 11, // 级别
      center: [116.397428, 39.90923], // 中心点坐标
      viewMode: '3D', // 使用3D视图
    })