GeoGlobe JS SDK

Class: Commute

.Visuals.Custom. Commute

通勤图层

new Commute(options)

Parameters:
Name Type Description
options Object
Properties
Name Type Description
id String 图层id
data Array 数据，geojson格式
visibility Boolean 图层默认是否显示
rendererOptions Object 渲染配置
Properties
Name Type Description
markLine Object 标线
Properties
Name Type Description
effect Object 散点特效
Properties
Name Type Description
color String 散点颜色
scaleSize Number 缩放倍数，以标线宽度为基准
period Number 运动周期，无单位，值越大越慢
itemStyle Object 图形样式属性
Properties
Name Type Description
color String 颜色
width Number 线宽
markPoint Object 标注
Properties
Name Type Description
hoverable Boolean 是否启用鼠标悬浮
symbolSize Number 标注大小
effect Object 炫光特效
Properties
Name Type Description
scaleSize Number 缩放倍数，以标注大小为基准
period Number 运动周期，无单位，值越大越慢
itemStyle Object 图形样式属性
Properties
Name Type Description
color String 颜色
tooltip Object 悬浮提示
Properties
Name Type Description
show Boolean 是否显示悬浮提示框
backgroundColor String 背景颜色
borderColor String 边框颜色
borderRadius Number 边框圆角
borderWidth Number 边框宽度
padding Number 内边距
textStyle Object 文字样式
Properties
Name Type Description
color String 颜色
fontFamily String 字体系列
fontSize Number 字号 ，单位px
fontStyle String 样式，可选为：'normal' | 'italic' | 'oblique'
fontWeight String/Number 粗细，可选为：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
Author:
  • kz
Source:
View2D/Visuals/Custom/Commute.js
Example
//构造地图对象
 var map = new GeoGlobe.Map({
    style: Cfg.style,
    container: 'map',
    zoom: 16,
    bearing: 0,
	pitch: 0,
    units: "degrees",
    center: [114.20509630753577, 30.776055193053764]
 });
 //构造可视化定制图层
 var custom = new GeoGlobe.Visuals.Custom();
 //添加到地图中
 custom.addTo(map);
 //通过jquery加载json数据
 $.getJSON('../../data/jinling.json', function (result) {
    //构造通勤图层
    var commute = new GeoGlobe.Visuals.Custom.Commute({
        id: "commute_1",
        data: result,
        visibility: true,
        rendererOptions: {
            markLine: {
                effect: {
                    color: 'rgba(255,255,255,0.7)',
                    scaleSize: 60,
                    period: 15
                },
                itemStyle: {
                    color: 'rgba(255,58,53,0.9)',
                    width: 0.1
                }
            },
            markPoint: {
                symbolSize: 30,
                effect: {
                    scaleSize: 2,
                    period: 15
                },
                itemStyle: {
                    color: 'rgba(255,255,255,0.7)'
                }
            }
        }
    });
    //添加到可视化定制图层
    commute.addTo(custom);
    //绘制
    custom.render();
 });

Members

cacheCanvas :Array

离屏画布集合
Type:
  • Array
Source:
View2D/Visuals/Custom/Commute.js

cacheCanvasContext :Array

离屏画布的上下文集合
Type:
  • Array
Source:
View2D/Visuals/Custom/Commute.js

canvas :Array

画布集合，使用分层画布分别绘制
Type:
  • Array
Source:
View2D/Visuals/Custom/Commute.js

canvasContext :Array

画布的上下文集合
Type:
  • Array
Source:
View2D/Visuals/Custom/Commute.js

MarkLine :function

标线类
Type:
  • function
Source:
View2D/Visuals/Custom/Commute.js

markLines :Object

标线对象集
Type:
  • Object
Source:
View2D/Visuals/Custom/Commute.js

MarkPoint :function

标注类
Type:
  • function
Source:
View2D/Visuals/Custom/Commute.js

markPoints :Array

标注对象集
Type:
  • Array
Source:
View2D/Visuals/Custom/Commute.js

visibility :Boolean

图层默认是否显示
Type:
  • Boolean
Source:
View2D/Visuals/Custom/Commute.js

Methods

_initMarkLine()

定义标线类
Source:
View2D/Visuals/Custom/Commute.js

addTo(custom)

关联可视化定制图层对象
Parameters:
Name Type Description
custom GeoGlobe.Visuals.Custom
Source:
View2D/Visuals/Custom/Commute.js

clearCanvas()

画布清空
Source:
View2D/Visuals/Custom/Commute.js

destroy()

销毁图层
Source:
View2D/Visuals/Custom/Commute.js

draw()

图层绘制
Source:
View2D/Visuals/Custom/Commute.js

drawCanvas1()

绘制标线、标线的点到最底层画布
Source:
View2D/Visuals/Custom/Commute.js

drawCanvas2()

绘制标注、标线的点（大）
Source:
View2D/Visuals/Custom/Commute.js

hideTooltip()

关闭悬浮提示
Source:
View2D/Visuals/Custom/Commute.js

hover(x, y)

鼠标悬浮时触发
Parameters:
Name Type Description
x Number 鼠标在主画布上的位置（x轴方向）
y Number 鼠标在主画布上的位置（y轴方向）
Source:
View2D/Visuals/Custom/Commute.js

onMouseMove(event)

鼠标指针悬停事件
Parameters:
Name Type Description
event Object 事件参数
Source:
View2D/Visuals/Custom/Commute.js

onMove()

图层（地图）移动时触发
Source:
View2D/Visuals/Custom/Commute.js

onMoveEnd()

图层（地图）移动结束触发
Source:
View2D/Visuals/Custom/Commute.js

onResize()

图层自适应
Source:
View2D/Visuals/Custom/Commute.js

redraw()

图层重绘
Source:
View2D/Visuals/Custom/Commute.js

render()

渲染图层
Source:
View2D/Visuals/Custom/Commute.js

setData(data)

数据的处理，构造标线对象
Parameters:
Name Type Description
data Array 数据
Source:
View2D/Visuals/Custom/Commute.js

setVisible(visibility)

图层的显示与隐藏
Parameters:
Name Type Description
visibility Boolean 可见性
Source:
View2D/Visuals/Custom/Commute.js

stopDraw()

停止绘制
Source:
View2D/Visuals/Custom/Commute.js

updateXY()

重新计算标线点、标注的屏幕坐标
Source:
View2D/Visuals/Custom/Commute.js