开发 数据可视化 JS API v1.2 参考手册 VisualLayer 点/线/面类型

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(<LayerOptions> options)

创建可视化图层。同 通用配置

Loca.visualLayer(<LayerOptions> optitons)

LayerOptions 

图层配置

类型

默认值

说明

type

string

必填

坐标解析类型,支持:点point、线line、面polygon

shape

string

必填

图层显示的形状类型,具体形状和 type 类型有关联。

typepoint 时,支持的形状有:圆形 circle、图片 image、棱柱体 prism。其中 prism 仅支持 3D 模式。

typeline 时,支持的形状为 line

typepolygon 时,支持的形状为 polygon

vertex

number

4

仅当 shape 为棱柱体 prism 时,表示棱柱体底面正多边形的顶点数。其他 shape 下不生效。参考示例

如果想绘制圆柱形,则尽量增多顶点数量,以达到近似圆形的效果。(建议 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(<Array> data,

 <DataOptions> options?)

通用配置

setOptions(<VisualOptions> options)

render()

setFitView()

setZIndex(<number> zIndex)

addTo(<Loca> map)

remove()

destroy()

DataOptions

数据属性

类型

默认值

说明

lnglat

sting

Function

必填

指定坐标数据所在列名,或者通过自定义函数返回地理坐标。


typepoint 时,data 中每条数据的坐标格式为:数组 [lng, lat] 或者字符串 'lng, lat'

typeline 时,data 中每条数据的坐标格式为:二维数组 [ [lng, lat], [lng, lat] ] 或者一维数组 ['lng, lat', 'lng, lat']

typepolygon 时,data 中每条数据的坐标格式同 line 结构。

type

string

json

数据格式,默认 JSON 格式,支持格式还有 CSV,TSV。

VisualOptions

可视化属性

类型

默认值

支持该属性的类型

说明

style

StyleOptions

必填

通用

图形显示样式配置项,具体属性请看下表的 StyleOptions。

selectStyle

StyleOptions

选填

除了线类型(line)和

基础热力(normal)外,

其他类型都支持。

选中态样式,鼠标悬浮时触发的样式,该属性会和 style 进行合并,因此只需设置需要变化的属性即可,无变化的属性无需设置。

该属性的前提是需要设置 eventSupport 为 true,以保证鼠标事件可以被触发。

selectStyle 仅支持固定样式,不支持AttrOptions类型动态样式。

另外,「基础热力」和 「3D 线」暂时不支持选中样式设置。

参考示例

StyleOptions  

样式配置

类型

默认值

数据类型 type

形状 shape

说明

radius

number

Function

AttrOptions

0

point

circle

圆形circle半径。

参考示例

prism

构成棱柱体 prism 的顶面和底面的正多边形半径。参考示例

topRadius

number

Function

0

point

prism

构成棱柱 prism 顶面的正多边形半径。优先级大于 radius。

bottomRadius

number

Function

0

point

prism

构成棱柱 prism 底面的正多边形半径。优先级大于 radius。

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

图形填充颜色,不设置则不填充颜色。

shapepointpolygon 时,为填充颜色。

shapeline 时,为线段颜色。

shapeprism 时,为棱柱体颜色。

对应 1.1.3 以前的版本属性为 fill,fill 已弃用。建议使用 color 属性代替。

borderColor

string


point

circle

image

图形边框颜色,默认不设置颜色。

注意:除了 circleimage 外,都不支持边框绘制。

对应 1.1.3 以前的版本属性为 stroke,stroke 已弃用。建议使用 borderColor 属性代替。

borderWidth

number

0

point

circle

仅限图形circle描边宽度。

line 类型暂时不支持设置宽度。

对应 1.1.3 以前的版本属性为 lineWidth,lineWidth 已弃用。建议使用 borderWidth 属性代替。

source

string

HTMLImageElement

HTMLCanvasElement

Function


point

image

shapeimage时生效,可以传入图片的 http(s) 路径、base64URI 或者 DOM 对象。 参考示例

curveness

number

0

line

line

仅限线line类型生效,指定线的曲率,范围 [-1, 1]。当为 0 时,为直线。 参考示例

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

输入区间input和输出区间value映射所使用的比例尺类型,默认线性比例尺  linear

支持比例尺:线性比例尺linear,乘方 pow,开方sqrt,Log 指数log


返回顶部 示例中心 常见问题 智能客服 公众号
二维码