# Geohash 网格热力图层(GeohashGridLayer)

网格图层用于展示与 Geohash 相关的数据,并以 Geohash 网格的形式展示在地图上。

new aimap.GeohashGridLayer(layerOptions: Object)
1

# 初始化参数

# LayerOptions参数说明

字段名 类型 说明
id string 默认值为${type}.${uuid},该值不允许重复。
map Map 地图对象,如果设置,该图层会自动加载到地图中,如果未设置,需要手动加载图层:addTo(map)
zIndex number 图层在地图中所属的垂直方向的位置索引,默认为 0。
minZoom number 能显示的最小的zoom level,默认 3。
maxZoom number 能显示的最大的zoom level(但不包括这个Level),默认20。
interactive boolean 是否创建默认交互,如鼠标移入移出图层后鼠标样式变化。默认true
data必须 Data 支持点类型的矢量数据,包括SimpleFeatureGeoJSON等,具体参见:矢量数据定义
或者,以 Geohash Data 形式组成的数组。
style必须 Style 本图层支持与面相关的样式配置,包括:填充样式(Fill)
grid必须 GridOptions 网格图层相关的配置,具体参见:GridOptions

# Geohash Data

字段名 类型 说明
geohash string geohash网格的编号。
level number array参数中的数据需要对应到的geohash网格级别。
array Array 每个网格热力的数值组成的数组,长度等于Math.pow(32, level - geohash.length),空值使用null表示。

# GridOptions

字段名 类型 说明
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图层的显示层级范围。以levelNumber:{minZoom: number, maxZoom: number}的形式表示。

# 示例

// 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: {
        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: {...},
    grid: {
        levels: {
            7: {
                minZoom: 13,
                maxZoom: 17
            }
        }
    }
});

// Data 类型为带有 geohash 数值的对象数组,其中 geohash 数值使用“grid_id”或者“geohash”字段来表示。
var geohashGridLayer = new aimap.GeohashGridLayer({
    map,
    data:[    {
      "visitor_uv": 85,
      "grid_id": "wwmwt30"
    },
    {
      "visitor_uv": 58,
      "grid_id": "wwmqjzm"
    },],
    style: {...},
    grid: {
        levels: {
            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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

# 实例变量

# id

此图层的 id,如果在初始化图层的参数中指定,则为参数中的 id,否则 SDK 内部会自动生成一个 id。

# 示例

var geohashgridLayer = new aimap.GeohashGridLayer({...});
console.log(geohashgridLayer.id); // "geohashgrid.9db79b01-f3c0-4da6-a36a-b4d5827c4e37"
1
2

# type

此图层的类型,对于本图层, type 为固定值:geohashgrid

# 示例

var geohashgridLayer = new aimap.GeohashGridLayer({...});
console.log(geohashgridLayer.type); // "geohashgrid"
1
2

# 实例方法

addTo(map)

如果在初始化图层时,没有传入地图对象参数,则需要使用此方法来将图层添加到地图上。

参数

map(Map):需要添加本图层的地图对象。

返回值

GeohashGridLayer:this

remove()

将本图层从地图中移除,并销毁相关的资源。

返回值

GeohashGridLayer:this

show()

显示该图层。

返回值

GeohashGridLayer:this

hide()

隐藏该图层。

返回值

GeohashGridLayer:this

setzIndex(zIndex, options?)

设置图层在 z 轴上的顺序。数值越大,层级越高。

参数

zIndex(number | String):大于 0 的整数或者表示地图初始化样式中自带的图层 id。

options(SetzIndexOptions):设置层级的更多参数,具体参见:SetzIndexOptions 配置

返回值

GeohashGridLayer:this

setStyle(style, options?)

增量更新图层的样式。

参数

style(style):样式对象,这些样式将增量更新到图层已有的样式上,支持的样式与当前图层一致。

options(SetStyleOptions):设置新样式的其他配置项,具体参见:SetStyleOptions 配置

返回值

LineString:this

setData(data, options?)

重新指定数据,原有的数据会被清除掉。

参数

data(Data):与 layeroptions参数说明 中的Data字段定义一致。

options(SetDataOptions):指定新数据源的其他配置项,具体参见:SetDataOptions 配置

返回值

LineString:this

setPopup(popup, options)

为图层设置弹窗对象。

参数

popup(Popup | string):Popup对象,或者弹窗中想要显示的内容文本。 options(Options):弹窗的配置项,具体参见:Popup 配置

返回值

LineString:this

getPopup()

获取图层的弹窗对象,如果没有调用过 setPopup 接口,将返回null

返回值

Popup:图层的弹窗对象。

togglePopup()

切换弹窗的显示,隐藏效果。

返回值

LineString:this

on(type, listener)

为图层绑定事件监听。

参数

type(string):事件类型,支持的事件类型可参考 图层事件

listener(Function):如果此处使用匿名函数,则后续将无法解绑。

返回值

LineString:this

once(type, listener)

为图层绑定事件监听,事件只会响应一次。

参数

type(string):事件类型,支持的事件类型可参考 图层事件

listener(Function):如果此处使用匿名函数,则后续将无法解绑。

返回值

LineString:this

off(type, listener)

解除已绑定事件监听。

参数

type(string):事件类型,支持的事件类型可参考 图层事件

listener(Function):通过 on 或者 once 绑定的事件对象。

返回值

LineString:this

# 图层事件

mousedown

当鼠标点击图层时触发。

mouseup

当鼠标在图层中松开时触发。

click

当鼠标在图层同一点处点击并松开时触发。

dblclick

当鼠标双击图层同一点时触发。

mousemove

当鼠标在图层中移动时触发。

mouseenter

当鼠标从某一图层外部或地图画布外部进入当前图层的可见部分时触发。

mouseleave

当鼠标离开当前图层的可见部分时触发。

最后更新于: 4/15/2022, 4:49:32 PM