jsPlumb 基本概念

一烧颖、默認(rèn)屬性

• Anchor：錨點(diǎn)(連接點(diǎn)位置)授霸，可以設(shè)置在任何沒(méi)有錨點(diǎn)的目標(biāo)上(endPoint)
• Anchors：設(shè)置在connect的源和目標(biāo)點(diǎn)的連接點(diǎn)位置姻政，默認(rèn)是 BottomCenter
• Connector：連接線(xiàn)（比如：["Bezier", {curviness: 63}]為貝塞爾曲線(xiàn)）
• ConnectionsDetachable：是否在連接點(diǎn)可以用鼠標(biāo)拖動(dòng)[true/false]
• Container：容器
• DoNotThrowErrors：設(shè)置當(dāng)錨點(diǎn)(Anchor)氮块、端點(diǎn)(endPoint)和連接器(Connector)不存在的時(shí)候是否拋出異常
• ConnectionOverlays：默認(rèn)覆蓋附著在每個(gè)連接器
• DragOptions：為 被 jsPlumb.draggable 設(shè)置了拖拽的元素拖拽時(shí)設(shè)置的css樣式.eg:
  hoverClass: "dropHover",//釋放時(shí)指定鼠標(biāo)停留在該元素上使用的css class;
  activeClass: "dragActive"http://可拖動(dòng)到的元素使用的css class
• Endpoint: 端點(diǎn)的形狀定義，比如圓：[ "Dot", { radius:5 } ]葛峻；正方形：Rectangle
• Endpoints：設(shè)置了連接器的源和目標(biāo)端點(diǎn)的形狀吏夯，eg圓： [ [ "Dot", { radius:7 } ], [ "Dot", { radius:11 } ] ]
• EndpointOverlays:默認(rèn)覆蓋附著在每個(gè)端點(diǎn)
• EndpointStyle：端點(diǎn)的默認(rèn)樣式
• EndpointStyles：設(shè)置了連接器的源和目標(biāo)端點(diǎn)的樣式
• EndpointHoverStyle：端點(diǎn)的hover狀態(tài)樣式
• EndpointHoverStyles ：設(shè)置了連接器的源和目標(biāo)端點(diǎn)端點(diǎn)的hover狀態(tài)樣式
• HoverPaintStyle ：
• LogEnabled：jsPlumb內(nèi)部日志是否開(kāi)啟磷籍。
• Overlays：默認(rèn)覆蓋連接器和端點(diǎn)樣式，裝飾連接器,如標(biāo)簽挤渐、箭頭等
• MaxConnections ：設(shè)置連接點(diǎn)最多可以連接幾條線(xiàn)
• PaintStyle ：設(shè)置連接點(diǎn)的樣式
• connectorStyle：設(shè)置連接線(xiàn)樣式
• ReattachConnections ：
• RenderMode ：默認(rèn)渲染模式
• Scope：連接點(diǎn)的標(biāo)識(shí)符苹享，只有標(biāo)識(shí)符相同的連接點(diǎn)才能連接

二、錨點(diǎn)(Anchor)

1 . 默認(rèn)錨位置:

• Top (TopCenter)
• TopRight
• Right (RightMiddle)
• BottomRight
• Bottom (BottomCenter)
• BottomLeft
• Left (LeftMiddle)
• TopLeft
• Center

eg：

//定義了一個(gè)在底部中間的錨點(diǎn)位置
jsPlumb.connect({...., anchor:"Bottom", ... });

2 . 基于數(shù)組的語(yǔ)法 [x,y,dx,dy]

• x-相對(duì)該錨點(diǎn)在x軸坐標(biāo)比例（最大1）
• y-相對(duì)該錨點(diǎn)y軸坐標(biāo)比例（最大1）
• dx-控制錨的方向
• dy-同上

eg：

//定義了一個(gè)在底部中間的錨點(diǎn)位置
jsPlumb.connect({...., anchor:[ 0.5, 1, 0, 1 ], ... });

如果錨點(diǎn)位置無(wú)法滿(mǎn)足你的需求浴麻，還可以設(shè)置錨點(diǎn)的偏移量[x,y,dx,dy,offSetX,offSetY] ,下面設(shè)置了Y軸偏移50px得问，錨點(diǎn)Y坐標(biāo)會(huì)+50px:

