高德地图 Web JS API示例学习笔记（2）——地图（覆盖物与图层管理）

覆盖物与图层管理

点标记和圆的添加与移除

// 构造点标记
var marker = new AMap.Marker({
    icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
    position: [116.405467, 39.907761]
});
// 构造矢量圆形
var circle = new AMap.Circle({
    center: new AMap.LngLat("116.403322", "39.920255"), // 圆心位置
    radius: 1000,  //半径
    strokeColor: "#F33",  //线颜色
    strokeOpacity: 1,  //线透明度
    strokeWeight: 3,  //线粗细度
    fillColor: "#ee2200",  //填充颜色
    fillOpacity: 0.35 //填充透明度
});
map.add(marker); //添加矢量点
map.remove(marker); //移除矢量点
map.add(circle);
map.remove(circle);
map.setFitView(); //适应视图

图层的添加与移除

官方图层的种类可见“高德官方图层”一节

//批量添加图层
map.add([satelliteLayer, roadNetLayer]);
//添加图层
map.add(satelliteLayer);
//移除图层
map.remove(satelliteLayer);

地图控件

给地图添加比例尺、缩放工具条、鹰眼等控件

  var scale = new AMap.Scale({}),
   toolBar = new AMap.ToolBar({}),
   overView = new AMap.OverView({}),
   map = new AMap.Map("container", {
       resizeEnable: true
   });
   map.addControl(scale);
   map.addControl(toolBar);
   map.addControl(overView);

自定义地图样式

自定义地图

指定Map.mapStyle属性，实现自定义样式地图。

   var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom:4,
        center: [116.397428, 39.90923],
        mapStyle:'amap://styles/a92c23c68ca519ec235825c3be99462b'
    });

设定楼块样式

楼块图层的setStyle接口可以指定区域来设定建筑物的颜色。
引入3D插件：plugin=Map3D

// 建筑物图层
      var buildingLayer = new AMap.Buildings({
        zIndex: 130,
        merge: false,
        sort: false,
        zooms: [17, 20]
      });
      var options = {
        hideWithoutStyle: false, //是否隐藏设定区域外的楼块
        areas: [{ //围栏1
          rejectTexture: true, //是否屏蔽自定义地图的纹理
          color1: 'ffffff00', //楼顶颜色
          color2: 'ffffcc00', //楼面颜色
          // 此处的围栏是圈定的区域
          // 隐藏围栏外的建筑物的显示
          path: [
            [113.94560071393846, 22.53853344364944],
            [113.94559534952043, 22.53626417502485],
            [113.9498225109279, 22.53634345141337],
            [113.94981178209184, 22.53869694846355],
            [113.94981178209184, 22.53869694846355],
            [113.94965084955095, 22.53869694846355],
            [113.94560071393846, 22.53853344364944]
          ]
        }, { //围栏2
          color1: 'ff99ff00',
          color2: 'ff999900',
          path: [
            [113.949857, 22.538697],
            [113.949889, 22.536343],
            [113.953998, 22.536428],
            [113.953961, 22.53889],
            [113.949857, 22.538697]
          ]
        }]
      };
      buildingLayer.setStyle(options); //此配色优先级高于自定义mapStyle

Amap的多边形类：

new AMap.Polygon({
	// 是否将覆盖物的鼠标或touch等事件冒泡到地图上
	bubble: true,
	fillOpacity: 0.4,
	// 轮廓线宽度
	strokeWeight: 1,
	// 多边形轮廓线的节点坐标数组
	path: options.areas[0].path,
	map: map
})

标准样式主题

使用Map.setMapStyle方法，加载高德提供的模版样式。

var styleName = "amap://styles/" + this.value;
map.setMapStyle(styleName);

地图显示要素

使用Map.setFeatures方法，定制地图显示的元素类别
// 设置地图上显示的元素种类，支持’bg’（面状要素）、‘point’（POI点）、‘road’（道路）、‘building’（建筑物）

features: ['bg', 'point', 'road'];
map.setFeatures(features);

隐藏文字标注

showLabel设定为 false 隐藏文字标注

   var map = new AMap.Map('container', {
      resizeEnable: true, //是否监控地图容器尺寸变化
      showLabel: false //不显示地图文字标记
    });