示例中心
功能在线体验
menu Created with Sketch. closed Created with Sketch.

高德 开发 数据可视化 JS API 可视化图层 DistrictLayer 行政区图层

更新时间:2019年07月02日

该图层用来展示行政区分级统计地图,数据使用点类型数据。

以下为示例代码:

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

const layer = new Loca.DistrictLayer({
    map: map
});

layer.setData(heatdata, {
    lnglat: 'lnglat',
    value: 'count',
});

layer.setOptions({
    style: {
        // 行政区 adcode
        adcode: 110000,
        // 热力聚合模式,count 为点数量加和
        mode: 'count',  // 聚合模式,可选值: sum(值求和)、max(最大值)、min(最小值)、mean(平均值)、median(中位数)、count(个数)
        // 颜色范围
        color: [
           '#f0f9e8',
           '#bae4bc',
           '#7bccc4',
           '#43a2ca',
           '#0868ac',
        ],
        text: {
            content: '文字',  // 文字内容
            direction: 'center',  // 文字方位 
            offset: [10, -10],  // 偏移大小
            fontSize: 16,  // 文字大小
            fillColor: '#E67E22',  //文字颜色
            strokeColor: "rgba(255,255,255,0.85)",  // 文字描边颜色
            strokeWidth: 1,  // 文字描边宽度
        }
    }
});

// 渲染
layer.render();

1. 构造函数

构造函数

说明

Loca.DistrictLayer(<LayerOptions> options)

创建可视化图层

未列出参数,同 Loca.Layer

2. 基本方法

操作可视化图层的基本方法,例如设置数据、设置样式、渲染、销毁等。

未列出接口,同 Loca.Layer


DataSet Options 数据配置

Options

类型

默认值

说明

value

string

必填

指定热力映射的字段名

参数同 Loca.Layer


Visual Options 样式配置

Options

类型

默认值

说明

mode

String

'count'

聚合模式,可选值: sum(值求和)、max(最大值)、min(最小值)、mean(平均值)、median(中位数)、count(个数)

参数同 Loca.Layer

Style Options

Options

Type

Default

Description

radius

number/Function/<Attr options>

0

蜂窝热力半径,单位:米

gap

number

0

网格间距,单位:米

color

Object

必填

热力颜色填充。key-value 结构,

例如: 

    0.1: ‘blue’, 

    0.5: ‘yellow’, 

    0.9: ‘red’ 

}。

opacity

number

1

透明度

text

TextOptions

文字样式配置

参数同 Loca.Layer

Text Options 文字标注配置

Options

类型

默认值

说明

content

String/Function

文字内容

其他属性同 Loca.LabelsLayer TextOptions



新用户
福利
功能
在线体验
常见
问题