图炫（aimap.gl）地图可视化

# 控件

控件一般以 DOM 元素的形式存在于地图的四个角落，开发者可以移除或添加它们，同时也可以自定义地图控件。

A NavigationControl 控件包括缩放按钮和一个简单的指南针。

new NavigationControl(options: Object?)
1

# 参数

options(Object?)

Name Description
options.showCompass Boolean 默认 true If true 引入指南针按钮。
options.showZoom Boolean 默认 true If true 引入放大和缩小按钮。
options.visualizePitch Boolean 默认 false If true 旋转指南针的Y轴来显示俯仰角度。

# 示例

var nav = new aimap.NavigationControl();
map.addControl(nav, 'top-left');
1
2

# CompassControl

此CompassControl支持更加全面的地图罗盘信息展示。

new CompassControl()
1

# 示例

map.addControl(new aimap.CompassControl());
1

# GeolocateControl

GeolocateControl GeolocateControl 提供了一个按钮，使用浏览器自带的地理定位API， 在地图上定位用户。

部分浏览器可能不支持地理定位功能， 也有部分用户禁用了浏览器的该功能。 包括Chrome在内的现代浏览器，要求那些调用浏览器地理定位功能的网站使用HTTPS协议。 如果浏览器的地理定位功能不可用，GeolocateControl按钮将不可见。

实际采用的缩放层级将取决于终端设备所提供定位服务的精度。

GeolocateControl 支持两种模式。如果trackUserLocation 是 false (默认) 那么控件将变成一个按钮, 初次点击按钮会把地图的镜头设置为指向用户所在的位置。如果用户移动了，地图镜头状态不会更新。对桌面端用户来说这样是非常合适的。如果trackUserLocation是true 那么控件将变成一个切换按钮，当用户的位置处于活动状态时，将对其位置的更改进行主动监视。 在这个模式下，the GeolocateControl有三种状态：

  • active - 当用户的位置发生变化时，地图的相机焦点会自动更新，将其保持在地图的中心位置。
  • passive - 用户的位置点会自动更新，但是地图的相机焦点不会变化。
  • disabled
new GeolocateControl(options: Object?)
1

# 参数

options(Object?)

Name Description
options.positionOptions Object default {enableHighAccuracy:false,timeout:6000} A Geolocation API PositionOptions (opens new window) 对象.
options.fitBoundsOptions Object default {maxZoom:15} 参考 fitBounds 当地图平移缩放到用户位置时，使用这个可选对象。默认是把 maxZoom 设置成15，来限制地图的最大缩放精度。
options.trackUserLocation Object default false 为 true 时， Geolocate控件变成一个切换按钮，当激活时，地图将在用户位置发生更改时接收到更新。
options.showUserLocation Object default true 默认情况下，地图会在用户所在位置上显示一个点。设置为 false 禁用。

# 示例

map.addControl(new aimap.GeolocateControl({
    positionOptions: {
        enableHighAccuracy: true
    },
    trackUserLocation: true
}));
1
2
3
4
5
6

# 实例成员

trigger()

触发地理定位

返回值

boolean: Returns false 如果在控件加入地图前调用，否则返回 true 。

# 事件

geolocate

在每次Geolocation API获取的位置更新时触发，返回值为success。

属性

data(Position): 返回的 Position (opens new window) 来自回调的对象 Geolocation.getCurrentPosition() (opens new window) or Geolocation.watchPosition() (opens new window) .

error

在每次Geolocation API获取的位置更新时触发，返回值为error。

属性

data(PositionError): 返回的 PositionError (opens new window) 来自回调的对象 Geolocation.getCurrentPosition() (opens new window) 或 Geolocation.watchPosition() (opens new window) 。

trackuserlocationstart

该事件当 Geolocate控件的状态锁定为active时触发。有两种情况：在控件首次为用户成功获得 Geolocation API的定位时会锁定为active状态(随后冒泡Geolocate事件)；当用户在Geolocate控件为background状态时点击按钮，该控件会使用最后一个已知的位置点作为地图中心并进入active锁定模式(只有用户的位置发生更改，才会冒泡geolocate事件)

trackuserlocationend

用户在锁定活动点期间改变镜头时Geolocate控件会变成background状态，这时会触发该事件。该效果只有当 trackUserLocation 为 true时才会应用。在 background 的状态时 ,地图上的点位会随着位置的变化而更新，但是地图的镜头则不会。