jsPlumb.connect({...., anchor:[ 0.5, 1, 0, 1, 0, 50 ], ... }); 

3 . 動(dòng)態(tài)錨

• 數(shù)組定義

  沒(méi)有特殊的語(yǔ)法來(lái)創(chuàng)建一個(gè)動(dòng)態(tài)錨;可以提供一個(gè)靜態(tài)數(shù)組錨規(guī)格,如:

    var dynamicAnchors = [ [ 0.2, 0, 0, -1 ],  [ 1, 0.2, 1, 0 ], [ 0.8, 1, 0, 1 ], [ 0, 0.8, -1, 0 ] ];
    jsPlumb.connect({...., anchor:dynamicAnchors, ... });
  

  或者組合：

    var dynamicAnchors = [ [ 0.2, 0, 0, -1 ],  [ 1, 0.2, 1, 0 ],  "Top", "Bottom" ];
    jsPlumb.connect({...., anchor:dynamicAnchors, ... });
  

  這樣錨點(diǎn)會(huì)根據(jù)位置自動(dòng)調(diào)整到最合適的位置(定義的數(shù)組里幾個(gè)點(diǎn)中)

• 默認(rèn)定義

  jsPlumb提供了一個(gè)動(dòng)態(tài)錨 AutoDefault 選擇從 前 , 右 , 底 和 左 :

    jsPlumb.connect({...., anchor:"AutoDefault", ... });
  

4 . 多邊形錨

• Circle(圓)
• Ellipse(橢圓)
• Triangle(三角形)
• Diamond(菱形)
• Rectangle(矩形)
• Square(正方形)

(1) 單個(gè)多邊形

eg：

jsPlumb.addEndpoint("someElement", {
    endpoint:"Dot",
    anchor:[ "Perimeter", { shape:"Circle" } ]
});

如果錨點(diǎn)的寬高一樣，該錨點(diǎn)位置為動(dòng)態(tài)圓周软免。寬高不同為橢圓宫纬，類(lèi)似正方形和矩形。

默認(rèn)情況下膏萧，錨點(diǎn)個(gè)數(shù)為60漓骚，我們還可以手動(dòng)指定：

eg（指定150個(gè)動(dòng)態(tài)錨點(diǎn)）：

jsPlumb.addEndpoint("someDiv", {
    endpoint:"Dot",
    anchor:[ "Perimeter", { shape:"Square", anchorCount:150 }]
});

(2) 組合錨點(diǎn)（三角形與菱形）：

jsPlumb.connect({
    source:"someDiv",
    target:"someOtherDiv",
    endpoint:"Dot",
    anchors:[
        [ "Perimeter", { shape:"Triangle" } ],
        [ "Perimeter", { shape:"Diamond" } ]
    ]
});

(3) 自定義角度多邊形錨點(diǎn)

jsPlumb.connect({
    source:"someDiv",
    target:"someOtherDiv",
    endpoint:"Dot",
    anchors:[
        [ "Perimeter", { shape:"Triangle", rotation:25 } ],
        [ "Perimeter", { shape:"Triangle", rotation:-335 } ]
    ]
});  

上面定義了兩個(gè)三角形旋轉(zhuǎn)不同角度得到的組合圖形（旋轉(zhuǎn)適用帶角度的多邊形）蝌衔。

5. CSS類(lèi)和錨點(diǎn)

(1)介紹

錨點(diǎn)的不同位置可以有多種css樣式，那就要有不同的css類(lèi)提供支持蝌蹂。

被寫(xiě)入到錨點(diǎn)的CSS類(lèi)和元素與jsPlumb實(shí)例相關(guān)聯(lián)的前綴默認(rèn)的前綴:

jsplumb-endpoint-anchor-

eg：

