|
1301
|
lineWktStr = lineWktStr.substring(0, lineWktStr.length - 1)
|
|
|
1302
|
lineWktStr += ' )'
|
|
|
1303
|
var lineLayer = new Ai.Polyline(lineWktStr, {color: 'gray', opacity: 1.0})
|
|
|
1304
|
this.layersGroup.addLayer(lineLayer)
|
|
|
1305
|
this.trackMap.setViewPort([lineLayer])
|
|
|
1306
|
this.trackMap.setZoom(this.trackMap.getZoom() - 1)
|
|
|
1307
|
|
|
|
1308
|
var point = Ai.Point([this.trackData[0].traceList[0].latitude, this.trackData[0].traceList[0].longitude], {
|
|
|
1309
|
icon: Ai.Icon({
|
|
|
1310
|
// 设置图标URL路径
|
|
|
1311
|
iconUrl: 'static/images/track.png',
|
|
|
1312
|
// 设置图标大小
|
|
|
1313
|
iconSize: [40, 55],
|
|
|
1314
|
// 设置点对象和图标的相对偏移量
|
|
|
1315
|
iconAnchor: [20, 25]
|
|
|
1316
|
})
|
|
|
1317
|
})
|
|
|
1318
|
var popup = Ai.Popup({
|
|
|
1319
|
maxWidth: 60,
|
|
|
1320
|
minWidth: 50,
|
|
|
1321
|
offset: [-3, -45],
|
|
|
1322
|
autoClose: false,
|
|
|
1323
|
autoPan: false,
|
|
|
1324
|
closeButton: false
|
|
|
1325
|
})
|
|
|
1326
|
popup.setLatLng(point.getLatLng())
|
|
|
1327
|
// 设置弹出框弹出内容
|
|
|
1328
|
popup.setContent('<div style="text-align: center;color: white;">' + this.trackData[0].entityName + '</div>')
|
|
|
1329
|
this.trackMap.removeLayer(this.pointsGroup)
|
|
|
1330
|
this.pointsGroup = new Ai.LayerGroup() // 定义图层数组
|
|
|
1331
|
this.trackMap.addLayer(this.pointsGroup)
|
|
|
1332
|
this.pointsGroup.addLayer(point)
|
|
|
1333
|
this.pointsGroup.addLayer(popup)
|
|
|
1334
|
popup.openOn(this.trackMap) // 需要先显示
|
|
|
1335
|
var lastOne = this.trackData[0].traceList[this.trackData[0].traceList.length - 1]
|
|
|
1336
|
var newLineWktStr = 'LINESTRING ( '
|
|
|
1337
|
this.trackData[0].traceList.forEach(e => {
|
|
|
1338
|
(function(i, that) {
|
|
|
1339
|
var task = setTimeout(function() {
|
|
|
1340
|
that.pointsGroup.eachLayer(layer => {
|
|
|
1341
|
layer.setLatLng([e.latitude, e.longitude])
|
|
|
1342
|
})
|
|
|
1343
|
that.trackTime = e.createDate
|
|
|
1344
|
newLineWktStr += e.longitude + ' ' + e.latitude + ','
|
|
|
1345
|
that.getNewLine(newLineWktStr, 1, that.trackData[0].entityId)
|
|
|
1346
|
if (e === lastOne) {
|
|
|
1347
|
that.playbacking = false
|
|
|
1348
|
that.timelineList[that.timelineList.length - 1].color = 'success'
|
|
|
1349
|
that.timelineList[that.timelineList.length - 1].status = 'normal'
|
|
|
1350
|
} else {
|
|
|
1351
|
for (let j = 0; j < that.timelineList.length; j++) {
|
|
|
1352
|
if (e.toolIndex > j) {
|
|
|
1353
|
that.timelineList[j].color = 'success'
|
|
|
1354
|
} else {
|
|
|
1355
|
that.timelineList[j].color = 'info'
|
|
|
1356
|
}
|
|
|
1357
|
if (e.toolIndex == j) {
|
|
|
1358
|
that.timelineList[j].status = 'active'
|
|
|
1359
|
} else {
|
|
|
1360
|
that.timelineList[j].status = 'normal'
|
|
|
1361
|
}
|
|
|
1362
|
}
|
|
|
1363
|
}
|
|
|
1364
|
}, (i) * 1000)
|
|
|
1365
|
that.timeouts.push(task)
|
|
|
1366
|
})(e.playDurationTime, this)
|
|
|
1367
|
})
|
|
|
1368
|
},
|
|
|
1369
|
getNewLine(newLineWktStr, colorIndex, entityId) {
|
|
|
1370
|
var color
|
|
|
1371
|
if (colorIndex < 8) {
|
|
|
1372
|
color = this.lineColors[colorIndex]
|
|
|
1373
|
} else {
|
|
|
1374
|
color = this.getRandomColor()
|
|
|
1375
|
}
|
|
|
1376
|
this.layersGroup.eachLayer(layer => {
|
|
|
1377
|
if (layer.entityId == entityId) {
|
|
|
1378
|
this.map.removeLayer(layer)
|
|
|
1379
|
}
|
|
|
1380
|
})
|
|
|
1381
|
newLineWktStr = newLineWktStr.substring(0, newLineWktStr.length - 1)
|
|
|
1382
|
newLineWktStr += ' )'
|
|
|
1383
|
var lineLayer = new Ai.Polyline(newLineWktStr, {color: color, opacity: 1.0})
|
|
|
1384
|
lineLayer.entityId = entityId
|
|
|
1385
|
this.layersGroup.addLayer(lineLayer)
|
|
|
1386
|
},
|
|
|
1387
|
getRandomColor() { // 获取随机颜色
|
|
|
1388
|
return '#' + Math.floor(Math.random() * 0xffffff).toString(16)
|
|
1061
|
1389
|
}
|
|
1062
|
1390
|
}
|
|
1063
|
1391
|
}
|