GeoGlobe JS SDK

Class: Network

.Visuals.Custom. Network

关系网络图层

new Network(options)

Parameters:
Name Type Description
options Object
Properties
Name Type Description
id String 图层id
data Array 数据
visibility Boolean 图层默认是否显示
rendererOptions Object 渲染配置
Properties
Name Type Description
markLine Object 标线
Properties
Name Type Description
hoverable Boolean 是否启用鼠标悬浮
itemStyle Object 图形样式属性
Properties
Name Type Description
width Number 线宽
color Number 颜色
markPoint Object 标注
Properties
Name Type Description
hoverable Boolean 是否启用鼠标悬浮
itemStyle Object 图形样式属性
Properties
Name Type Description
images Array 图片资源集
shadowColor String 阴影颜色
shadowBlur String 阴影模糊度
shadowOffsetX String 阴影偏移量X
shadowOffsetY String 阴影偏移量Y
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/Network.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);
 //构造关系网络图层
 var network = new GeoGlobe.Visuals.Custom.Network({
    id: "network_1",
    data: {
        points: [{
            id: '1',
            name: '冯宝宝',
            symbol: 0,
            lon: 114.06044483184814,
            lat: 22.54109841178252
        }, {
            id: '2',
            name: '工作地址',
            symbol: 1,
            lon: 114.0464973449707,
            lat: 22.538284169039656
        }, {
            id: '3',
            name: '就医地址',
            symbol: 2,
            lon: 114.0834903717041,
            lat: 22.56892065261958
        }, {
            id: '4',
            name: '帮扶人',
            symbol: 3,
            lon: 114.03907299041748,
            lat: 22.55069018837554
        }],
        links: [{
            source: '1',
            target: '2'
        }, {
            source: '1',
            target: '3'
        }, {
            source: '1',
            target: '4'
        }]
    },
    visibility: true,
    rendererOptions: {
        markLine: {
            hoverable: true,
            itemStyle: {
                width: 2
            }
        },
        markPoint: {
            hoverable: true
        }
    }
 });
 //添加到可视化定制图层
 network.addTo(custom);
 //绘制
 custom.render();

Members

cacheCanvas :Array

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

cacheCanvasContext :Array

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

canvas :Array

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

canvasContext :Array

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

MarkLine :function

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

markLines :Array

标线对象集
Type:
  • Array
Source:
View2D/Visuals/Custom/Network.js

MarkPoint :function

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

markPoints :Array

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

visibility :Boolean

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

Methods

addTo(custom)

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

clearCanvas()

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

destroy()

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

draw()

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

drawCanvas1()

将静态部分绘制到画布1
Source:
View2D/Visuals/Custom/Network.js

drawCanvas2()

将动画部分绘制到画布2
Source:
View2D/Visuals/Custom/Network.js

getMarkPointById(id)

根据节点id获取MarkPoint对象
Parameters:
Name Type Description
id 节点id
Source:
View2D/Visuals/Custom/Network.js
Returns:
markPoint 标注对象
Type
GeoGlobe.Visuals.Custom.Network.MarkPoint

hideTooltip()

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

hover(x, y)

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

onMouseMove(event)

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

onMove()

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

onMoveEnd()

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

onResize()

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

redraw()

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

render()

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

setData(data)

数据的处理，构造标注、标线对象
Parameters:
Name Type Description
data Array 数据
Source:
View2D/Visuals/Custom/Network.js
Example
{
 points:[{
            id: '1',
            name: '节点1',
            symbol: 1,
            lon: 114.06044483184814,
            lat: 22.54109841178252
        }, {
            id: '2',
            name: '节点2',
            symbol: 2,
            lon: 114.0464973449707,
            lat: 22.538284169039656
        }],
        links:[{
            source: '2',
            target: '1'
        }]
       }

setVisible(visibility)

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

stopDraw()

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

updateXY()

重新计算标注的屏幕坐标
Source:
View2D/Visuals/Custom/Network.js