基础控件最后更新时间: 2021年01月22日

BasicControl（基础控件）提供一些基础的地图控件，目前包括：缩放控件(BasicControl.Zoom)，图层切换控件(BasicControl.LayerSwitcher)，交通图控件(BasicControl.Traffic)。

如何使用

1、引入UI组件库

2、BasicControl依赖jQuery或者Zepto，请参见这里确定是否需要进行DomLibrary设置。

3、加载BasicControl（模块名：ui/control/BasicControl）：

JavaScript

//设置DomLibrary，jQuery或者Zepto
AMapUI.setDomLibrary($);

//加载BasicControl，loadUI的路径参数为模块名中 'ui/' 之后的部分
AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {

  var map = new AMap.Map('container');

  //缩放控件
  map.addControl(new BasicControl.Zoom({
      position: 'lt', //left top，左上角
      showZoomNum: true //显示zoom值
  }));

  //图层切换控件
  map.addControl(new BasicControl.LayerSwitcher({
      position: 'rt' //right top，右上角
  }));

  //实时交通控件
  map.addControl(new BasicControl.Traffic({
      position: 'lb'//left bottom, 左下角
  }));
});

示例中心

控件类通用接口

BasicControl中的控件继承自统一的父类，因此具备一些通用的构造参数，方法和事件。

构造参数

参数名称	类型	说明
`position`	`String\|Object`	控件的位置，可以有如下取值： 1. 8个方位角： `lt`, left top, 左上角 `lm`，left middle, 左侧中部 `lb`，left bottom, 左下角 `ct`，center top, 中上 `cb`，center bottom, 中下 `rt`，right top, 右上角 `rm`，right middle, 右侧中部 `rb`，right bottom 右下角 2. 直接指定style的`top`,`left`,`right`,`bottom`，比如： { top:'20px', right:'20px', }
`theme`	`String`	主题样式。控件的dom容器上会附加名为： `'amap-ui-control-theme-' + theme` 的class, 可以据此编写css来调整控件的样式。自定义样式示例

参数名称

类型

说明

position

String|Object

控件的位置，可以有如下取值：

1. 8个方位角：

lt, left top, 左上角
lm，left middle, 左侧中部
lb，left bottom, 左下角
ct，center top, 中上
cb，center bottom, 中下
rt，right top, 右上角
rm，right middle, 右侧中部
rb，right bottom 右下角

2. 直接指定style的top,left,right,bottom，比如：

{
    top:'20px',
    right:'20px',
}

theme

String

主题样式。控件的dom容器上会附加名为： 'amap-ui-control-theme-' + theme 的class, 可以据此编写css来调整控件的样式。

自定义样式示例

方法

方法名称	返回值	说明
`addTo(map)`		添加到map
`removeFrom(map)`		从map上移除

事件

事件名称	参数	说明
`willAddToMap`	map	控件即将被添加到map上
`addToMap`	map	控件已被添加到map上
`willRemoveFromMap`	map	控件即将从map上移除
`removeFromMap`	map	控件已经从map上移除

BasicControl.Zoom接口

缩放控件（示例）

构造参数

构造参数	类型	说明
`showZoomNum`	`Boolean`	是否显示当前zoom值，默认false
`theme`	`String`	主题样式，内置`light`(默认)， `dark`两种，也可以配合css进行自定义设置

方法

方法	返回值	说明
`zoomIn()`		放大
`zoomOut()`		缩小
`showZoomNum()`		显示zoom值
`hideZoomNum()`		隐藏zoom值

BasicControl.LayerSwitcher接口

图层切换控件（示例）

构造参数

参数名称	类型	说明
`baseLayers`	`Array`	底图图层列表，每次只启用一个，图层信息的结构如下： [ //第一个图层 { id: 'tile',//图层id，需唯一 enable: true, //是否启用 name: '标准图',//显示名称，html layer: new AMap.TileLayer() // 图层实例 }, //第二个图层 //{ ... } ] 底图图层的显示内容覆盖全部图面，常用的底图图层包括： AMap.TileLayer，AMap.TileLayer.Satellite等
`overlayLayers`	`Array`	覆盖物图层列表，可同时启用多个, 结构与baseLayers相同, 比如： [ { id: 'traffic',//图层id，需唯一 enable: true, //是否启用 name: '路况图',//显示名称，html layer: new AMap.TileLayer.Traffic()//图层实例 }, //第二个图层 //{ ... } ] 覆盖物图层的显示内容仅覆盖部分图面，叠加于底图图层之上显示，常用的覆盖物图层包括：AMap.TileLayer.RoadNet，AMap.TileLayer.Traffic，AMap.ImageLayer等
`theme`	`String`	主题样式，内置`light`(默认)， `dark`两种，也可以配合css进行自定义设置

参数名称

类型

说明

baseLayers

Array

底图图层列表，每次只启用一个，图层信息的结构如下：

[
    //第一个图层
    {
        id: 'tile',//图层id，需唯一
        enable: true, //是否启用
        name: '标准图',//显示名称，html
        layer: new AMap.TileLayer() // 图层实例
    },
    //第二个图层
    //{ ... }
]

底图图层的显示内容覆盖全部图面，常用的底图图层包括： AMap.TileLayer，AMap.TileLayer.Satellite等

overlayLayers

Array

覆盖物图层列表，可同时启用多个, 结构与baseLayers相同, 比如：

[
    {
        id: 'traffic',//图层id，需唯一
        enable: true, //是否启用
        name: '路况图',//显示名称，html
        layer: new AMap.TileLayer.Traffic()//图层实例
    },
    //第二个图层
    //{ ... }
]

覆盖物图层的显示内容仅覆盖部分图面，叠加于底图图层之上显示，常用的覆盖物图层包括：AMap.TileLayer.RoadNet，AMap.TileLayer.Traffic，AMap.ImageLayer等

theme

String

主题样式，内置light(默认)， dark两种，也可以配合css进行自定义设置

方法

方法名称	返回值	说明
`getLayerInfoById(id:String)`	Object	在baseLayers和overlayLayers中查找对应id的图层信息并返回
`showLayersPanel()`		显示图层列表面板
`hideLayersPanel()`		隐藏图层列表面板

事件

事件名称	参数	说明
`layerPropChanged`	`{layer:Object:,props:Object}`	某个图层的属性被改变，通常于图层显隐切换时触发

BasicControl.Traffic接口

交通图控件（示例）

构造参数

参数名称	类型	说明
`open`	`Boolean`	是否开启交通图，默认true
`theme`	`String`	按钮的样式，默认'normal',其他可选值有'normal-simple'、'dark'、'dark-simple'
`autoRefresh`	`Boolean`	是否自动刷新交通信息，默认true
`interval`	`number`	刷新间隔，单位秒，默认30
`showButton`	`Boolean`	是否显示切换按钮，默认true

方法

方法名称	返回值	说明
`open()`		开启交通图
`close()`		关闭交通图
`showButton()`		显示切换按钮
`hideButton()`		隐藏切换按钮

基础控件 最后更新时间: 2021年01月22日

如何使用

控件类通用接口

BasicControl.Zoom接口

BasicControl.LayerSwitcher接口

BasicControl.Traffic接口

基础控件最后更新时间: 2021年01月22日