var ep = jsPlumb.addEndpoint("someDiv", {
  anchor:[0.5, 0, 0, -1, 0, 0, "top" ]
};

jsPlumb將會(huì)分配這個(gè)類(lèi)給創(chuàng)建的 endpoint 和元素 someDiv：

jsplumb-endpoint-anchor-top

(2)示例

一個(gè)使用動(dòng)態(tài)錨的例子:

var ep = jsPlumb.addEndpoint("someDiv", {
  anchor:[
    [ 0.5, 0, 0, -1, 0, 0, "top" ],
    [ 1, 0.5, 1, 0, 0, 0, "right" ]
    [ 0.5, 1, 0, 1, 0, 0, "bottom" ]
    [ 0, 0.5, -1, 0, 0, 0, "left" ]
  ]
});

這里的類(lèi)分配給端點(diǎn)和元素循環(huán)這些值作為錨位置的變化:

jsplumb-endpoint-anchor-top
jsplumb-endpoint-anchor-right
jsplumb-endpoint-anchor-left
jsplumb-endpoint-anchor-bottom

如果您提供多個(gè)類(lèi)名,jsPlumb不會(huì)預(yù)先考慮類(lèi)中的每個(gè)詞的前綴:

var ep = jsPlumb.addEndpoint("someDiv", {
  anchor:[ 0.5, 0, 0, -1, 0, 0, "foo bar" ]
});

會(huì)導(dǎo)致2個(gè)類(lèi)被添加到端點(diǎn)和元素:

jsplumb-endpoint-anchor-foo 和 bar

(3)改變錨類(lèi)前綴

前綴 endpointAnchorClass 用于錨類(lèi)存儲(chǔ)為jsPlumb的成員噩斟，這個(gè)前綴是可更改的:

jsPlumb.endpointAnchorClass = "anchor_";

或者

var jp = jsPlumb.getInstance();
jp.endpointAnchorClass = "anchor_";

三、連接線(xiàn)(器)(Connectors)

1. 簡(jiǎn)介

jsPlumb提供了四種連接線(xiàn)：

• straight(直線(xiàn))
• Bezier(貝塞爾曲線(xiàn))
• flowchart(流程圖)
• state machine

straight

在兩個(gè)端點(diǎn)之間畫(huà)一條直線(xiàn)孤个。 它支持兩個(gè)構(gòu)造函數(shù)參數(shù):

• stub：可選的,默認(rèn)值為0剃允。此參數(shù)的任何正值將導(dǎo)致在與連接線(xiàn)的兩端產(chǎn)生一段不可改變方向的線(xiàn)段
• gap：可選，默認(rèn)為0像素齐鲤。在連接線(xiàn)的一端和連接的元素之間指定一個(gè)間隙斥废。

Bezier

貝塞爾提供了一個(gè)立方的貝塞爾曲線(xiàn)。 它支持一個(gè)構(gòu)造函數(shù)參數(shù):

• curviness：參數(shù)可選,默認(rèn)為150佳遂。 定義了曲線(xiàn)的彎曲程度营袜。

flowchart

垂直或水平的連接線(xiàn)，提供了四個(gè)參數(shù)：

• stub：這是最小長(zhǎng)度丑罪，以像素為單位荚板，最初的存根，源自一個(gè)端點(diǎn)吩屹。這是一個(gè)可選的參數(shù)跪另，并且可以是一個(gè)整數(shù)，它指定了連接器的每個(gè)末端的存根煤搜，或是一個(gè)整數(shù)數(shù)組免绿，指定[源目標(biāo)]端點(diǎn)的連接。默認(rèn)值為30像素的整數(shù)
• alwaysRespectStubs ：可選擦盾，默認(rèn)為false嘲驾。
• gap：可選，默認(rèn)為0像素迹卢。在連接線(xiàn)的一端和連接的元素之間指定一個(gè)間隙辽故。
• midpoint：可選，默認(rèn)為0.5腐碱。這是一個(gè)流程圖中最長(zhǎng)的部分將被繪制的2個(gè)元素之間的距離誊垢。
• cornerRadius：默認(rèn)為0。此參數(shù)的正值將改變彎角的度數(shù)症见。

state machine

略微彎曲的線(xiàn)（實(shí)際上是二次Bezier曲線(xiàn)）喂走，類(lèi)似于狀態(tài)機(jī)的連接器，支持的構(gòu)造函數(shù)參數(shù)：

• margin：可選谋作；默認(rèn)為5芋肠。定義連接線(xiàn)開(kāi)始/結(jié)束的元素的距離。
• curviness：可選的,默認(rèn)為10遵蚜，定義了曲線(xiàn)的彎曲程度业栅。
• proximityLimit ： 可選,默認(rèn)為80秒咐。 連接線(xiàn)的兩端之間的最小距離 它描繪為一條直線(xiàn)而非二次貝塞爾曲線(xiàn)。

四碘裕、端點(diǎn)(Endpoints)

簡(jiǎn)介

端點(diǎn)是連接里的一個(gè)端點(diǎn)外觀(guān)和行為表現(xiàn)的集合携取，jsPlumb實(shí)現(xiàn)了四個(gè)端點(diǎn)：

• Dot(點(diǎn))
• Rectangle(矩形)
• Blank(空)
• image(圖像)

創(chuàng)建

有不同的方式創(chuàng)建 endpoint：

(1)connect

并通過(guò)一個(gè)元素id或DOM元素作為源/目標(biāo),創(chuàng)建并分配一個(gè)新的端點(diǎn)

eg：

jpInstance.connect({
    source: "state1",
    target: "state2",
    scope: "state3"
});

(2)addEndpoint

創(chuàng)建一個(gè)新的端點(diǎn)

jpInstance.addEndpoint("myDivId", EndpointConfig)

(3)makeSource()

jpInstance.makeSource(...)

類(lèi)型

(1)Dot

就是在屏幕上畫(huà)一個(gè)點(diǎn)，它支持三個(gè)構(gòu)造函數(shù)參數(shù):

• radius：可選帮孔，默認(rèn)為10像素雷滋。 定義點(diǎn)的半徑
• cssClass ：可選，端點(diǎn)元素的CSS類(lèi)文兢。
• hoverClass 可選的晤斩，元素或連線(xiàn)的hover屬性樣式類(lèi)

(2)Rectangle

繪制一個(gè)矩形。 支持構(gòu)造函數(shù)參數(shù)有:

• width：可選的姆坚，默認(rèn)為20像素澳泵。定義矩形的寬度。
• height：可選的兼呵，默認(rèn)為20像素兔辅。定義矩形的高。
• cssClass ：可選的击喂，端點(diǎn)元素的CSS類(lèi)维苔。
• hoverClass ：可選的，元素或連線(xiàn)的hover屬性樣式類(lèi)

(3)Image

從一個(gè)指定的URL加載圖像懂昂，這個(gè)端點(diǎn)支持三種構(gòu)造函數(shù)參數(shù):

• src：圖片的url
• cssClass ：可選的介时，端點(diǎn)元素的CSS類(lèi)。
• hoverClass ：可選的凌彬，元素或連線(xiàn)的hover屬性樣式類(lèi)

五沸柔、覆蓋（連接元素）(Overlays)

簡(jiǎn)介

jsPlumb帶有五個(gè)類(lèi)型的覆蓋圖:

• Arrow(箭頭) ：一個(gè)可配置的箭頭，在某些點(diǎn)上涂上了一個(gè)可配置的箭頭铲敛。你可以控制箭頭的長(zhǎng)度和寬度褐澎，“折返”點(diǎn)一點(diǎn)尾巴分折回來(lái)，和方向（允許值為1和1原探；1是默認(rèn)的乱凿，意味著在連接點(diǎn)方向）
• Label(標(biāo)簽)：一個(gè)可配置的連線(xiàn)標(biāo)簽
• PlainArrow(平原箭頭)：沒(méi)有監(jiān)聽(tīng)的三角形箭頭
• Diamond(鉆石)：鉆石箭頭
• Custom(自定義)：可自定義DOM元素

位置

位置表明連接元素在連接線(xiàn)的位置顽素，通常有三種表明方式：

• [0 . . 1]范圍內(nèi)的十進(jìn)制數(shù)咽弦，表明在連接線(xiàn)的位置比例，默認(rèn)0.5

• [1 . . . ] (>1)的數(shù)字表明沿著連接線(xiàn)的絕對(duì)路徑的像素

• 小于零的整數(shù)數(shù)組:
  (1):指定一個(gè)覆蓋在端點(diǎn)的中心位置：

    location:[ 0.5, 0.5 ]
  

  (2):沿著x軸從左上角疊加5像素

    location: [ 5, 0 ]
  

  (3):沿著x軸從右下角疊加放置5像素

    location: [ -5, 0 ]
  

對(duì)于位置的操作胁出，jsPlumb提供了兩個(gè)方法：

• getLocation ——返回當(dāng)前位置
• setLocation ——設(shè)置當(dāng)前位置

使用

使用場(chǎng)景(出現(xiàn)以下調(diào)用的時(shí)候)：

• jsPlumb.connect
• jsPlumb.addEndpoint
• jsPlumb.makeSource

注： 沒(méi)有 jsPlumb.makeTarget

1. 在 jsPlumb.connect 被調(diào)用時(shí)使用

(1). 下面指定了 一個(gè)默認(rèn)配置的箭頭和一個(gè)文字為foo的標(biāo)簽文本：

jsPlumb.connect({
  ...
  overlays:[ 
    "Arrow", 
      [ "Label", { label:"foo", location:0.25, id:"myLabel" } ]
    ],
  ...
});

此連接的箭頭在連接線(xiàn)的中間型型，lable標(biāo)簽則是在連接線(xiàn)的四分之一處；這里添加了一個(gè)id全蝶，它可以在以后移除或修改標(biāo)簽時(shí)使用闹蒜。

(2). 箭頭位置位于連接線(xiàn)距離50像素(絕對(duì)位置):

jsPlumb.connect({
  ...
  overlays:[ 
    "Arrow", 
      [ "Label", { label:"foo", location:50, id:"myLabel" } ]
    ],
    ...
});

2. 在 jsPlumb.addEndpoint 被調(diào)用時(shí)使用

此連接將有10x30像素箭坐落在連接頭寺枉，標(biāo)簽“foo”則位于中點(diǎn)。端點(diǎn)本身也有一個(gè)覆蓋绷落，位于[ - 0.5 *寬姥闪，- 0.5 *高]相對(duì)于端點(diǎn)的左上角。

jsPlumb.addEndpoint("someDiv", {
  ...
  overlays:[
    [ "Label", { label:"foo", id:"label", location:[-0.5, -0.5] } ]
  ],
  connectorOverlays:[ 
    [ "Arrow", { width:10, length:30, location:1, id:"arrow" } ],
    [ "Label", { label:"foo", id:"label" } ]
  ],
  ...
});

注：在addEndpoint 使用 connectorOverlays 代替 overlays砌烁，因?yàn)?overlays指向端點(diǎn)覆蓋筐喳。

