ContourLayer 等值线面图层 最后更新时间: 2021年01月22日
使用等值线面图展示点数据,并通过高度和颜色展示数据权重。
以下为示例代码:
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) | 创建图层实例 |
图层配置项 | 类型 | 默认值 | 说明 |
---|---|---|---|
| string | 无 | 可选值:isoband、isoline。设置是等值面(isoband)或者是等值线(isoline)。 |
其他配置项和 Loca.Layer 相同。
2. Visual Options
配置项 | 类型 | 默认值 | 说明 |
---|---|---|---|
| Style Options | 无 | 配置颜色和高度等。 |
| Object | 无 | 数据插值设置项,可缺省。 |
| number | 500 | 用于数据插值的步长,可缺省。step 不宜过小,过小的 step 可能会导致绘制性能严重下降 |
| number | 1000 | 每一个原始值在插值过程中影响的范围,effectRadius / step 的比值不宜过大,建议在 20 以内,可以获得良好的性能效果 |
| number | 1 | 等高线拆分步长,及按照用户提供的数据每隔 threshold 大小来绘制一条等高线。 |
| number | 2 | 等高线平滑次数 |
| number | 50000 | 3D 等高线最大高度, 可缺省,缺省值为 5 * 1E4。 |
| Array | ["#3656CD", "#655FE7", '#20C2E1', '#23D561', '#9CD523', '#F1E229', '#FFBF3A', '#FB8C00', '#FF5252', "#BC54E2", "#FF6FCE"] | 绘制等高线使用的颜色序列。 |
3. 相关示例