aimap开发文档

# 2.1 地图操作

# 2.1.1 移动地图中心到指定点

//地图定位到点
map.flyTo({
    center: [121.59751247938203, 29.835174764721145],
    zoom: 17,
    speed: 1.2,
    curve: 1.42,
    essential: true,
    easing: (t) => {
        return t;
    }
});
1
2
3
4
5
6
7
8
9
10
11

功能描述:

使地图以动画方式定位到其他中心点上。

参数:

字段名 类型 是否必须 默认值 说明
zoom number 否 预设的缩放级别
center LngLat 是 预设的中心
bearing number 否 预设的方位角（bearing，rotation），按照逆时针偏离正北方的度数计算。
pitch number 否 预设的倾斜度（pitch，tilt），单位为度。
duration number 否 动态转换的持续时间，按毫秒计算。
easing Function 否 该函数持续的时间在 0~1 之间， 返回一个表示状态的数字，初始状态为 0，最终状态为 1
offset Point 否 动态转换结束后，目标中心与实际地图容器中心间的偏差。
animate boolean 否 true 如果 false ，则没有动画效果。
essential boolean 否 false 如果 true ，那么动画被认为是必不可少的，若对动画有要求，建议将该值设为true
curve number 否 1.42 随着飞行路径出现的缩放“曲线”。大幅度移动时会出现较高的缩放值，较小移动时有较低的缩放值 。值为 1 时会出现圆周运动。
speed number 否 1.2 与 curve 相关的动态转换的平均速率。速率为 1.2 指，地图每秒以 1.2 倍于 curve 可见整屏（screenful）的速度随着飞行路径移动。 整屏（screenful） 指地图的可见屏幕跨度区域。它不对应固定的物理距离，而是随缩放级别变化。
maxDuration number 否 动效的最长持续时间，单位为毫秒。如果持续时间超过此最大值，会重置为0。

# 2.1.2 指定的地理边界适配窗口

fitBounds(bounds, options?)

const bbox = [[121.54920799999999,31.177292000000001],[121.56890300000001,31.191299000000001]];
// 或者使用简写[minX,minY,maxX,maxY]依次表示左下角经度、左下角纬度、右上角经度、右上角纬度
// const bbox = [121.54920799999999,31.177292000000001,121.56890300000001,31.191299000000001];
map.fitBounds(bbox, {
  padding: {top: 10, bottom:25, left: 15, right: 5}
});
1
2
3
4
5
6

功能描述:

在指定的地理边界内平移和缩放地图，以包含其可见区域。 当地图方位角不为 0 的时候，该函数会将方位角重置为 0。

参数:

bounds: 以[西南，东北] 为顺序，将这些边界设在视口中心，使用最大的缩放级别使其适应该视口。如[[121.54920799999999,31.177292000000001],[121.56890300000001,31.191299000000001]]

options参数:

字段名 类型 是否必须 默认值 说明
padding number | object 否 0 以给定边界添加的以像素为单位的填充量 ，必须为非负整数。

# 2.1.3 地图放大、缩小(动画方式)

// 缩放到指定层级
map.zoomTo(
  	15, // 指定想要缩放到的等级
  	{   // 缩放的动画参数
        duration,
        animate,
        easing: (t) => {
            return t;
        },
	}
);
// 放大一个缩放等级
map.zoomIn({
    duration,
    animate,
    easing: (t) => {
        return t;
    },
});
// 缩小一个缩放等级
map.zoomOut({
    duration,
    animate,
    easing: (t) => {
        return t;
    },
});
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

功能描述:

以动画形式对地图进行指定层级的放缩。

Options参数:

字段名 类型 是否必须 默认值 说明
duration number 否 0 动态转换的持续时间，按毫秒计算。
easing Function 否 该函数持续的时间在 0~1 之间， 返回一个表示状态的数字，初始状态为 0，最终状态为 1
offset Point 否 [0,0] 动态转换结束后，目标中心与实际地图容器中心间的偏差，单位为像素（Pixel）
animate boolean 否 true 如果 false ，则没有动画效果。

# 2.1.4 更换底色(样式风格)

const styleName = "aimap://styles/aimap/cy-darkblue-v3";
map.setStyle(styleName);
1
2

功能描述：

更换地图的主题样式。

# 2.1.5 二维三维地图切换

map.setPitch(0);  //设置地图倾斜角为0度
map.setPitch(60); //设置地图倾斜角为60度
1
2

功能描述:

设置地图的倾斜角为0度则显示为2D地图，设置地图的倾斜角为大于0度小于等于60则显示为3D地图。

# 2.1.6 新增预定义图层

TIP

全部预定义图层列表可参考： 3.3 预定义图层列表

map.addLayer({
    id: "boundary-township-pudong",  //预定义图层id，参见3.4章节
    zIndex: 31, // 显示的Level层级，0为背景图层，Level高的图层会覆盖Level低的图层
  	style: {    // 可以使用默认值，
        "fill-opacity": 0.3,     // 如果是多边形图层，则设置填充的透明度，如果不设置，则使用默认值
        "fill-color": "#800000", // 如果是多边形图层，则设置填充的颜色，如果不设置，则使用默认值
        "line-opacity": 1,       // 如果是线图层，则设置线的透明度，如果不设置，则使用默认值
        "line-width": 2,         // 如果是线图层，则设置线的宽度，单位pixel，如果不设置，则使用默认值
        "line-color": "#0EFf00", // 如果是线图层，则设置线的颜色，如果不设置，则使用默认值
    }
});
1
2
3
4
5
6
7
8
9
10
11

功能描述:

新增预定义图层。

参数:

字段名 类型 是否必须 默认值 说明
id string 是 图层的名称
zIndex number 否 参考3.3 预定义图层列表 图层的显示Level，一般采用默认层级
style Style 否 参考3.4 Style配置 图层的显示风格配置

# 2.1.7 显示预定义图层

TIP

全部预定义图层列表可参考： 3.3 预定义图层列表

map.showLayer("boundary-township-pudong");
1

功能描述:

显示预定义图层。当预定义图层处于隐藏状态时调用此接口可显示对应图层。

# 2.1.8 隐藏预定义图层

TIP

全部预定义图层列表可参考： 3.3 预定义图层列表

map.hideLayer("boundary-township-pudong");
1

功能描述:

隐藏预定义图层。当该预定义图层处于显示状态时调用此接口可隐藏对应图层。

# 2.1.9 移除预定义图层

TIP

全部预定义图层列表可参考： 3.3 预定义图层列表

map.removeLayer("boundary-township-pudong");
1

功能描述:

移除预定义图层。对已加载的预定义图层，调用此接口可将对应图层移除。

# 2.1.10 返回初始化视角

map.reset();
1

功能描述:

返回地图初始化时的视角。

# 2.1.11 地图初始化完成事件

map.on('loadcomplete', () => {
    console.log("地图加载完成");  //在此处添加相关的业务操作
});
1
2
3

功能描述:

地图初始化加载完成事件。

# 2.1.12 获取地图所有预定义图层

TIP

全部预定义图层列表可参考： 3.3 预定义图层列表

map.getLayers()
1

功能描述:

获取地图的所有预定义图层ID。

# 2.1.13 预定义图层事件绑定、取消

TIP

以预定义街镇图层为例，当用户已加载预定义的街镇图层boundary-township-pudong后，可调用以下接口实现事件的绑定与取消。

全部预定义图层列表可参考： 3.3 预定义图层列表

const onClick = (e) => {
    console.log('这里是点击位置图层信息：',e);
};

// 获取预定义街镇图层实例对象
const instanceLayer = map.getLayer("boundary-township-pudong");

// 绑定预定义街镇图层实例点击事件
instanceLayer.on("click", onClick);

// 关闭街镇图层实例点击事件
instanceLayer.off("click", onClick);
1
2
3
4
5
6
7
8
9
10
11
12

# 2.1.14 预定义图层样式更新

TIP

以预定义街镇图层为例，当用户已加载预定义的街镇图层boundary-township-pudong后，可调用以下接口实现图层样式更新。

全部预定义图层列表可参考： 3.3 预定义图层列表

setStyle Options参数配置可参考：

3.4.1 填充(Fill)配置

3.4.2 线(Line)配置

3.4.3 文字(Text)配置

// 获取预定义街镇图层实例对象
const instanceLayer = map.getLayer("boundary-township-pudong");

// 更新预定义街镇图层样式
instanceLayer.setStyle({
    'fill-color': 'red',
    'fill-opacity': 0.6,
    'line-color': 'green',
    'line-width': 2,
    'line-opacity': 0.7,
});
1
2
3
4
5
6
7
8
9
10
11
12

# 2.2 自增点、线、圆、面、热力及信息弹窗

# 2.2.1 通用参数及成员函数

TIP

用户可通过接口aimap.MassMarkerLayer、aimap.LineString、aimap.Circle、aimap.Polygon、aimap.HeatmapLayer创建相应实例来实现自增点、线、圆、面、热力

参数：

字段名 类型 是否必须 默认值 说明
id string 否 图层的名称
map Map 否 地图实例
data Data 是 参考3.1 图层数据规范(Data)
filter Filter 否 全部筛选器参考 3.6 配置中的表达式应用
dataOptions DataOptions 否 此参数目前仅限于点数据的配置使用
spatialReference string 否 gcj02 参考3.5 坐标系支持
style Style 否 图层的显示样式配置 ,参考3.4 Style配置
minZoom number 否 3 能显示的最小的zoom level
maxZoom number 否 20 能显示的最大的zoom level

dataOptions参数

字段名 类型 是否必须 说明
pipelines Array<Pipeline> 否 数据预处理的pipeline，当前支持regeocoding处理器

Pipeline

字段名 类型 是否必须 说明
type string 是 数据预处理pipeline的类型，不同的类型，代表不同的处理器，当前仅支持regeocoding
projection object 是 指明township(街镇字段)、neighborhood（村居字段）以及adminCenter（上海市浦东新区行政管理中心字段）映射到源数据使用什么字段名，默认使用相同的字段名即可。

示例：对点数据添加regeocoding预处理器，补全街镇和村居字段