3. 在 jsPlumb.makeSource

同樣使用 connectorOverlays，而且 makeSource 支持 endpoint 參數(shù)函喉。
此連接將有10x30像素箭坐落在連接頭避归，標(biāo)簽“foo”位于中點(diǎn)。

jsPlumb.makeSource("someDiv", {
  ...
  endpoint:{
    connectorOverlays:[ 
      [ "Arrow", { width:10, length:30, location:1, id:"arrow" } ], 
      [ "Label", { label:"foo", id:"label" } ]
    ]
  }
  ...
});

4. addOverlay 方法

Endpoints 和 Connections 都有一個(gè)方法： addOverlay管呵，它提供一個(gè)單一的方法定義一個(gè) 覆蓋(Overlays):

var e = jsPlumb.addEndpoint("someElement");
e.addOverlay([ "Arrow", { width:10, height:10, id:"arrow" }]); 

Overlay Types（覆蓋類(lèi)型）

1. Arrow(箭頭)

一個(gè)箭頭 使用四個(gè)點(diǎn)：頭梳毙、兩個(gè)尾點(diǎn)和一個(gè)foldback(監(jiān)聽(tīng))，它允許箭頭的箭尾縮進(jìn)捐下。此覆蓋的可用構(gòu)造函數(shù)參數(shù)：

