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

高德 开发 数据可视化 JS API 可视化图层 ContourLayer 等值线面图层

更新时间:2019年10月16日

使用等值线面图展示点数据,并通过高度和颜色展示数据权重。

以下为示例代码:

    var map = new AMap.Map('container', {
        features: ['bg', 'road'],
        mapStyle: 'amap://styles/midnight',
        zoom: 10,
        pitch: 60,
        viewMode: '3D'
    });
    var contourLayer = new Loca.ContourLayer({
         // shape: {string}, 等高线类型 'isoband'为等高面, 'isoline'为等高线, 必填
        shape: 'isoband',
        map: map
    });

    // 设置等高线依赖的数据
    // districtData: 绘制等高线时依赖的用户数据
    contourLayer.setData(districtData, {
        // lnglat: {string}, 数据中经纬度坐标所在的列名称, 必填
        lnglat: 'lnglat',
        // value: {string}, 数据中权重数据所在的列名称, 必填
        value: 'count'
    });

    // 设置等高线属性值
    contourLayer.setOptions({
        // interpolation: 数据插值设置项,可缺省
        interpolation: {
            // step: {number}, 用于数据插值的步长,可缺省,缺省值为 500
            // step 不宜过小,过小的 step 可能会导致绘制性能严重下降
            step: 300,
            // effectRadius: {number}, 每一个原始值在插值过程中影响的范围,可缺省,缺省值为 1000
            // effectRadius / step 的值不宜过大,建议在 20 以内,可以获得良好的性能效果
            effectRadius: 1000,
        },
        // threshold: {number}, 等高线拆分步长,及按照用户提供的数据每隔 threshold 大小来绘制一条等高线
        // 可缺省,缺省值为 1
        threshold: 3,
        // smoothNumber: {number}, 等高线平滑次数,可缺省,缺省值为 2
        smoothNumber: 3,
        // style: 等高线绘制样式,可缺省
        style: {
            // height: {number}, 3D 等高线最大高度, 可缺省,缺省值为 5 * 1E4
            height: 8 * 1E4,
            // color: {Array}, 绘制等高线使用的颜色序列, 可缺省,缺省值为 ["#3656CD", "#655FE7", '#20C2E1', '#23D561', '#9CD523', '#F1E229', '#FFBF3A', '#FB8C00', '#FF5252', "#BC54E2", "#FF6FCE"]
            color: ["#074050", "#105965", "#217a79", "#4c9b82", "#6cc08b", "#97e196", "#d3f2a3"]
        }
    });

    contourLayer.render();

1. 构造函数

构造函数

说明

Loca.ContourLayer(<LayerOptions> options)

创建图层实例

图层配置项

类型

默认值

说明

shape

string

可选值:isoband、isoline。设置是等值面(isoband)或者是等值线(isoline)。

其他配置项和 Loca.Layer 相同。

2. Visual Options

配置项

类型

默认值

说明

style

Style Options

配置颜色和高度等。

interpolation

Object

数据插值设置项,可缺省。

interpolation.step

number

500

用于数据插值的步长,可缺省。step 不宜过小,过小的 step 可能会导致绘制性能严重下降

interpolation.effectRadius

number

1000

每一个原始值在插值过程中影响的范围,effectRadius / step 的比值不宜过大,建议在 20 以内,可以获得良好的性能效果

threshold

number

1

等高线拆分步长,及按照用户提供的数据每隔 threshold 大小来绘制一条等高线。

smoothNumber

number

2

等高线平滑次数

style.height

number

50000

3D 等高线最大高度, 可缺省,缺省值为 5 * 1E4。

style.color

Array

["#3656CD", "#655FE7", 

'#20C2E1', '#23D561', 

'#9CD523', '#F1E229',

'#FFBF3A', '#FB8C00', 

'#FF5252', "#BC54E2", "#FF6FCE"]

绘制等高线使用的颜色序列。

3. 相关示例

北京各区域等值面

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