# AttributionControl

一个 AttributionControl 控制展示地图的属性信息。

new AttributionControl(options: Object?)
1

# 参数

options(Object?)

Name Description
options.compact boolean? 如果 true 鼠标悬停时将强制显示一个简洁版的属性信息 false 强制显示完整属性控件。默认为一个响应属性控件，当地图宽度低于640像素的时候该控件会折叠起来。
options.customAttribution (string | Array<string>)? 用来表达额外的属性字符串。

# 示例

var map = new aimap.Map({attributionControl: false})
    .addControl(new aimap.AttributionControl({
        compact: true
    }));
1
2
3
4

# ScaleControl

此ScaleControl 控件用于显示图上距离和实际距离的比值（比例尺）。

new ScaleControl(options: Object?)
1

# 参数

options(Object?)

Name Description
options.maxWidth number default '100' ScaleControl控件的最大长度，以像素为单位。
options.unit string default 'metric' 距离的单位 ( 'imperial' , 'metric' 或 'nautical' ）。

# 示例

var scale = new aimap.ScaleControl({
    maxWidth: 80,
    unit: 'imperial'
});
map.addControl(scale);

scale.setUnit('metric');
1
2
3
4
5
6
7

# 实例成员

setUnit(unit)

设置比例尺的距离单位

参数

unit(Unit)距离的单位 ( 'imperial' , 'metric' 或 'nautical' ）。

# FullscreenControl

A FullscreenControl 全屏控件，包含一个切换地图进入和退出全屏模式的按钮。

new FullscreenControl(options: Object?)
1

# 参数

options(Object?)

Name Description
options.container HTMLElement? container 是 兼容DOM元素 (opens new window) 它应当被全屏显示。默认情况下，地图容器元素会被全屏显示。

# 示例

map.addControl(new aimap.FullscreenControl({container: document.querySelector('body')}));
1

# DrawControl

此DrawControl 控件用于在地图中显示绘图控件，绘图控件支持绘制点，线，面，圆，矩形，并支持吸附功能，由于DrawControl的接口较多，因此详细内容可参考本章节的子目录。

# IControl

添加地图交互控件的接口。 这是一份 开发者编写模块的规范：这不是 一个 exported 方法或者类

控件必须实现onAdd 和 onRemove方法，并且必须要自带一个 元素，通常是一个div元素。 为了使用 aimap.gl 默认的控件样式，需要添加aimap-ctrl 类到你的控件节点中。

# 示例

// 用ES6标准实现控件类
class HelloWorldControl {
    onAdd(map) {
        this._map = map;
        this._container = document.createElement('div');
        this._container.className = 'aimap-ctrl';
        this._container.textContent = 'Hello, world';
        return this._container;
    }

    onRemove() {
        this._container.parentNode.removeChild(this._container);
        this._map = undefined;
    }
}

// 用ES5标准实现控件的原型类
function HelloWorldControl() { }

HelloWorldControl.prototype.onAdd = function(map) {
    this._map = map;
    this._container = document.createElement('div');
    this._container.className = 'aimap-ctrl';
    this._container.textContent = 'Hello, world';
    return this._container;
};

HelloWorldControl.prototype.onRemove = function () {
     this._container.parentNode.removeChild(this._container);
     this._map = undefined;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 实例成员

getDefaultPosition()

可以为该控件提供默认位置。如果这个方法 已经实现并且 Map#addControl 被调用时没有传入position 参数， 那么getDefaultPosition返回的值会被用作 控件的位置参数。

返回值

string: 控件的位置值，addControl有效参数之一。

onRemove(map)

取消注册地图上的交互控件并且使其脱离事件监听 和资源绑定 。这个方法被Map#removeControl 内部调用。

参数

map(Map)这个控件会从地图上被移除

返回值

undefined: 这个方法不要求有返回值

onAdd(map)

在地图上注册一个控件并使其能注册事件监听 并绑定资源。这个方法被Map#addControl 内部调用.

参数

map(Map)控件将被添加到地图上

返回值

HTMLElement: 控件容器里的元素，它应该由控件生成，由onAdd返回，而不是附加 到DOM上：如果有必要的话，地图对象会把控件的元素插入到DOM中。

最后更新于: 11/22/2021, 10:51:38 AM