pipelines: [{
  type: 'regeocoding',
  projection: {
    'township': 'township', //将获取到的街镇字段映射到源数据中的township字段，后续可以使用该字段进行过滤或者显示
    'neighborhood': 'neighborhood', //将获取到的村居字段映射到源数据中的neighborhood字段，后续可以使用该字段进行过滤或者显示
    'adminCenter': 'adminCenter', //将获取到的上海市浦东新区行政管理中心字段映射到源数据中的adminCenter字段，后续可以使用该字段进行过滤或者显示
  }
}],
1
2
3
4
5
6
7
8

成员函数：

addTo(map:Map)

若创建实例时未传Map实例，则需使用该接口把自定义图层添加至Map实例中。

remove()

从Map对象中移除该几何图层。销毁实例。

show()

显示该几何图层

hide()

隐藏该几何图层

flyTo(options?: Object)

移动地图到该图层的几何中心点

参数：

名称 类型 是否必须 默认值 说明
zoom number 否 当前地图层级 地图缩放等级
pitch number 否 当前地图倾角 地图倾斜角度
bearing number 否 当前地图旋转角度 地图选择角度
padding Object 否 {top: 10, bottom: 10, left: 50, right: 50} 图层距离容器四周距离(单位像素)
speed number 否 1.2 动画速度
curve number 否 1.42
filter Filter 否 当前仅可对数据中id或name过滤后移动，直接传对应的值即可
maxDuration number 否 3000 整个fly动画持续时间，单位：毫秒

fitView(options?: Object)

使图层适应当前窗口

参数：

名称 类型 是否必须 默认值 说明
padding Object 否 {top: 10, bottom: 10, left: 50, right: 50} 图层距离容器四周距离(单位像素)
speed number 否 1.2
filter Filter 否 当前仅可对数据中id或name过滤后移动，直接传对应的值即可
curve number 否 1.42
maxDuration number 否 3000 整个fit动画持续时间，单位：毫秒

setData(data: Data)

更新数据。为空数据时可将图层中的所有内容清空，不会销毁实例。

// 清除图层的数据
layer.setData(null)

// 重新设置图层的数据
layer.setData([{
  	coordinates: [121.12, 31.12]
},
// ....
]);
1
2
3
4
5
6
7
8
9

setZoomRange(minZoom: number, maxZoom: number)

设置该图层的缩放层级范围，使图层大于等于minZoom且小于maxZoom时显示。

setStyle(style:Style)

更新图层的风格，增量更新样式或者更新已有的样式参数。

setStyleProperty(name: string, value: any)

设置该图层的style风格中的某项配置项

layer.setStyleProperty('line-color', '#faafee');
1

setFilter(表达式？| null | undefined)

为当前图层设置筛选器。如果提供了 null 或 undefined ，函数会从图层中移除所有存在的筛选器。

全部筛选器参考 3.6 配置中的表达式应用

// 使layer图层仅显示属性name值等于test的部分
layer.setFilter(['==', 'name', 'test']);
// 清除筛选器
layer.setFilter(null);
1
2
3
4

getStyleProperty(name: string)

获取该图层的风格中的某项配置项

on(type, listener)

为特定类型的事件添加监听器。

参数：

名称 类型 说明
type string 监听的事件类型，以下任一 'mousedown' ， 'mouseup' ， 'click' ， 'dblclick' ， 'mousemove' ， 'mouseenter' ， 'mouseleave' ， 'mouseover' ， 'mouseout' ， 'touchstart' ， 'touchend' ，或 'touchcancel' 。 mouseenter 和 mouseover 当光标从地图画布外部进入指定图层的可视区域时被触发。 mouseleave 和 mouseout 当光标离开地图画布或指定图层的可视区域时被触发。
listener Function 事件被触发时调用的函数实例。函数类型为： function(e: MapsEvent) 或者 function()

off(type, listener)

移除先前用Layer#on添加的事件监听器。

参数：

名称 类型 说明
type string 之前用来安装监听器的事件类型。
listener Function 之前安装的监听器函数实例。

# 2.2.2 点状图形