• width：寬度
• length：長(zhǎng)度
• location：在連接線(xiàn)上的位置
• direction：默認(rèn)1-向前账锹，-1向后
• foldback：箭頭沿軸到尾點(diǎn)的監(jiān)聽(tīng)。默認(rèn)是0.623
• paintStyle：Endpoints 和 Connectors 的樣式對(duì)象

2. PlainArrow（平原箭頭）

這其實(shí)就是一個(gè) foldback=1 的 Arror蔑担；繼承Arror的構(gòu)造函數(shù)

3. Diamond（菱形）

這其實(shí)就是一個(gè) foldback=2 的 Arror牌废；繼承Arror的構(gòu)造函數(shù)

4. Label（標(biāo)簽）

(1) 介紹

提供裝飾連接器的文本標(biāo)簽∑∥眨可用的構(gòu)造函數(shù)參數(shù)是：

• label : 文本顯示鸟缕。 您可以提供一個(gè)函數(shù),而不是純文本:連接作為一個(gè)參數(shù)傳遞,它應(yīng)該返回一個(gè)字符串。
• cssClass :可選的css類(lèi)使用的標(biāo)簽∨盘В現(xiàn)在優(yōu)先使用 labelStyle 參數(shù)懂从。
• labelStyle ： 可選參數(shù)標(biāo)簽的外觀(guān)。 可用參數(shù)有：
  • font ：一種適用于畫(huà)布元素的字體字符串
  • fillStyle ：標(biāo)簽的背景顏色填充蹲蒲，可選番甩。
  • color ：字體顏色，可選
  • padding ：表示標(biāo)簽的寬度的比例届搁，而不是px和ems缘薛。
  • borderWidth ：標(biāo)簽的邊框?qū)挾龋J(rèn)0
  • borderStyle ：標(biāo)簽邊框的樣式卡睦，可選
