G线图绘制
<pre><code class="language-javascript">/**
* PTV 模块Gline绘制
* @param {*} data
* @param {*} svg
* @param {*} width
* @param {*} height
*/
PTVGline(data, svg, width, height, trackPoints, options = {}) {
if (options.offline) {
const { imageWidth, imageHeight } = options;
this.offlineUpdateSvgViewBox(imageWidth, imageHeight);
// 离线状态下 需要追踪所有的点
trackPoints = data.map(item =&gt; item.TARGET_ID);
svg = this.svg.node();
} else {
this.init(d3.select(svg));
}
if (data.length) {
if (!this.randomColors) {
this.randomColors = this.randomColor(100000);
}
let g = null;
if (!this.g.select('.Gline-g').size()) {
this.g.append('g').attr('class', 'Gline-g').style('pointer-events', 'none');
}
g = this.g.select('.Gline-g');
// 移除之前的dom
g.html('');
// 移除之前绘制的marke
d3.select(svg).select('#marker').selectAll('.marker-trace').remove();
for (let index = 0; index &lt; data.length; index++) {
const line = data[index];
if (isNumber(line.TARGET_ID) &amp;&amp; trackPoints.indexOf(line.TARGET_ID) &gt; -1) {
const target = g.select(`.traceId${line.TARGET_ID}`);
// 找到了之前的这个轨迹
if (target.size() &gt; 0) {
this.drawLinePTVPath(target, line.TRAJECTORY, this.randomColors[+line.TARGET_ID], +line.TARGET_ID, options);
} else {
this.drawLinePTVStart(g, line.TARGET_ID, line.TRAJECTORY, this.randomColors[+line.TARGET_ID], options);
}
}
}
}
}</code></pre>
<pre><code class="language-javascript">/**
* 绘制G线起始elm
* @param {*} g
* @param {*} id
* @param {*} pos
* @param {*} color
* @param {*} id
*/
drawLinePTVStart(g, id, pos, color, option) {
const appendg = g.append('g').attr('class', `traceId${id}`);
this.drawPtvGline(appendg, pos, color, id, option);
}</code></pre>
<pre><code class="language-javascript"> /**
* 绘制G线路径
* @param {*} target
* @param {*} pos
* @param {*} color
* @param {*} id
*/
drawLinePTVPath(target, pos, color, id, option) {
target.html('');
this.drawPtvGline(target, pos, color, id, option);
}</code></pre>
<pre><code class="language-javascript">/**
* 绘制G线
* @param {*} target
* @param {*} pos
* @param {*} color
*/
drawPtvGline(target, pos, color, id, options = {}) {
const lastPoint = pos[pos.length - 1];
let config = this.vm &amp;&amp; this.vm.$refs.canvasHeader.getConfig('Moudle');
const svg = target.node().parentNode.parentNode.parentNode;
const markId = `marker-trace-${id}`;
const defs = d3.select(svg).select('#marker');
defs.append('marker')
.attr('id', markId)
.attr('class', 'marker-trace')
.attr('viewBox', '0 0 10 10')
.attr('refX', 8)
.attr('refY', 5)
.attr('markerWidth', 5)
.attr('markerHeight', 5)
.attr('orient', 'auto')
.html(`&lt;path d=&quot;M 0 0 L 10 5 L 0 10Z&quot; stroke-width=&quot;0&quot; stroke-linecap=&quot;round&quot; fill=&quot;${color}&quot; /&gt;`);
if (!config) {
config = {
showGlineTxt: true
};
}
// 离线状态下 直接走参数获取
if (options.offline) {
config.showGlineTxt = options.showGlineTxt;
}
// target.append('circle')
// .attr('cx', lastPoint[0])
// .attr('cy', lastPoint[1])
// .attr('r', 2)
// .attr('fill', 'none')
// .attr('stroke', color)
// .attr('stroke-width', 1);
target.append('text')
.attr('x', lastPoint[0])
.attr('y', lastPoint[1])
.attr('font-size', '8')
.attr('fill', color)
.attr('dx', 0)
.attr('dy', -5)
.attr('text-anchor', 'middle')
.text(id)
.style('opacity', config.showGlineTxt ? 1 : 0);
target.append('path')
.attr('d', this.growPath(pos))
.attr('marker-end', `url(#${markId})`)
.attr('fill', 'none')
// .attr('stroke-linecap','round')
.attr('stroke', () =&gt; color)
.attr('stroke-width', 1);
// .style('pointer-events', 'none');
}</code></pre>