new aimap.MassMarkerLayer({
    id: "mass-marker-1",
    map,
    spatialReference: 'gcj02',  //坐标系声明
    data : [{
        coordinates: [121.612846, 31.205494]
    }, {
        coordinates: [121.612946, 31.205494]
    },{
        coordinates: [121.612746, 31.205494]
    },{
        coordinates: [121.612646, 31.205494]
    }]
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

功能描述:

撒点（点状）图形

# 2.2.3 点的闪烁效果

创建闪烁海量点

const MassMarkerLayer = new aimap.MassMarkerLayer({
    id: "mass-marker-1",
    map,
    spatialReference: 'gcj02',  //坐标系声明
    data: [{
        id: '1',
        name: '中文-1\ntest-1',
        coordinates: [121.612846, 31.205494]
    }, {
        id: '2',
        name: '中文2',
        coordinates: [121.613946, 31.205494]
    }, {
        id: '3',
        name: '中文3',
        coordinates: [121.611746, 31.205494]
    }, {
        id: '4',
        name: '中文4',
        coordinates: [121.610646, 31.205494]
    }],
    style: {
        'circle-color': '#ff00ff',
        'circle-radius': 6,
        'circle-stroke-color': '#ffff00',
        'circle-stroke-opacity': 0.5,
        'circle-stroke-width': 1,
        'blink': { // 点闪烁的样式
            'circle-color': '#ff6600',
            'circle-radius': 60,
            'circle-opacity': 1,
            'visibility': 'visible',//是否闪烁，默认显示，为 none 则不显示
        }
    }
});
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
32
33
34
35

功能描述:

创建闪烁的海量点图层。

开启闪烁

blink(表达式?)

// 全部闪烁
MassMarkerLayer.blink();
// 闪烁属性id值为3的点
MassMarkerLayer.blink(['==', 'id', '3']);
1
2
3
4

功能描述:

设置动画效果（闪烁已撒的点）

参数:

参数值 类型 是否必须 默认值 说明
filter Filter 否 数据过滤属性表达式。全部筛选器参考 3.6 配置中的表达式应用

关闭闪烁效果

clearBlink()

MassMarkerLayer.clearBlink();
1

功能描述:

关闭动画效果（关闭闪烁）。

# 2.2.4 点的GIF图形支持

// 创建使用GIF的海量点图层
const layer = new aimap.MassMarkerLayer({
    id: "mass-marker-1",
    map,
    spatialReference: 'gcj02',  //坐标系声明
    data: [{
        id: '1',
        name: '中文-1\ntest-1',
        coordinates: [121.612846, 31.205494]
    }, {
        id: '2',
        name: '中文2',
        coordinates: [121.613946, 31.205494]
    }, {
        id: '3',
        name: '中文3',
        coordinates: [121.611746, 31.205494]
    }, {
        id: '4',
        name: '中文4',
        coordinates: [121.610646, 31.205494]
    }],
    images: [{ // GIF图片
        id: 'spin',
        url: './images/spin.gif',
        type: 'gif'
    }],
    style: {
        'icon-anchor': 'center',
        'icon-image': 'spin',
        'icon-size': 0.1,
    }
});
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
32
33

功能描述:

使用GIF动图来展示海量点。样式style配置可参考3.4.4 图标(ICON)配置

# 2.2.5 线状图形

const lineInstance = new aimap.LineString({
    spatialReference: 'gcj02',  //坐标系声明
    data: {
        coordinates: [[121.613846, 31.205494],[121.613946, 31.205494],[121.613946, 31.205394]]
    },
    style: {
        'line-width':3,
        'line-color': '#FF0000'
    },
    map
});
1
2
3
4
5
6
7
8
9
10
11

功能描述:

自定义显示线。样式style配置可参考3.4.2 线(Line)配置

# 2.2.6 面状图形

const polygonInstance = new aimap.Polygon({
    spatialReference: 'gcj02',  //坐标系声明
    data: {
        coordinates: [[[121.613846, 31.205494],[121.613946, 31.205494],[121.613946, 31.205394],[121.613846, 31.205494]]]
    },
    style: {
        'fill-color': '#FF0000'
    },
    map
});
1
2
3
4
5
6
7
8
9
10

功能描述:

自定义显示面（多边形）。样式style配置可参考3.4.1 填充(Fill)配置

# 2.2.7 文字落图

示例：

const MassMarkerLayer = new aimap.MassMarkerLayer({
    id: "mass-marker-1",
    map,
    spatialReference: 'gcj02',  //坐标系声明
    data: [{
        id: '1',
        name: '中文-1\ntest-1',
        coordinates: [121.612846, 31.205494]
    }, {
        id: '2',
        name: '中文2',
        coordinates: [121.613946, 31.205494]
    }, {
        id: '3',
        name: '中文3',
        coordinates: [121.611746, 31.205494]
    }, {
        id: '4',
        name: '中文4',
        coordinates: [121.610646, 31.205494]
    }],
    style: {
        'text-field': '{name}',
        'text-size': 12,
        'text-color': '#ff0000',
    }
});
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

功能描述:

仅在落点位置显示文字。样式style配置可参考3.4.3 文字(Text)配置

# 2.2.8 自定义热力图层

示例：

const data = "用户的点坐标集合";
const heatmap = new aimap.HeatmapLayer({
    data,
    map,
    style: {
        'heatmap-radius': 5,//单个点的半径，可设置为表达式
        'heatmap-weight': 2,//单个点的权重，可设置为表达式
        'heatmap-intensity': [
            "interpolate", ["linear"], ["zoom"],
            0, 0.01,
            9, 0.02,
            11, 0.08,
            13, 0.15,
            15, 0.2
        ],
        'heatmap-color': [
            "interpolate",
            ["linear"],
            ["heatmap-density"],
            0, "rgba(0, 0, 255, 0)",
            0.1, "royalblue",
            0.3, "cyan",
            0.5, "lime",
            0.7, "yellow",
            1, "red"
        ]
    }
});
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

功能描述:

自定义显示热力。样式style配置可参考3.4.6 热力(heatmap)配置

# 2.2.9 信息弹窗

TIP

对用户自定义的图层，可通过该接口设置信息弹窗。注意，对于一个地图实例来说，全局仅可显示一个信息弹窗。

若是带有HTML标签的参数，可在其内添加class声明，以达到对弹窗进行样式设定的效果。

因为地图默认绑定了弹窗相关的事件，例如在默认情况下，点击地图关闭弹窗。 所以，当出现弹窗事件响应异常时，可以尝试在初始化弹窗时，将 closeOnClick 设置为 false，来规避一些异常行为。

setPopup(context: String | htmlNode, options: Object)

参数:

context: 支持纯文本和以HTML标签组成字符串的参数，或者传入一个 HTMLElement 实例。

options:

字段名 类 是否必须 默认值 说明
offset number 否 0 弹窗锚点距离经纬度的距离，单位像素
closeOnClick boolean 否 true 点击地图时，将弹窗关闭

示例：

查看示例 (opens new window)

const instanceLayer = new aimap.MassMarkerLayer({
    map,
    data: [{
        id: '1',
        name: '中文-1',
        icon: 'company-yellow',
        coordinates: [121.612846, 31.205494]
    }, {
        id: '2',
        name: '中文2',
        icon: 'company-green',
        coordinates: [121.613946, 31.205494]
    }, {
        id: '3',
        name: '中文3',
        icon: 'company-red',
        coordinates: [121.611746, 31.205494]
    }, {
        id: '4',
        name: '中文4',
        icon: 'company-blue',
        coordinates: [121.610646, 31.205494]
    }],
    images: [{
        id: 'company-yellow',
        type: 'png',
        url: 'https://location-dev.newayz.com/static/images/company/small/yellow.png'
    }, {
        id: 'company-red',
        type: 'png',
        url: 'https://location-dev.newayz.com/static/images/company/small/red.png'
    }, {
        id: 'company-green',
        type: 'png',
        url: 'https://location-dev.newayz.com/static/images/company/small/green.png'
    }, {
        id: 'company-blue',
        type: 'png',
        url: 'https://location-dev.newayz.com/static/images/company/small/blue.png'
    }],
    style: {
        'text-field': '{name}',
        'text-color': '#00ff00',
        'text-anchor': 'bottom',
        'text-offset': [0, -2],
        'icon-anchor': 'bottom',
        'icon-image': ['get', 'icon'],
        'icon-size': 0.3,
        blink: {
            // 点闪烁的样式
            "circle-color": "#E96D71",
            "circle-radius": 50,
            "circle-opacity": 0.7,
            visibility: "none", //是否闪烁，默认显示，为 none 则不显示
        },
    }
});
instanceLayer.on('click', (e) => {
    const { properties, geometry } = e.features[0];
    console.log(e.features[0], "click point");
    const { id, name, icon } = properties;

    // 第一种初始化弹窗的方法：
    // instanceLayer.setPopup("<p>titile</p><span>我是测试</span>");

    // 第二种初始化弹窗的方法：
    // var div = window.document.createElement('div');
    // div.innerHTML = 'Hello, world!';
    // instanceLayer.setPopup(div);

    // 第三种初始化弹窗的方法：
    instanceLayer.setPopup(`${id}.${name}.${icon}`, {
        offset: 16,
        closeOnClick: false,
    });
    instanceLayer.getPopup().setLngLat(e.features[0].geometry.coordinates); // 对于点图层请使用点图层属性中自带的经纬度
    // instanceLayer.getPopup().setLngLat(e.lngLat);//对于非点图层，请使用鼠标点击地图位置的经纬度

    // 这里是获取了信息框对象，绑定了打开事件，开启弹窗时，闪烁当前点击的点
    instanceLayer.getPopup().on("open", () => {
        instanceLayer.blink(["==", "id", id]);
    });
    // 这里是获取了信息框对象，绑定了关闭事件，取消闪烁的点
    instanceLayer.getPopup().on("close", () => {
        instanceLayer.clearBlink();
    });
    instanceLayer.togglePopup();

    // 地图视角切换到对应的点击图标位置
    instanceLayer.flyTo({ filter: id, zoom: 16 });
    // instanceLayer.flyTo({filter: id, zoom: 16, padding:{bottom: 400}}); //添加偏移
});
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

togglePopup()

打开或者关闭弹窗功能

getPopup()

获取用户设置的弹窗实例

isOpen()

判断弹窗当前是否显示。

instanceLayer.getPopup().isOpen();
1

setLngLat()

通过弹窗实例，设置弹窗显示位置，注意不同类型的图层要使用适合的经纬度值。

// 示例一
instanceLayer.getPopup().setLngLat([121, 31]);

// 示例二 获取实例后设置显示位置
const popupInstance = instanceLayer.getPopup();
popupInstance.setLngLat([121, 31]);
1
2
3
4
5
6

on

为弹窗实例添加事件监听 close,open。

WARNING

注意绑定使用该事件时，需要在初始化弹窗时设置closeOnClick参数为false，即禁用点击地图关闭弹窗。

// 示例一
instanceLayer.getPopup().on('open', () => {
    console.log('弹窗打开了！');
});
instanceLayer.getPopup().on('close', () => {
    console.log('弹窗关闭了！');
});

// 示例二 获取实例后绑定
const popupInstance = instanceLayer.getPopup();
popupInstance.on('open', () => {
    console.log('弹窗打开了！');
});
popupInstance.on('close', () => {
    console.log('弹窗关闭了！');
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 2.2.10 圆形

TIP

样式style配置可参考3.4.1 填充(Fill)配置 、3.4.2 线(line)配置

const circle = new aimap.Circle({
    spatialReference: 'gcj02',  //坐标系声明
    data: {
        coordinates: [121.613846, 31.205494], // 中心点坐标
        radius: 200, //半径，单位：米
    },
    style: {
        'fill-color': '#FF0000' //圆的填充色，与多边形面样式一致
    },
    map
});
1
2
3
4
5
6
7
8
9
10
11

一次创建多个圆形

const circle = new aimap.Circle({
    spatialReference: 'gcj02',  //坐标系声明
    data: [{
        coordinates: [121.613846, 31.205494], // 中心点坐标
        radius: 200, //半径，单位：米
    },{
        coordinates: [121.614846, 31.205494], // 中心点坐标
        radius: 130, //半径，单位：米
    }],
    style: {
        'fill-color': '#FF0000' //圆的填充色，与多边形面样式一致
    },
    map
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

功能描述:

自定义显示圆。

# 2.3 轨迹图层

# 2.3.1 轨迹图层创建

const layer = new aimap.TrackLayer({
    spatialReference: 'gcj02',  //坐标系声明
    dataType: 'geojson',
    data: {
        // 轨迹
        coordinates: [[121.73137, 31.11906], [121.73337, 31.11906], [121.73537, 31.11906],
            [121.73737, 31.11906], [121.73937, 31.11906], [121.74137, 31.11906], [121.74337, 31.11906],
            [121.74537, 31.11906], [121.74737, 31.11906], [121.74937, 31.11906], [121.75137, 31.11906],
            [121.75337, 31.12106], [121.75537, 31.12306]]
    },
    style: {
        "line-color": "#ff0000",
        "line-width": 2,
        // 运动的轨迹点样式
        "trackPoint": {
            "circle-color": "#ff0000",
            "circle-radius": 4
        },
        // 起点样式
        "start": {
            "circle-color": "#ffff00",
            "circle-radius": 4,
            'text-field': '起点',
            'text-size': 12,
            'text-color': '#ff0000',
            'text-anchor': 'right',
        },
        // 终点样式
        "end": {
            "circle-color": "#00ff00",
            "circle-radius": 4,
            'text-field': '终点',
            'text-size': 14,
            'text-color': '#ff00ff',
            'text-anchor': 'left',
        }
    },
    animation: {
        repeat: false,  // 是否自动重复播放
        duration: 2,    // 播放时长，以秒为单位
        autoplay: false // 是否自动开始播放
    },
    minZoom: 3,
    maxZoom: 20
});

// 监听 play 事件
// 注意：必须在添加到地图之前添加事件，否则可能会丢失事件
layer.on('play', (e) => {
    switch (e.status) {
        case 'started':
            // 动画开始/恢复播放时触发此事件
            console.log('started');
            break;
        case 'paused':
            // 动画暂停时触发此事件
            console.log('paused');
            break;
        case 'stopped':
            // 动画已结束。
            // 注意：repeat时不会触发此事件
            console.log('stopped');
            break;
        case 'completed':
            // 到达轨迹终点时触发此事件
            console.log('completed');
            break;
    }
});

// 添加至地图
layer.addTo(map);
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

功能描述:

轨迹图层创建。

# 2.3.2 暂停和播放轨迹

// 暂停轨迹播放动画
layer.pause();
// 如当前状态为paused，则恢复播放轨迹动画；如为stopped，则从头播放
layer.play();
1
2
3
4

功能描述:

暂停播放轨迹动画及继续播放轨迹动画。

# 2.4 迁徙图

# 2.4.1 迁徙图创建

TIP

使用该接口前需引入以下js库（在aimap-gl库引入之前）：

公网路径： https://location-dev.newayz.com/aimap-gl-js/libs/aimapcharts/3.8.5/aimapcharts.min.js

政务内网路径： https://yzt.pudong.gov.cn:80/aimap-gl-js/libs/aimapcharts/3.8.5/aimapcharts.min.js

构造函数:

new aimap.MigrationLayer(options: Object)
1

参数:

字段名 类型 是否必须 默认值 说明
id string 否 {layer}.{uuid} 默认值为uuid，该值不允许重复
map Map 是
data MigrationData 是
spatialReference string 否 gcj02 参考3.5 坐标系支持
style Style 否
minZoom number 否 3 能显示的最小的zoom level
maxZoom number 否 20 能显示的最大的zoom level

迁徙数据字段（MigrationData）说明:

字段名 类型 是否必须 说明
origin MigrationPoint 是 迁徙的起点数据，也就是单个的起始点
destinations Array<MigrationPoint> 是 迁徙的终点数据，也就是分散点

迁徙点（MigrationPoint）字段说明:

字段名 类型 是否必须 说明
name string 是 迁徙点的名称
coordinates Array<number> 是 迁徙点的坐标
value number 否 迁徙点的值

风格字段（Style）说明:

字段名 类型 是否必须 说明
origin Style 否 迁徙的起点的显示风格
destinations Style 是 迁徙的终点的显示风格
migration Style 是 迁徙的起终点之间连线的显示风格

起点（origin）的配置项说明:

style项 类型 默认值 说明
text-color string 文字颜色
text-anchor string left 文字显示的锚点
text-offset Array<number> [0,0] 文字的偏移量,[x,y]，单位：像素
text-field string name 文字显示方式
text-size number 文字大小
icon-image string 矢量图标（SVG）, 自带图标已有： 'pin', 'arrow','plane'
icon-size number 图标大小
icon-color string 图标颜色

icon-image

可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。

URL 为图片链接例如：

'image://http://xxx.xxx.xxx/a/b.png'
URL 为 dataURI 例如：

'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'
可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

例如：
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'
上面示例中就是使用自定义 path 的 symbol 表现飞机的图形。

Tip: symbol 的角度会随着轨迹的切线变化，如果使用自定义 path 的 symbol，需要保证 path 图形的朝向是朝上的，这样在 symbol 沿着轨迹运动的时候可以保证图形始终朝着运动的方向。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

终点（destinations）的配置项说明:

style项 类型 默认值 说明
text-color string 文字颜色
text-anchor string right 文字显示的锚点
text-offset Array<number> [0,0] 文字的偏移量,[x,y]，单位：像素
text-field string name 文字显示方式
text-size number 文字大小
circle-size number | Expression 支持固定大小，或者指定函数：根据数据自动计算大小
['interpolate', ['linear'], 'value', [5, 8,10,12]]
以上的函数可以简化成 [5,8,10,12]
circle-color string | Expression 图标颜色
或者Interpolate函数：
['interpolate', ['linear'], 'value', ['#120000', '#002200','#0000ff']]
以上函数可以简化成['#120000', '#002200','#0000ff']

若填写该值，会将text-color覆盖
animation-duration number 10 动画持续时间
animation-wave-brush string line 波纹绘制方式 line, fill
animation-wave-scale number 3 波纹圆环最大限制，值越大波纹越大

迁徙线（migration）配置项说明:

style项 类型 默认值 说明
line-width number 迁徙线的线宽
line-color string | Expression red 迁徙线的颜色
['interpolate', ['linear'], 'value', ['#120000', '#002200','#0000ff']]
以上函数可以简化成['#120000', '#002200','#0000ff']

若填写该值，会将icon-color覆盖
line-curveness number 迁徙线的弯曲程度
line-opacity number 1 迁徙线的透明度，0~1
icon-image string 'plane' 矢量图标（SVG）, 自带图标已有： 'pin', 'arrow','plane'
icon-size number 图标大小
icon-color Color 图标颜色（只有矢量图片才能设置颜色）
animation-direction string forward icon在迁徙线上运动方式
从起点向终点运动为：forward，反之为：backward
animation-duration number 12 箭头指向速度，值越小速度越快

icon-image

可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。

URL 为图片链接例如：

'image://http://xxx.xxx.xxx/a/b.png'
URL 为 dataURI 例如：

'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'
可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

例如：
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'
上面示例中就是使用自定义 path 的 symbol 表现飞机的图形。

Tip: symbol 的角度会随着轨迹的切线变化，如果使用自定义 path 的 symbol，需要保证 path 图形的朝向是朝上的，这样在 symbol 沿着轨迹运动的时候可以保证图形始终朝着运动的方向。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

示例:

const migrationLayerInstance = new aimap.MigrationLayer({
    map,
    spatialReference: 'gcj02',
    data: {
        origin: {
            name: "上海市",
            coordinates: [121.4737, 31.2304]
        },
        destinations: [{
            name: "无锡市",
            coordinates: [120.3119, 31.4912],
            value: 20
        }, {
            name: "南京市",
            coordinates: [118.7674, 32.0415],
            value: 1000
        }, {
            name: "南通市",
            coordinates: [120.864608, 32.016212],
            value: 3000
        }, {
            name: "嘉兴市",
            coordinates: [120.750865, 30.762653],
            value: 3300
        }]
    },
    style: {
        origin: {
            'text-color': '#00ff78',
            'text-anchor': 'right',
            'text-offset': [0, 0],
            'text-size': 19,
            'icon-size': 30,
            'icon-color': '#00ff78',
            'icon-image': 'pin',
        },
        destinations: {
            'text-color': 'green',
            'text-anchor': 'left',
            'text-offset': [0, 0],
            'text-size': 19,
            'circle-size': [5, 30],
            'circle-color': ['#00ff78', '#ff971b', '#acff43', '#ff73b7', '#ffff46',
                '#27bbfe'
            ],
            'animation-wave-brush': 'fill',
            'animation-wave-scale': 3,
            'animation-duration': 10,
        },
        migration: {
            'line-width': 2,
            'line-color': ['#00ff78', '#ff971b', '#acff43', '#ff73b7', '#ffff46',
                '#27bbfe'
            ],
            'line-curveness': 0.5,
            'line-opacity': 1,
            'icon-image': 'plane',
            'icon-size': 20,
            'icon-color': 'red',
            'animation-direction': 'forward',
            'animation-duration': 13,
        }
    }
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

功能描述:

显示OD飞线图层

# 2.4.2 移除

migrationLayerInstance.remove()
1

# 2.4.3 自适应几何中心

migrationLayerInstance.flyTo()
1

# 2.4.4 自适应窗口

migrationLayerInstance.fitView()
1

# 2.4.5 隐藏和显示

// 隐藏
migrationLayerInstance.hide();
// 显示
migrationLayerInstance.show();
1
2
3
4

# 2.5 浦东新区街镇图层

# 2.5.1 图层创建

map.addLayer({id: 'boundary-township-pudong'}); //添加街镇图层

map.showLayer('boundary-township-pudong'); // 当街镇处于隐藏状态时，显示街镇图层

map.hideLayer('boundary-township-pudong'); // 当街镇处于显示状态时，隐藏街镇图层
1
2
3
4
5

功能描述:

对浦东新区街道边界图层进行隐藏和显示。

# 2.5.2 单个街镇定位缩放

map.highlightLayer('boundary-township-pudong', "张江镇", {
	style: {
      	"fill-color": '#ff0000',
      	"fill-opacity": 0.5, // 0为全透明，这样可以控制不显示色块
      	"line-color": '#ffff00',
      	"line-width": 2,
      	"line-opacity": 1,
    }
}); // 指定街镇名称
1
2
3
4
5
6
7
8
9

功能描述:

地图转换到相应街镇视角。

Options:

FocusOptions:

对于highlight图层，在options里可以指定是否居中图层中的高亮要素，具体的参数如下：

focus: {
	//是否进行自动适应高亮要素边框，如果为`false`，则不进行自动使用高亮要素
	fitBounds: false

	//适应要素边框时，四边填充参数
	padding: {
		top: 10,    // 距离`map`画框上部的距离，单位：像素
		bottom: 10, // 距离`map`画框底部的距离，单位：像素
		left: 10,   // 距离`map`画框左部的距离，单位：像素
		right: 10,  // 距离`map`画框右部的距离，单位：像素
	}

	//在自动适应要素边框时的动画参数
	animation: {
		animate: false, // 如果为`false`，动画效果取消
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 2.5.3 清除街镇定位

map.clearHighlightLayer('boundary-township-pudong');
1

功能描述:

清除街镇定位描边。

# 2.5.4 街镇色块图展示

map.highlightLayer('boundary-township-pudong', "张江镇", {
    style: {
        "fill-color": '#ff0000', //指定街镇色块图显示
        "fill-opacity": 0.5, // 0为全透明，这样可以控制不显示色块；0.5是半透明色
        "line-color": '#ffff00',
        "line-width": 2,
        "line-opacity": 1,
    }
}); // 指定街镇名称
1
2
3
4
5
6
7
8
9

功能描述:

街镇区块的色块展示和清除。

# 2.5.5 街镇色块图清除

map.clearHighlightLayer('boundary-township-pudong');
1

功能描述:

街镇区块的色块展示和清除。

# 2.5.6 村居图层

map.addLayer({id: 'boundary-neighborhood-pudong'}); //添加街镇图层

map.showLayer('boundary-neighborhood-pudong'); // 当街镇处于隐藏状态时，显示街镇图层

map.hideLayer('boundary-neighborhood-pudong'); // 当街镇处于显示状态时，隐藏街镇图层
1
2
3
4
5

# 2.5.7 与外部数据联合显示

创建Layer时，需要指定需要联合的外部数据

字段 类型 默认值 说明
joinData Array<Object> 链接对象为用户自定义格式，如果存在id字段，则表示通过id字段与图层数据进行绑定，如果是其他字段，请在joinField字段中指定字段名进行绑定。
joinField string "id" 默认通过ID链接。对于浦东的街镇以及村居可以通过名称链接。同时村居需要是全称，比如‘南码头路街道金星居委’
style Style 需要根据外部的数据来配置显示风格，比如颜色等

示例

map.addLayer({
    id: 'boundary-township-pudong',
    joinData: [ //需要写上全部的街镇
        {
            showName: "100",
            count: 100,
            township: '祝桥镇'
        }, {
            showName: "500",
            count: 500,
            township: '东明路街道'
        }
        // 这里需要补充其他街镇的join数据
    ],
    joinField: "township",
    style: {
        // 通过join数据的count字段，进行颜色配置，小于200为红色，小于600为蓝色，大于等于600为黄色
        // step的表达式可以参考：3.7.2
        'fill-color': ["step", ["get-join", "count"], [200, 'red'], [600, 'blue'], 'yellow'],
        'fill-opacity': 0.8,
        'line-color': 'green',
        'line-width': 2,
        'line-opacity': 0.7,
    },
});
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

# 2.5.8 与外部数据联合后，控制区域的显示和隐藏

通过对style中的opacity字段的设置，可以通过外部数据字段的值来控制图层某些区域的显示和隐藏。

通过step表达式来控制显示和隐藏

map.addLayer({
    id: 'boundary-township-pudong',
    joinData: [ //需要写上全部的街镇
        {
            showName: "100",
            count: 100,
            township: '祝桥镇'
        }, {
            showName: "500",
            count: 500,
            township: '东明路街道'
        }
        // 这里需要补充其他街镇的join数据
    ],
    joinField: "township",
    style: {
        // 通过join数据的count字段，进行颜色配置，小于200为红色，小于600为蓝色，大于等于600为黄色
        // step的表达式可以参考：3.7.2
        // `get-join`如果获取不到相应的数据，则会使用后面给定的默认值`5`
        'fill-color': ["step", ["get-join", "count", 5], [200, 'red'], [600, 'blue'], 'yellow'],

        // 外部数据中`count`字段的值小于200时，隐藏不显示；大于等于200才显示
        'fill-opacity': ["step", ["get-join", "count"], [200, 0], 1],
        'line-color': 'green',
        'line-width': 2,
        'line-opacity': 0.7,
    },
});
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

通过match表达式来控制显示和隐藏

map.addLayer({
    id: 'boundary-township-pudong',
    joinData: [ //需要写上全部的街镇
        {
            showName: "100",
            count: 100,
            township: '祝桥镇'
        }, {
            showName: "500",
            count: 500,
            township: '东明路街道'
        }
        // 这里需要补充其他街镇的join数据
    ],
    joinField: "township",
    style: {
        // 通过join数据的count字段，进行颜色配置，小于200为红色，小于600为蓝色，大于等于600为黄色
        // step的表达式可以参考：3.7.2
        'fill-color': ["step", ["get-join", "count"], [200, 'red'], [600, 'blue'], 'yellow'],

        // 外部数据中`count`字段的值是100时，隐藏不显示；其他显示
        'fill-opacity': ["match", ["get-join", "count"], [100, 0], 1]

        'fill-opacity': 0.8,
        'line-color': 'green',
        'line-width': 2,
        'line-opacity': 0.7,
    },
});
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

# 2.5.9 村居图层的交叉过滤

使用村居图层时，可以通过对township街镇名称，full_name村居全称（包括街镇前缀），进行交叉过滤。

示例

map.addLayer({
    id: 'boundary-neighborhood-pudong',
    style: {
        'fill-color':  'blue',
        'fill-opacity': 0.5,
        'line-color': 'green',
        'line-width': 2,
        'line-opacity': 0.7,
    },
});

// 对村居图层进行交叉过滤
map.setFilter('boundary-neighborhood-pudong', ["all", ["in", "township", "张江镇", "唐镇"], ["in", "full_name", "张江镇科苑路居委"]]);
1
2
3
4
5
6
7
8
9
10
11
12
13

# 2.5.10 带过滤条件打开街镇图层

在addLayer的时候，可以添加filter字段参数，进行街镇的过滤，提供街镇名称（需要标准的名称字段）数组即可。

示例

map.addLayer({
    id: 'boundary-township-pudong',
    style: {
        'fill-color': 'red',
        'fill-opacity': 0.6,
        'line-color': 'green',
        'line-width': 2,
        'line-opacity': 0.7,
    },
    filter: ["张江镇", "唐镇"] //只显示“张江镇”和“唐镇”
});
1
2
3
4
5
6
7
8
9
10
11

# 2.5.11 打开街镇图层是配置不同的显示显示

在addLayer的时候，可以添加style字段参数，并对街镇的颜色进行配置，街镇名称需要标准的名称字段。

示例

map.addLayer({
    id: 'boundary-township-pudong',
    style: {
        // "张江镇", "陆家嘴街道" 显示红色，其他街镇显示黄色
        'fill-color': ["match", "name", [["张江镇", "陆家嘴街道"], "red"], 'yellow'],
        'fill-opacity': 0.6,
        'line-color': 'green',
        'line-width': 2,
        'line-opacity': 0.7,
    },
});
1
2
3
4
5
6
7
8
9
10
11

# 2.5.12 街镇图层与外部数据联合控制文字显示

map.addLayer({
    id: 'boundary-township-pudong',
    joinData: [ //需要写上全部的街镇
        {
            showName: "100",
            count: 100,
            township: '祝桥镇'
        }, {
            showName: "500",
            count: 500,
            township: '东明路街道'
        }
        // 这里需要补充其他街镇的join数据
    ],
    joinField: "township",
    style: {
        // 通过join数据的count字段，进行颜色配置，小于200为红色，小于600为蓝色，大于等于600为黄色
        // step的表达式可以参考：3.7.2
        'fill-color': ["step", ["get-join", "count"], [200, 'red'], [600, 'blue'], 'yellow'],

        // 外部数据中`count`字段的值是100时，隐藏不显示；其他显示
        'fill-opacity': ["match", ["get-join", "count"], [100, 0], 1],

        'fill-opacity': 0.8,
        'line-color': 'green',
        'line-width': 2,
        'line-opacity': 0.7,

        // 设置文字显示格式，采用`concat`表达式，第一行使用街镇简称，第二行为链接数据的`showName`字段
        'text-field': ["concat", ["get", "briefName"], "\n", ["get-join", "showName"]]
    },
});
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
32

# 2.5.13 通过坐标点对单个街镇定位缩放

map.highlightLayer('boundary-township-pudong', [121.58697, 31.201464], // 指定坐标点，[经度, 纬度]
    {
        style: {
            "fill-color": '#ff0000',
            "fill-opacity": 0.5, // 0为全透明，这样可以控制不显示色块
            "line-color": '#ffff00',
            "line-width": 2,
            "line-opacity": 1,
        }
    });
1
2
3
4
5
6
7
8
9
10

功能描述:

通过指定坐标点，将地图转换到相应街镇视角。

# 2.6 建筑物图层

建筑物图层可以使用BuildingLayer也可以使用如下的方式创建：

map.addLayer({
  	id: 'building-pudong',
});
1
2
3

# 2.6.1 建筑物使用色块

new aimap.BuildingLayer({
    style: {
        'extrusion-color': '#ff0000' // 设置建筑物颜色
    },
    map
});
1
2
3
4
5
6

# 2.6.2 建筑物使用贴图

new aimap.BuildingLayer({
    style: {
        'extrusion-pattern': 'https://location-dev.newayz.com/static/images/building_chartlet.png' // 设置建筑物贴图
    },
    map
});
1
2
3
4
5
6

功能描述:

设置建筑物的配色与贴图。 Style参数:

字段名 类型 说明
extrusion-color string | expressions 建筑物的颜色
extrusion-pattern string 建筑物的贴图，贴图须PNG格式，尺寸须为2的指数的一个正方形图标，如: 128, 256等

# 2.6.3 高亮居委所有楼栋

// 具体表达式语法可以参考 3.6
map.highlightLayer('building-pudong',
    ["all",
        ["==", ["get", "township"], "张江镇"], // 指定街镇名称
        ["==", ["get", "neighborhood"], "科苑路居委"]
    ],{ // 指定村居名称
        style: {
            'extrusion-color': '#ffaaaa'
        },
    });

// 清除高亮建筑物图层
map.clearHighlightLayer('building-pudong');
1
2
3
4
5
6
7
8
9
10
11
12
13

# 2.6.4 高亮村队组所有楼栋

// 具体表达式语法可以参考 3.6
map.highlightLayer('building-pudong',
    ["all",
        ["==", ["get", "township"], "张江镇"], // 指定街镇名称
        ["==", ["get", "neighborhood"], "科苑路居委"], // 指定村居名称
        ["==", ["get", "buildings_area"], "238弄"]
    ], { // 指定组弄名称
        style: {
            'extrusion-color': '#ffaaaa'
        },
    });

// 清除高亮建筑物图层
map.clearHighlightLayer('building-pudong');
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 2.6.5 通过点击高亮楼栋

//先添加浦东建筑物图层
map.addLayer({
  	id: 'building-pudong',
});

const clickHighlight = (e) => {
    if (e.target && e.target.id === "building-pudong") { // 只保留建筑物图层的事件
        if (e.features) {
            map.highlightLayer('building-pudong',
                ["==",["get", "id"], e.features[0].id], { // 通过指定建筑的ID高亮
                    style: {
                        'extrusion-color': '#ffffaa', // 指定高亮的颜色
                    }
                });
        }
    }
}

map.getLayer('building-pudong').on("click", clickHighlight); // 监听鼠标点击事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

取消楼栋绑定事件

map.getLayer('building-pudong').off("click", clickHighlight);// 取消监听鼠标点击事件
1

# 2.6.6 楼栋分层显示

楼栋分层显示不支持分层指定透明度，所有楼层的透明度需为一个统一的值。

在 floors 参数中指定需要分层显示的楼栋的id，并按照从下往上的顺序，依次指定每层的颜色，每层楼按照3米的高度进行绘制。并且保持与地图中默认的楼栋图层一样的缩放效果。

建议在显示一个楼栋的分层效果时，隐藏掉这个楼层的原有的楼栋数据，否则两者叠加的显示效果会有冲突。

building_floors = new aimap.BuildingLayer({
    id:'zhangjiang-building-floors',
    data: "https://api.newayz.com/maps/tilestream/v1/layers/huajian-custom-layers-20210312/tiles/{z}/{x}/{y}",
    map,
    style: {
        "extrusion-opacity": 0.9
    },
    floors: [{
        id: 31011503013,
        // 没有指定楼层的层级的颜色
        "default-color": "gray",
        // 层级相邻时，层级间间隔的颜色
        "gap-color": "gray",
        // 相邻层级间间隔的高度。建议 0 ~ 0.5 米
        "gap-height": 0.5,
        style: [
            {
                // 指定楼层数值
                "floor": 4,
                // 指定楼层的颜色
                "extrusion-color": "blue",
            }, {
                "floor": 5,
                "extrusion-color": "blue",
            }
        ]
    }, {
        id: 31011503014,
        "default-color": "gray",
        "gap-color": "gray",
        style: [
            {
                "floor": 2,
                "extrusion-color": "yellow",
            }, {
                "floor": 3,
                "extrusion-color": "blue",
            }
        ]
    }
    ],
});
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
32
33
34
35
36
37
38
39
40
41
42

# 2.7 聚合图层

# 2.7.1 撒点聚合

其他示例参考 (opens new window)

//创建聚合图层
const layer = new aimap.ClusterLayer({
    spatialReference: 'gcj02',  //坐标系声明
    data: [{
        coordinates: [121.63137, 31.21906],
        township: '张江镇'
        }, {
        coordinates: [121.63337, 31.21956],
        township: '张江镇'
        },{
        coordinates: [121.83803, 30.9805],
        township: '万祥镇'
        },{
        coordinates: [121.83853, 30.9855],
        township: '万祥镇'
    }],
    style: {
        'circle-radius': 6,
        'circle-color': '#66ddff',
        'cluster': {
            'text-size': 12,
            'circle-radius': 20,
            'circle-color': '#f1f075',
            boundary: {
                'fill-color': '#123456'
            }
        },
    },
    cluster: {
        type: 'boundary',
        field: 'township'
    },
    map
});
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
32
33
34
35

功能描述:

对撒点图层进行聚合及样式配置。

# 2.7.2 清除

layer.remove();
1

功能描述:

清除聚合图层。

# 2.9 图表图层(ChartLayer)

# 2.9.1 说明

构造函数:

警告

使用该接口前，请先引入百度Echarts库，推荐使用最新版本。
完整示例参考 (opens new window)

new aimap.ChartLayer(options: Object)
1

参数:

字段名 类型 是否必须 默认值 说明
map Map 是
data chartLayerObject 是
minZoom number 否 7 能显示的最小的zoom level
maxZoom number 否 20 能显示的最大的zoom level
selected selectedObject 是 控制选中项的显示配置
onSelected Function 否 选中某一个图例后的响应事件

selected参数:

字段名 类型 是否必须 默认值 说明
container style 是 新的容器样式
chart echartsOption 是 需要更改的echarts配置，较新版本的echarts可进行差异化配置

示例:

selected: {
    container: {
      	width: "240px",
        height: "240px",
        opacity: 1,
    },
    chart: {
        title: {
            textStyle: {
              	color: "red",
                fontSize: 24,
            },
        },
        tooltip: {
            trigger: "item",
            formatter: "{a}<br>{b} : {c}",
            textStyle: {
                fontSize: 16,
            },
        },
        series: [{
            radius: 100,
            center: ["50%", 130], //参考算法：y坐标 = radius + 下移像素 （注意 y坐标 + radius 要小于容器总高度 height）
            silent: false,
            label: {
                formatter: "{b}:\n{c}",
                fontSize: 15,
            },
        }]
    }
}
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

onSelected参数:

onSelected: (event) => {
    console.info(event, 'onSelected');
}
1
2
3

data参数（chartLayerObject）:

字段名 类型 是否必须 默认值 说明
coordinates LngLat 是 经纬度，必须为火星坐标(即gcj02坐标也叫高德坐标)
container style 否 {width:'120px', height:' 120px',"background-color": "rgba(255, 255, 255, 0)"} 承载图表的容器样式
chart echartsOption 是 图表配置，可参考echarts官网
selected boolean 否 false 是否选中当前图表，每个图层仅支持一个为true.

示例:

TIP

该处的键(key)所代表的字符串，会同时作为一个DOM和Echarts的id进行使用，注意同项目中已使用的DOM容器id做区分。

data: {
    "shanghai": {
        coordinates: [121.51909911871809,31.162520449260285],
        container: {
            width: "80px",
            height: "80px",
            opacity: 0.5,
            "background-color": "rgba(255, 255, 255, 0)",
        },
        selected: true,
        chart: {
            backgroundColor: null,
            title: {
                text: "上海市",
                left: "center",
                top: "top",
                textStyle: {
                    color: "#000",
                    fontSize: 14,
                },
            },
            series: [{
                name: "上海市",
                type: "pie",
                radius: 30,
                center: ["50%", 50],
                silent: true,
                data: [{
                    value: 235,
                    name: "产业下游",
                    itemStyle: { color: "#43A6E8" },
                },
                {
                    value: 274,
                    name: "产业中游",
                    itemStyle: { color: "#EA9D42" },
                },
                {
                    value: 310,
                    name: "产业上游",
                    itemStyle: { color: "#C92A2A" },
                }],
                label: {
                    position: "inside",
                    formatter: "{c}",
                },
            }],
        },
   	}
}
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

chart（echartsOption）说明:

参考Echarts官网 https://echarts.apache.org/zh/option.html#title (opens new window) 进行配置

container（Style）说明:

Tip:按照css样式参数配置即可

字段名 类型 是否必须 默认值
width string 否 '300px' 图表容器宽度
height number 否 ' 300px' 图表容器高度
background-color string 否 'rgba(255, 255, 255, 0)' 图表容器背景，透明配置，使用rgba方式设置透明度不会影响echarts图表显示

# 2.9.2 数据更新

TIP

第一个opts为chartLayerObject配置

可按需传值，若只传对应图层的coordinates，则仅修改位置；同理，传container、chart则分别修改容器样式和图表内容。

示例:

ChartLayerInstance.setData({
    'shanghai': {
    	coordinates: [121.21, 31.31],//更改位置
        container: {
            width: "60px",
            height: "60px",
            opacity: 0.5,
            "background-color": "rgba(255, 255, 255, 0)",
        },
        selected: true,
        chart: {
            backgroundColor: null,
            title: {
                text: "上海市",
                left: "center",
                top: "top",
                textStyle: {
                    color: "#000",
                    fontSize: 14,
                },
            },
            series: [{
                name: "上海市",
                type: "pie",
                radius: 20,
                center: ["50%", 40],
                silent: true,
                data: [{
                    value: 135,
                    name: "产业下游",
                    itemStyle: { color: "#43A6E8" },
                },
                {
                    value: 174,
                    name: "产业中游",
                    itemStyle: { color: "#EA9D42" },
                },
                {
                    value: 410,
                    name: "产业上游",
                    itemStyle: { color: "#C92A2A" },
                }],
                label: {
                    position: "inside",
                    formatter: "{c}",
                },
            }],
        },
    }
})
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

# 2.9.3 移除

TIP

从map对象中移除该图层

ChartLayerInstance.remove()
1

# 2.9.4 图表选中

TIP

选中某一个图表

ChartLayerInstance.selectedChart('shanghai')
1

# 2.9.5 取消选中

TIP

取消已选中的图表

ChartLayerInstance.unSelectedChart()
1

# 2.9.6 获取选中

TIP

获取已选中的图表，若存在选中则返回一个Object，否则为undefined.

ChartLayerInstance.getSelectedChart()
1

# 2.10 下钻图层(DrillingLayer)

# 2.10.1 说明

构造函数:

new aimap.DrillingLayer(options: Object)
1

参数:

字段名 类型 是否必须 默认值 说明
id string 否 {layer}.{uuid} 默认值为uuid，该值不允许重复
map Map 否
data VectorData 是 下钻用图层数据
style Style 否
drill Drill 是 下钻相关配置
filter Filter 否 全部筛选器参考 3.6 配置中的表达式应用
minZoom number 否 3 能显示的最小的zoom level
maxZoom number 否 20 能显示的最大的zoom level

下钻数据GeoJSON数据字段说明:

字段名 类型 是否必须 说明
id string | number 是 下钻图层中对象的ID
name string 否 下钻图层中对象的名称
type string 是 下钻图层的类型，例如：'city','district','township','neighborhood'
coordinates Array<Array<Array<number>>> 是 下钻图层中对象的坐标，为多边形
parent string 是 上一级对象ID
level number 是 下钻图层中对象的等级

下钻数据Vector数据字段说明:

字段名 类型 是否必须 说明
url string 否 原始点的名称

风格字段（Style）说明:

字段名 类型 是否必须 说明
district Style 否 用于配置区县图层的显示样式
township Style 否 用于配置乡镇图层的显示样式
neighborhood Style 否 用于配置村、居图层的显示样式

下钻各层级的配置项说明:

style项 类型 默认值 说明
text-color string | expressions #000000 文字颜色
text-anchor string center 文字显示的锚点
text-field string 文字显示的字段或者字符串
text-size number | expressions 12 文字大小
fill-color Color | expressions 填充色
line-color Color | expressions 边线颜色
line-width number | expressions 1 边线宽度
icon-image string name 自定义图标
icon-size number | Expression interpolate(['linear'], 'value', [5, 8,10,12])
icon-color string | expressions 图标颜色
visibility string visible 可见"visible"，不可见"none"

Drill配置项说明:

字段名 类型 是否必须 默认值 说明
trigger DrillTrigger 否 触发消息配置
下钻层级type名称 LayerDrillDown 是 每一个下钻层级的配置项

DrillTrigger配置项说明:

字段名 类型 是否必须 默认值 说明
down string 否 'click' 下钻下一级的触发消息

LayerDrilldown配置项说明:

字段名 类型 是否必须 默认值 说明
minZoom number 是 该下钻层级的最小zoom值
maxZoom number 是 该下钻层级的最大zoom值

示例:

new aimap.DrillingLayer({
    id: "drilling-layer",
    map,
    data : ["https://api.newayz.com/maps/tilestream/v1/layers/pudong-custom-layers-1213/tiles/{z}/{x}/{y}"],
  	style: {
        district: {
            'line-color': '#123456',
            'fill-color': '#123456',
        },
        township: {
            'line-color': '#123456',
            'fill-color': '#123456'
        }
    },
  	drill: {
        trigger: {
            down: 'click',
        },
        district: {
            minZoom: 8,
            maxZoom: 9
        },
        township: {
            minZoom: 10,
            maxZoom: 11
        },
        neighborhood: {
            minZoom: 12,
            maxZoom: 16
        }
    }
});
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
32

# 2.10.2 添加至地图

TIP

把下钻图层添加至map对象中

instance.addTo(map:Map)
1

# 2.10.3 移除

TIP

从map对象中移除该下钻图层

instance.remove()
1

# 2.10.4 显示

TIP

显示该下钻图层

instance.show()
1

# 2.10.5 隐藏

TIP

隐藏该下钻图层

instance.hide()
1

# 2.10.6 指定区域下钻

TIP

下钻至指定行政区域，入参为对应区域的code或者名称。

instance.drillDown(code:number|name:String)
1

# 2.10.7 区域上钻

TIP

上钻至当前行政区域的上一级。

instance.drillUp()
1

# 2.10.8 事件

事件名称 类型 说明
drill DrillEvent 下钻变更事件

下钻图层事件（DrillEvent）说明:

字段名 类型 是否必须 默认值 说明
type string 是 为：'drill'
direction 'up'或者'down'

# 2.11 矢量瓦片图层

# 2.11.1 说明

TIP

对海量数据这种不便于通过simpleFeature或geojson格式直接加载的数据，可通过官方平台生成矢量瓦片服务，用户可通过aimap.VectorLayer接口加载矢量瓦片服务。

每个矢量瓦片服务中会有各自对应的图层说明，单个或多个，注意每个图层会有属性及空间数据类型说明，按条件配置样式。

对空间数据类型为Point的图层，可配置circle、icon、text、heatmap样式
对空间数据类型为LineString的图层，可配置line、icon、text样式
对空间数据类型为Polygon的图层，可配置fill、extrusion、icon、text样式

参数：

字段名 类型 是否必须 默认值 说明
map Map 否 地图实例
data string 是 矢量瓦片服务地址
style Object 是 按图层配置的样式，key为图层id,value为style类型
joinData Array<Object> 否 关联对象为用户自定义格式，目的将用户数据与图层关联，为图层补充缺失的业务信息，必须存在id字段，表示通过id字段与图层数据进行绑定，若想获取关联数据信息，需要用表达式get-join
joinField string 否 "id" 默认通过id关联。
minZoom number 否 矢量图层在地图上可显示的最小缩放级别
maxZoom number 否 20 矢量图层在地图上可显示的最大缩放级别（不包含）

示例：

// 以北蔡镇为例显示起村居及村居标注图层
const instanceNeighborhoodLayer = new aimap.VectorLayer({
    data: 'https://api.newayz.com/maps/tilestream/v1/layers/beicai-custom-layers-20210324/tiles/{z}/{x}/{y}',
    map,
    style: {
        neighborhood: {//该矢量瓦片服务中含有neighborhood图层，故可按需要对该图层配置样式，注意图层数据类型，类型（polygon）则可配置fill和line样式。
            'fill-color': '#28C76F',
            'fill-opacity': 0.6,
            'line-color': '#F8D800',
        },
        label_neighborhood: {//该矢量瓦片服务中含有label_neighborhood图层，故可按需要对该图层配置样式，注意图层数据类型，类型（point）则可配置text、icon、circle、heatmap样式，按需配置。
            'text-field': '{name}',
            'text-color': '#3CD500',
        }
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 2.11.2 图层添加

addTo(map:Map)

若创建实例时未传Map实例，则需使用该接口把自定义图层添加至Map实例中。

instanceNeighborhoodLayer.addTo(map);
1

# 2.11.3 删除

remove()

从Map对象中移除该几何图层。销毁实例。

instanceNeighborhoodLayer.remove();
1

# 2.11.4 显示、隐藏

显示

show()

隐藏

hide()

// 隐藏状态下显示图层
instanceNeighborhoodLayer.show();
// 显示状态下隐藏图层
instanceNeighborhoodLayer.hide();
1
2
3
4

# 2.11.5 设置图层的缩放范围

setZoomRange(minZoom: number, maxZoom: number)

设置该图层的缩放层级范围，使图层大于等于minZoom且小于maxZoom时显示。

instanceNeighborhoodLayer.setZoomRange(9, 13);
1

# 2.11.6 更新图层样式

批量设置图层的风格

setStyle(style:Object)

更新图层的风格，增量更新样式或者更新已有的样式参数。

instanceNeighborhoodLayer.setStyle({
    neighborhood: {
        'fill-color': 'red',
        'fill-opacity': 1,
        'line-color': 'blue',
    }}
)
1
2
3
4
5
6
7

设置图层的style风格中的某项配置项

setStyleProperty(layerId: string, name: string, value: any)

layer.setStyleProperty('neighborhood','line-color', '#faafee');
1

# 2.11.7 设置筛选器

setFilter(表达式？| null | undefined)

为当前图层设置筛选器。如果提供了 null 或 undefined ，函数会从图层中移除所有存在的筛选器。

全部筛选器参考 3.6 配置中的表达式应用

// 使layer图层仅显示属性name值等于test的部分
instanceNeighborhoodLayer.setFilter(['==', 'name', 'test']);
// 清除筛选器
instanceNeighborhoodLayer.setFilter(null);
1
2
3
4

# 2.11.8 事件绑定与取消

绑定

on(type, listener)

参数：

名称 类型 说明
type string 监听的事件类型，以下任一 'mousedown' ， 'mouseup' ， 'click' ， 'dblclick' ， 'mousemove' ， 'mouseenter' ， 'mouseleave' ， 'mouseover' ， 'mouseout' ， 'touchstart' ， 'touchend' ，或 'touchcancel' 。 mouseenter 和 mouseover 当光标从地图画布外部进入指定图层的可视区域时被触发。 mouseleave 和 mouseout 当光标离开地图画布或指定图层的可视区域时被触发。
listener Function 事件被触发时调用的函数实例。函数类型为： function(e: MapsEvent) 或者 function()

解绑

off(type, listener)

移除先前用Layer#on添加的事件监听器。

参数：

名称 类型 说明
type string 之前用来安装监听器的事件类型。
listener Function 之前安装的监听器函数实例。

# 2.11.9 关联外部数据及更新

WARNING

当前aimap.VectorLayer接口里的joinData方式关联的外部数据不能用于配置text-field。仅限fill、line、extrusion、circle样式应用。

初始化时关联





 
 
 
 
 
 
 



















// 用关联的外部数据信息显示fill、line样式
instanceNeighborhoodLayer = new aimap.VectorLayer({
    data: 'https://api.newayz.com/maps/tilestream/v1/layers/beicai-custom-layers-20210324/tiles/{z}/{x}/{y}',
    map,
    joinData: [{
        category: "合法",
        id: 18,
    }, {
        category: "争议",
        id: 21,
    }],
    style: {
        neighborhood: {
            'fill-color': [
                "match",
                ["get-join", "category", '异常'],
                '合法', "#cc8ce8",
                '争议', "#c7d9e8",
                "red"
            ],
            'fill-opacity': 0.6,
            'line-color': '#F8D800',
        },
        label_neighborhood: {
            'text-field': '{name}\n{id}',
            'text-color': '#3CD500',
        }
    }
});
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

重设关联数据

setJoinData(Array<Object>)

instanceNeighborhoodLayer.setJoinData([{
        category: "争议",
        id: 18,
    }, {
        category: "合法",
        id: 21,
    }]
)
1
2
3
4
5
6
7
8

# 2.11.10 信息弹窗

TIP

通过该接口设置信息弹窗。注意，对于一个地图实例来说，全局仅可显示一个信息弹窗。

若是带有HTML标签的参数，可在其内添加class声明，以达到对弹窗进行样式设定的效果。

支持纯文本和带有HTML标签的参数。

setPopup(String|HTML)

instanceNeighborhoodLayer.on('click', (e)=>{
    instanceNeighborhoodLayer.setPopup("<p>" + e.features[0].properties.name + "</p>");
    instanceNeighborhoodLayer.getPopup().setLngLat(e.lngLat);
    instanceNeighborhoodLayer.togglePopup();
});
1
2
3
4
5
6

# 2.12 栅格瓦片图层

# 2.12.1 说明

TIP

对于卫片或者其他GIS工具提供的瓦片服务，经常以栅格瓦片服务的形式提供，这时可以使用aimap.TileLayer接口加载栅格瓦片。

参数：

字段名 类型 是否必须 默认值 说明
map Map 否 地图实例
data string 是 栅格瓦片服务地址
minZoom number 否 栅格图层在地图上可显示的最小缩放级别
maxZoom number 否 20 栅格图层在地图上可显示的最大缩放级别（不包含）

示例：

map.on("load", function () {
    var tileLayer = new aimap.TileLayer({
        map: map,
        data: 'https://api.maptiler.com/maps/hybrid/256/{z}/{x}/{y}.jpg?key=0Q4LtA2g3EVJy7GKnCN8',
    });
});
1
2
3
4
5
6

# 2.12.2 图层添加

addTo(map:Map)

若创建实例时未传Map实例，则需使用该接口把自定义图层添加至Map实例中。

tileLayer.addTo(map);
1

# 2.12.3 删除

remove()

从Map对象中移除该几何图层。销毁实例。

tileLayer.remove();
1

# 2.12.4 显示、隐藏

显示

show()

隐藏

hide()

// 隐藏状态下显示图层
tileLayer.show();
// 显示状态下隐藏图层
tileLayer.hide();
1
2
3
4

# 2.12.5 设置图层的缩放范围

setZoomRange(minZoom: number, maxZoom: number)

设置该图层的缩放层级范围，使图层大于等于minZoom且小于maxZoom时显示。

tileLayer.setZoomRange(9, 13);
1

# 2.13 网格热力图层

# 2.13.1 说明

TIP

可以使用aimap.GeohashGridLayer接口显示网格热力图层。

参数：

字段名 类型 是否必须 默认值 说明
map Map 否 地图实例
data FeatureCollection 或 geohash数组 是 网格热力的数据
style Object 是 图层样式
grid Object 是 网格热力图层特有的配置项

grid的参数说明

字段名 类型 是否必须 默认值 说明
url string 否 https://tiles.newayz.com/maps/tilestream/v1/layers/geohash-grids/tiles/{z}/{x}/{y}?geohash_level={level} 网格图层的瓦片服务地址
userField string 否 如果传入的data类型为FeatureCollection，通过这个字段来指定数据中与热力效果对应的字段
levels Object 是 配置各个级别的geohash图层的显示层级范围

示例：

// Data 类型为 FeatureCollection
var geohashGridLayer = new aimap.GeohashGridLayer({
    id: 'test',
    map,
    data: {
        "type": "FeatureCollection",
        "features": [{
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [121.472962, 31.233808]
            },
            "properties": {
                "name": "A类",
                "count": 50
            }
        }, {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [121.501022, 31.120714]
            },
            "properties": {
                "name": "B类",
                count: 100
            }
        }]
    },
    style: {
        'fill-color': ['interpolate', ['linear'], ['feature-state', 'value'], 0, 'green', 200, 'yellow', 400, 'red'], // 每个矩形，根据value值显示渐变颜色
        'fill-opacity': ['case', ['!=', ['feature-state', 'value'], null], 0.5, 0],
        'fill-outline-color': 'rgba(255, 255, 255, 0.5)'
    },
    grid: {
        url: 'https://tiles.newayz.com/maps/tilestream/v1/layers/geohash-grids/tiles/{z}/{x}/{y}?geohash_level={level}',
        userField: 'count',
        levels: {
            6: { // 地图在缩放等级为 11 ~ 13 时显示 6 级网格
                minZoom: 11,
                maxZoom: 13
            },
            7: {
                minZoom: 13,
                maxZoom: 17
            }
        }
    }
});

// Data 类型为 geohash数组
var geohashGridLayer = new aimap.GeohashGridLayer({
    map,
    data:[
    {
        geohash: 'wtw3x2',
        level: 7,
        array: [null, null, 3, 4, 5, 6, null, null, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32]
    }],
    style: {
        'fill-color': ['interpolate', ['linear'], ['feature-state', 'value'], 0, 'green', 200, 'yellow', 400, 'red'], // 每个矩形，根据value值显示渐变颜色
        'fill-opacity': ['case', ['!=', ['feature-state', 'value'], null], 0.5, 0],
        'fill-outline-color': 'rgba(255, 255, 255, 0.5)'
    },
    grid: {
        levels: {
            6: { // 地图在缩放等级为 11 ~ 13 时显示 6 级网格
                minZoom: 11,
                maxZoom: 13
            },
            7: {
                minZoom: 13,
                maxZoom: 17
            }
        }
    }
});
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

# 2.13.2 图层添加

addTo(map:Map)

若创建实例时未传Map实例，则需使用该接口把自定义图层添加至Map实例中。

geohashGridLayer.addTo(map);
1

# 2.13.3 删除

remove()

从Map对象中移除该几何图层。销毁实例。

geohashGridLayer.remove();
1

# 2.13.4 显示、隐藏

显示

show()

隐藏

hide()

// 隐藏状态下显示图层
geohashGridLayer.show();
// 显示状态下隐藏图层
geohashGridLayer.hide();
1
2
3
4

# 2.13.5 切换显示模式

changeMode(mode: ViewMode, options: ModeOptions)

切换网格热力图层的显示模式，all为全部显示模式，circle为按圆过滤模式。

// 切换为按圆过滤模式
geohashGridLayer.changeMode('circle', {center: [121.612846, 31.205494], radius: 1000});

// 切换为全部显示模式，默认为此模式
geohashGridLayer.changeMode('all');
1
2
3
4
5

# 2.14 WMS图层

# 2.14.1 说明

TIP

通过 arcgis 发布的 WMS 类型的地图服务，可以使用aimap.WMSLayer接口加载这类的地图服务。

参数：

字段名 类型 是否必须 默认值 说明
map Map 否 地图实例
data string 是 wms服务地址
minZoom number 否 WMS图层在地图上可显示的最小缩放级别
maxZoom number 否 20 WMS图层在地图上可显示的最大缩放级别（不包含）

示例：

map.on("load", function () {
    var wmsLayer = new aimap.WMSLayer({
        map,
        minZoom: 10,
        maxZoom: 20,
        data: "http://172.3.0.98:10999/geoserver/zj_park/wms?service=WMS&version=1.1.0&request=GetMap&layers=zj_park:zjplan_2019&transparent=true&bbox={bbox}&width={width}&height={height}&srs=EPSG:4326&styles=&format=image/vnd.jpeg-png8",
        style: {
            'raster-opacity': 0.8
        }
    });
});
1
2
3
4
5
6
7
8
9
10
11

# 2.14.2 图层添加

addTo(map:Map)

若创建实例时未传Map实例，则需使用该接口把自定义图层添加至Map实例中。

wmsLayer.addTo(map);
1

# 2.14.3 删除

remove()

从Map对象中移除该几何图层。销毁实例。

wmsLayer.remove();
1

# 2.14.4 显示、隐藏

显示

show()

隐藏

hide()

// 隐藏状态下显示图层
wmsLayer.show();
// 显示状态下隐藏图层
wmsLayer.hide();
1
2
3
4

# 2.15 光圈图层

# 2.15.1 说明

TIP

可以使用aimap.RingLayer接口显示光圈图层。

参数：

字段名 类型 是否必须 默认值 说明
map Map 否 地图实例
data Array 是 光圈图层的数据，数据格式类似 Circle 图层，仅需指定 coordinates 作为光圈的中心点。
style Object 是 图层样式，此处的样式仅支持line-color
ring Object 是 光圈图层特有的配置项

ring的参数说明

字段名 类型 是否必须 默认值 说明
minRadius number 否 50 光圈的最小半径，单位：米
maxRadius number 否 500 光圈的最大半径，单位：米，光圈的动画将从最小半径渐变到最大半径
lineWidth number 否 50 光圈的线宽，单位：像素，数值不宜过大
autoStart number 否 true 在初始化图层后，是否立即播放动画
duration number 否 5 光圈动画从最小半径渐变到最大半径的时间，单位：秒
blinkTimes number 否 无 光圈动画的播放次数，默认播放次数无次数限制

示例：

ringLayer = new aimap.RingLayer({
    spatialReference: 'gcj02',
    data: [{
        coordinates: [121.6, 31.2],
    }, {
        coordinates: [121.7, 31.3],
    }, {
        coordinates: [121.6, 31.5],
    }],
    style: {
        'line-color': '#FF0000',
    },
    ring: {
        lineWidth: 200,
        maxRadius: 1000,
        autoStart: true
    },
    map,
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 2.15.2 图层添加

addTo(map:Map)

若创建实例时未传Map实例，则需使用该接口把自定义图层添加至Map实例中。

ringLayer.addTo(map);
1

# 2.15.3 删除

remove()

从Map对象中移除该几何图层。销毁实例。

ringLayer.remove();
1

# 2.15.4 显示、隐藏

显示

show()，在调用显示接口的同时，会打开光圈的动画效果。

隐藏

hide()，在调用隐藏接口的同时，会关闭光圈的动画效果。

// 隐藏状态下显示图层
ringLayer.show();
// 显示状态下隐藏图层
ringLayer.hide();
1
2
3
4

# 2.16 图像图层

# 2.16.1 说明

TIP

可以使用aimap.ImageLayer接口显示图像图层。

参数：

字段名 类型 是否必须 默认值 说明
map Map 否 地图实例
data string 是 图片数据的路径，图片格式可以是 png，jpeg，tif 等，或者是 asc 格式的文本内容。
projection string 否 'EPSG:3857' 当传入的 data 为 asc 格式的文本内容时，可以通过此字段指定传入数据的投影坐标系。
dataType string 否 当传入的 data 为 asc 格式的文本内容时，需指定此值为 asc
coordinates Object 否 图片在地图中放置的坐标，长度为4，表示一个不规则的四边形。依次为图片的左上角，右上角，右下角，左下角的坐标。当 dataType 为 asc 时，不需要这个值
style Object 否 图像图层的样式

示例：

// 传入图像数据
imageLayer = new aimap.ImageLayer({
    data: `./weather/20210101.tif`,
    coordinates: [
        [116.393553072, 35.493743319],
        [127.370446928, 35.493743319],
        [127.370446928, 26.433067725],
        [116.393553072, 26.433067725]
    ],
    map,
    style: {
        'raster-opacity': 0.8,
    }
});

// 传入 asc 格式的图像数据
fetch('./data/202110201738_000.asc')
.then(response => response.text())
.then(text => {
    ascLayer = new aimap.ImageLayer({
        data: text,
        dataType: 'asc',
        map,
        style: {
            'raster-opacity': 0.6,
            'raster-color': [
                'interpolate',
                ['linear'],
                ['get', 'asc'],
                1, 'rgba(255,255,255,255)',
                5, 'rgba(0,236,236,255)',
                10, 'rgba(255,144,0,255)',
                16, 'rgba(173,144,240,255)',
            ]
        }
    });
});
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
32
33
34
35
36
37

# 2.16.2 图层添加

addTo(map:Map)

若创建实例时未传Map实例，则需使用该接口把自定义图层添加至Map实例中。

imageLayer.addTo(map);
1

# 2.16.3 图层更新数据

setData(url:string)

传入一个新的图片的链接，将会更新到地图上。

// 有效数据更新
imageLayer.setData(`./weather/20210102.tif`);
// 空数据，可起到清空图层的效果，不会破坏图层实例
imageLayer.setData();
1
2
3
4

# 2.16.4 删除

remove()

从Map对象中移除该图像图层。销毁实例。

imageLayer.remove();
1

# 2.16.5 显示、隐藏

显示

show()

隐藏

hide()

// 隐藏状态下显示图层
imageLayer.show();
// 显示状态下隐藏图层
imageLayer.hide();
1
2
3
4

# 2.17 风场图层

# 2.17.1 说明

TIP

可以使用aimap.WindLayer接口显示风场图层。

参数：

字段名 类型 是否必须 默认值 说明
map Map 否 地图实例
data json 是 风场数据，json格式，包括数据的格网信息，u，v值等。
windOption Object 是 风场图层特有的配置参数。

windOption的参数说明

字段名 类型 是否必须 默认值 说明
colorScale string | Array 是 风场的颜色配置，如果是一个字符串，则所有风场粒子都是这个颜色；如果是一个数组，则根据风速进行映射。
globalAlpha number 否 0.9 风场粒子尾巴的长度，默认值0.9，推荐范围0.5 ~ 0.98。
velocityScale number 是 粒子的速度，推荐范围1 ~ 5。
globalAlpha number 是 屏幕范围内的粒子总数。

示例：

var windLayer = new aimap.WindLayer({
    map,
    data: response.data,
    windOption: {
        // 颜色的选取是根据数据的最小风速，最大风速，再通过粒子的风速，映射到这个 colorScale
        colorScale: [
            "rgb(36,104, 180)",
            "rgb(60,157, 194)",
            "rgb(128,205,193 )",
            "rgb(151,218,168 )",
            "rgb(198,231,181)",
            "rgb(238,247,217)",
            "rgb(255,238,159)",
            "rgb(252,217,125)",
            "rgb(255,182,100)",
            "rgb(252,150,75)",
            "rgb(250,112,52)",
            "rgb(245,64,32)",
            "rgb(237,45,28)",
            "rgb(220,24,32)",
            "rgb(180,0,35)"
        ],
        globalAlpha: 0.98, // 尾巴的长度
        velocityScale: 1, // 粒子的速度
        paths: 10000, // 屏幕范围内的粒子总数
    },
});
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

# 2.17.2 图层添加

addTo(map:Map)

若创建实例时未传Map实例，则需使用该接口把自定义图层添加至Map实例中。

windLayer.addTo(map);
1

# 2.17.3 删除

remove()

从Map对象中移除该图像图层。销毁实例。

windLayer.remove();
1

# 2.17.4 显示、隐藏

显示

show()

隐藏

hide()

// 隐藏状态下显示图层
windLayer.show();
// 显示状态下隐藏图层
windLayer.hide();
1
2
3
4

# 2.17.5 图层更新数据

setData(url:string)

传入一个新的数据，将会更新到地图上。

// 有效数据更新
windLayer.setData(response.data);
// 空数据，可起到清空图层的效果，不会破坏图层实例
windLayer.setData();
1
2
3
4
Last Updated: 11/3/2021, 3:14:28 PM

← 三. 附属说明 →