项目要求：
需要把websocket推送的数据进行展示。不停地刷掉旧的数据。但是需要根据数据坐标圈出来对应的车辆。
开始使用的是canvas进行画图，思路是使用absolute定位，for循环，在图片同一个位置固定canvas，根据坐标进行作图。但是过程中出现很多问题，包括清空画图后，再次画图还是会叠加旧信息。以及画图作图和数据展示是分离，导致有加载先后问题。因此最后放弃了使用canvas进行标志车辆。
最后决定使用svg进行作图。
实现原理是：把需要的坐标信息计算出来，和车辆的基本信息存放在一个变量里面，这样渲染车辆的时候同时渲染标注信息。这样解决了不同步问题，也没有出现信息叠加的清空。
svg使用的方法如下：
在<svg></svg>代码中进行画图，
1、矩形
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/> x– 矩形左上角x位置 y– 矩形左上角y位置 width–矩形宽 height–矩形高 rx–圆角x方向半径 ry–圆角y方向半径
2、圆
<circle cx="25" cy="75" r="20"/> r–圆半径 cx–圆心x位置 cy–圆心y位置
3、椭圆
<ellipse cx="75" cy="75" rx="20" ry="5"/> rx–椭圆x半径 ry–椭圆y半径 cx–椭圆中心x位置 cy–椭圆中心y位置
4、线条
<line x1="10" x2="50" y1="110" y2="150"/> x1–起点x位置 y1–起点y位置 x2–终点x位置 y2–终点y位置
5、折线
<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/> points–点集数列，每个数字用空白、逗号、终止命令符或者换行符分隔开，每个点必须包含2个数字(x坐标与y坐标)
6、多边形
<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>
路径绘制完后闭合图形
7、路径
<path d="M 20 230 Q 40 205, 50 230 T 90230"/> d–一个点集数列以及关于如何绘制路径
每一个命令用一个关键字母表示，字母M表示Move To命令，跟在命令字母后面的是所需移动点的x和y轴坐标
例如：
移动到(10, 10)这个点命令，应该写成M 10 10
每一个命令都有两种表示方式，一种是用大写字母，表示采用绝对定位; 另一种是用小写字母，表示采用相对定位
8、直线命令
5个画直线命令 M命令(实际上为移动画笔位置命令) M x y或者m dx dy
经常出现在路径开始处，用于指明从何处开始画 L命令(Line To) L x y或者l dx dy
两个参数，分别是一个点的xz轴和y轴坐标，L命令会在当前位置和之前位置(L前画笔所在点)之间画线段 H命令 绘制水平线 V命令 绘制垂直线 H x或者h dx V y或者v dy
Z命令 闭合路径命令 Z或者z 不用区分大小写
会从当前点画一条直线到路径起点，虽然可能不总是需要闭合路径，常常放到路径的最后
9、曲线命令
两种贝塞尔曲线：三次贝塞尔曲线C和二次贝塞尔曲线Q
三次贝塞尔曲线需要定义一个点和两个控制点，使用C命令创建三次贝塞尔曲线，需要设置三组坐标参数: C x1 y1, x2 y2, x y或者c dx1 dy1, dx2 dy2, dx dy
最后一个坐标(x,y)表示曲线终点，另外两个坐标是控制点，(x1,y1)是起点的控制点，(x2,y2)是终点的控制点
控制点描述的是曲线起始点的斜率 S命令
通常情况下，一个点某一侧的控制点是其另一侧的控制点的对称(以保持斜率不变) S x2 y2, x y或者s dx2 dy2, dx dy Q命令
一个控制点，用来确定起点和终点的曲线斜率，两组参数(控制点和终点坐标) Q x1 y1, x y或者q dx1 dy1, dx dy T命令 T x y或者t dx dy
10、弧形
A rx ry x-axis-rotation large-arc-flag sweep-flag x y或者a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy large-arc-flag–角度大小，决定弧线大于还是小于180°，0表示小角度弧，1表示大角度弧 sweep-flag–弧线方向，0表示从起点到终点逆时针画弧，1表示从起点到终点顺时针画弧
