VisualLayer 点/线/面类型 最后更新时间: 2021年01月22日
该篇文档主要介绍 type
为「点 point
」、「线 line
」、「面 polygon
」 这三种最常见类型的 VisualLayer 配置项。
该文档只列出属于这三种类型的属性,其他通用配置请参考 通用配置。
1. 构造函数
使用范例
var layer = Loca.visualLayer({
// 指定 Loca 容器
container: locaMap,
// 显示指定数据类型
type: 'point',
// 显示指定显示类型:圆形
shape: 'circle'
});
var layer = Loca.visualLayer({
// 指定 Loca 容器
container: locaMap,
// 显示指定数据类型
type: 'point',
// 显示指定显示类型:棱柱体
shape: 'prism',
// 棱柱体顶点数,仅在 shape = prism 时有效
vertex: 4
});
参考手册
构造函数/工厂方法 | 说明 |
---|---|
new Loca.VisualLayer( | 创建可视化图层。同 通用配置。 |
Loca.visualLayer( |
LayerOptions 图层配置 | 类型 | 默认值 | 说明 |
---|---|---|---|
type | string | 必填 | 坐标解析类型,支持:点 |
shape | string | 必填 | 图层显示的形状类型,具体形状和
|
vertex | number | 4 | 仅当 如果想绘制圆柱形,则尽量增多顶点数量,以达到近似圆形的效果。(建议 32 个顶点)参考示例 |
eventSupport | 同 通用配置。 | ||
fitView | |||
zIndex |
2. 基本方法
使用范例
var data = [
{ 'name': '北京市', 'center': [116.407394,39.904211] },
{ 'name': '天津市', 'center': [117.200983,39.084158] },
{ 'name': '河北省', 'center': [114.530235,38.037433] }
// ...
];
var layer = Loca.visualLayer({
type: 'point',
shape: 'circle'
});
// 添加数据
layer.setData(data, {
// 指定地理坐标所在列名
lnglat: 'center',
// 指定数据类型,支持 json、csv、tsv 格式
type: 'json'
});
// 设置样式
layer.setOptions({
style: {
radius: 10,
color: 'skyblue',
borderWidth: 0.5,
borderColor: '#ffffff',
opacity: 0.8,
altitude: 1000
}
});
// 执行绘制
layer.render();
var data = [
{
name: '线条 A',
path: [[116.407394,39.904211], [117.200983,39.084158]]
},
// ...
];
var layer = Loca.visualLayer({
type: 'line',
shape: 'line'
});
// 添加数据
layer.setData(data, {
// 指定地理坐标所在列名
lnglat: 'path',
// 指定数据类型,支持 json、csv、tsv 格式
type: 'json'
});
// 设置样式
layer.setOptions({
style: {
// 3D 类型下线段不支持设置宽度。
color: 'blue',
opacity: 0.8
}
});
// 执行绘制
layer.render();
var data = [
{
name: '区面 A',
path: [[116.407394,39.904211], [117.200983,39.084158], [114.530235,38.037433]]
},
// ...
];
var layer = Loca.visualLayer({
type: 'polygon',
shape: 'polygon'
});
// 添加数据
layer.setData(data, {
// 指定地理坐标所在列名
lnglat: 'path',
// 指定数据类型,支持 json、csv、tsv 格式
type: 'json'
});
// 设置样式
layer.setOptions({
style: {
// 3D 类型下区面不支持设置描边。
color: 'blue',
opacity: 0.8,
height: 10000
}
});
// 执行绘制
layer.render();
参考手册
以下未列出的属性见 通用配置。
方法 | 返回 | 说明 |
---|---|---|
setData( | 同 通用配置。 | |
setOptions( | ||
render() | ||
setFitView() | ||
setZIndex( | ||
addTo( | ||
remove() | ||
destroy() |
DataOptions 数据属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
lnglat | sting Function | 必填 | 指定坐标数据所在列名,或者通过自定义函数返回地理坐标。
|
type | string | json | 数据格式,默认 JSON 格式,支持格式还有 CSV,TSV。 |
VisualOptions 可视化属性 | 类型 | 默认值 | 支持该属性的类型 | 说明 |
---|---|---|---|---|
style | StyleOptions | 必填 | 通用 | 图形显示样式配置项,具体属性请看下表的 StyleOptions。 |
selectStyle | StyleOptions | 选填 | 除了线类型(line)和 基础热力(normal)外, 其他类型都支持。 | 选中态样式,鼠标悬浮时触发的样式,该属性会和 style 进行合并,因此只需设置需要变化的属性即可,无变化的属性无需设置。 该属性的前提是需要设置 eventSupport 为 true,以保证鼠标事件可以被触发。 selectStyle 仅支持固定样式,不支持 另外,「基础热力」和 「3D 线」暂时不支持选中样式设置。 |
StyleOptions 样式配置 | 类型 | 默认值 | 数据类型 type | 形状 shape | 说明 |
---|---|---|---|---|---|
radius | number Function AttrOptions | 0 | point | circle | 圆形 |
prism | 构成棱柱体 | ||||
topRadius | number Function | 0 | point | prism | 构成棱柱 |
bottomRadius | number Function | 0 | point | prism | 构成棱柱 |
size | number Array<number, number> Function AttrOptions | 0 | point | image | 指定图片宽高的像素大小。 如果指定一个 number,则应用于图片的宽度,高度随着宽度等比缩放。 如果指定 Array<number, number> ,则分别应用于图片的宽和高。图片大小按照 [width, height] 展现。 |
height | number Function AttrOptions | 0 | point | prism | 棱柱体自身高度。参考示例 如果设置为 0,则是贴地图形。参考示例 |
altitude | number Function AttrOptions | 0 | point | circle | 圆点离地高度。设置 >0 会使圆点漂浮在空中。 |
color | string Function AttrOptions | point line polygon | circle line polygon prism | 图形填充颜色,不设置则不填充颜色。
对应 1.1.3 以前的版本属性为 fill,fill 已弃用。建议使用 color 属性代替。 | |
borderColor | string | point | circle image | 图形边框颜色,默认不设置颜色。 注意:除了 对应 1.1.3 以前的版本属性为 stroke,stroke 已弃用。建议使用 borderColor 属性代替。 | |
borderWidth | number | 0 | point | circle | 仅限图形
对应 1.1.3 以前的版本属性为 lineWidth,lineWidth 已弃用。建议使用 borderWidth 属性代替。 |
source | string HTMLImageElement HTMLCanvasElement Function | point | image |
| |
curveness | number | 0 | line | line | 仅限线 |
angle | number | 0 | point | prism | 设置 prism 类型图形的旋转角度。X 轴方向正右,顺时针计算。 单位弧度,即范围从 0 - Math.PI * 2。 |
AttrOptions | 类型 | 默认值 | 说明 |
---|---|---|---|
key | string | 必填 | 当前属性所依赖的数据列。 |
value | Array | 必填 | 属性输出区间, 例如: radius: { key: 'val', value: [10, 25] } 表示每条数据的 radius 大小是由「val」列的数据映射在 10-25 区间而得到的。 |
input | Array | 选填 | 数据的输入区间。默认取 key 所在列的数据作为输入区间。 |
scale | string | linear | 输入区间 支持比例尺:线性比例尺 |