• location ：標(biāo)簽位置

(2). getLabel 和 setLabel

標(biāo)簽覆蓋提供了兩個(gè)方法 getLabel 和 setLabel 用于動(dòng)態(tài)地get/set標(biāo)簽內(nèi)容:

var c = jsPlumb.connect({
  source:"d1", 
  target:"d2", 
  overlays:[
    [ "Label", {label:"FOO", id:"label"}]
  ] 
});

...

var label = c.getOverlay("label");
console.log("Label is currently", label.getLabel());
label.setLabel("BAR");
console.log("Label is now", label.getLabel());

這個(gè)例子里宴胧，標(biāo)簽被賦予一個(gè)id ‘label’，然后檢索這個(gè)id動(dòng)態(tài)設(shè)置lable的值表锻。

Connections 和 Endpoints 都支持 標(biāo)簽覆蓋：

var conn = jsPlumb.connect({
  source:"d1", 
  target:"d2",
  label:"FOO"
});

...

console.log("Label is currently", conn.getLabel());
conn.setLabel("BAR");
console.log("Label is now", conn.getLabel());

(3). 動(dòng)態(tài)設(shè)置label

var conn = jsPlumb.connect({
  source:"d1", 
  target:"d2"
});                 

...

conn.setLabel(function(c) {
  var s = new Date();
  return s.getTime() + "milliseconds have elapsed since 01/01/1970";
});
console.log("Label is now", conn.getLabel());

5. Custom（自定義）

jsPlumb允許自定義一個(gè) OverLays恕齐，你只需要實(shí)現(xiàn) create(component)：

var conn = jsPlumb.connect({
  source:"d1",
  target:"d2",
  paintStyle:{
    strokeStyle:"red",
    lineWidth:3
  },
  overlays:[
    ["Custom", {
      create:function(component) {
        return $("<select id='myDropDown'><option value='foo'>foo</option><option value='bar'>bar</option></select>");                
      },
      location:0.7,
      id:"customOverlay"
    }]
  ]
});

注意 此處的id為 customeOverlay ，你可以在 Connection 或者 Endpoint上使用 getOverlay(id) 方法瞬逊。

隱藏/顯示 Overlays（覆蓋）

可以使用 setVisible 方法控制 Overlays 的顯示屬性显歧，或者在一個(gè)連接上使用 showOverlay(id) 和 hideOverlay(id)仪或。

(1). 使用id：

var connection = jsPlumb.connect({
  ...
  overlays:[ 
    "Arrow", 
    [ "Label", { label:"foo", location:0.25, id:"myLabel" } ]
  ],
  ...
});

// time passes

var overlay = connection.getOverlay("myLabel");
// now you can hide this Overlay:
overlay.setVisible(false);
// there are also hide/show methods:
overlay.show();
overlay.hide();

(2). 使用 showOverlay(id) 和 hideOverlay(id)：

Connection 和 Endpoint 可以使用showOverlay(id) 和 hideOverlay(id)：

var connection = jsPlumb.connect({
  ...
  overlays:[ 
    "Arrow", 
    [ "Label", { label:"foo", location:-30 , id:"myLabel" }]
  ],
  ...
});

// time passes

connection.hideOverlay("myLabel");

// more time passes

connection.showOverlay("myLabel");

刪除 Overlays(覆蓋)

var connection = jsPlumb.connect({
  ...
  overlays:[ 
    "Arrow", 
    [ "Label", { label:"foo", location:0.25 , id:"myLabel"} ]
  ],
  ...
});     

// time passes

connection.removeOverlay("myLabel");