高德地图 Web JS API示例学习笔记（3）——地图（三维地图）

三维地图

3D地图

map = new AMap.Map('container', {
   resizeEnable: true,
   rotateEnable: true,
   pitchEnable: true,
   zoom: 17,
   pitch: 80,
   rotation: -15,
   viewMode: '3D', //开启3D视图,默认为关闭
   buildingAnimation: true, //楼块出现是否带动画
   // 是否支持可以扩展最大缩放级别,和zooms属性配合使用
   // 设置为true的时候，zooms的最大级别在PC上可以扩大到20级，移动端还是高清19/非高清20
   expandZoomRange: true,
   zooms: [3, 20],
   center: [116.333926, 39.997245]
 });

 map.addControl(new AMap.ControlBar({
   // 缩放工具条
   showZoomBar: false,
   showControlButton: true,
   position: {
     right: '10px',
     top: '10px'
   }
 }))

区域掩膜

区域掩膜只在3D视图下，才有效
利用行政区查询获取边界构建mask路径

var district = new AMap.DistrictSearch(opts);
    district.search('北京市', function (status, result) {
      var bounds = result.districtList[0].boundaries;
      var mask = []
      for (var i = 0; i < bounds.length; i += 1) {
        mask.push([bounds[i]])
      }
      var map = new AMap.Map('container', {
        // 区域掩膜只在3D视图下，才有效
        // 一维数组时代表一个普通多边形路径
        mask: mask,
        center: [116.472804, 39.995725],
        disableSocket: true,
        viewMode: '3D',
        showLabel: false,
        // 地图标注显示顺序，大于110即可将底图上的默认标注显示在覆盖物（圆、折线、面）之上。
        labelzIndex: 130,
        pitch: 40,
        zoom: 9,
        layers: [
          new AMap.TileLayer.Satellite(),
          new AMap.TileLayer.RoadNet({
            //rejectMapMask:true
          })
        ]
      });
      //添加高度面
      var object3Dlayer = new AMap.Object3DLayer({
        zIndex: 1
      });
      map.add(object3Dlayer)
      var height = -8000;
      var color = '#0088ffcc'; //rgba
      var wall = new AMap.Object3D.Wall({
        path: bounds,
        height: height,
        color: color
      });
      wall.transparent = true
      object3Dlayer.add(wall)
      //添加描边
      for (var i = 0; i < bounds.length; i += 1) {
        new AMap.Polyline({
          path: bounds[i],
          strokeColor: '#99ffff',
          strokeWeight: 4,
          map: map
        })
      }
    });