This is the 10th day of my participation in the August More Text Challenge
Background:
Recently developed large screen projects need to do a track playback function.
So I would like to share the track component code THAT I have written, mainly the design ideas and how it is used in the project (mainly refer to the configuration items at design time).
All hMAP mentioned below can be understood as arcGIS front-end API or Leaflet. Hmap is the internal map rendering engine of the company. This article only shares the design ideas and related configuration items to provide reference for component design and future recall.
The project display effect is as follows:
Implementation approach
According to the function split divided into three steps how to achieve the effect shown in the picture.
1. Add track points
1, under normal circumstances, large screen projects in the design of the point will be cool and there will be some dynamic effect, so we put the page rendering to vUE components, in JS using vue.extend + vm.$mount combination dynamic rendering point. The code is as follows:
Vue track page code:
// Add trace points
addOrbitPoint(feature) {
// Trace point sequence array (a point may pass multiple times)
let numbers = feature._attributes.list.map(item= > {
return {
num: item.num
}
})
let orbitPoint = Vue.extend(OrbitPoint)
let infoContent = new orbitPoint({
propsData: {
numbers: numbers, // The sequence number
img: feature._attributes.orbitNormalImg ? feature._attributes.orbitNormalImg : ' '.// Dot icon
isAlarm: false // Point alarm state}})// The instance is converted to an Element object
let ele = infoContent.$mount().$el
let param = {
feature: feature,//hmap.Vector.Feature
ele: ele,/ / the dom object
name: 'orbitPoint'.// Layer name
times: true // Whether to display multiple times when used in the point generally can be multiple, used in the popbox generally only one
}
// Call the map public method to display complex points
MapUtil.addInfoTemplate(param)
},
Copy the codeMaputil.js component code
// Public method to add complex points and popboxes
addInfoTemplate(param) {
param = Object.assign(
{
feature: null.//hmap.Vector.Feature
ele: null./ / the dom object
name: null.// Layer name
times: false.// Whether more than one layer can exist simultaneously under this layer
offsetX: 0.offsetY: 0
},
param
)
let overlay = map.getLayersByName(param.name)[0] // Check if the layer already exists
if(! overlay) { overlay =new hmap.layer.OverlayLayer(param.name)
map.addLayer(overlay)
}
if(! param.feature._attributes.longitude) {return
}
// Construct coordinate points
const coord1 = new hmap.basetype.Coordinate(
Number(param.feature._attributes.longitude),
Number(param.feature._attributes.latitude),
0
)
// Build complex points or pop-ups
let simplePopup = new hmap.overlay.SimplePopup({
domId: param.name + param.feature._attributes.placeCode,
location: coord1,
element: param.ele,
offset: new hmap.basetype.Offset(param.offsetX, param.offsetY, 0)})// If only one exists
if(! param.times) { overlay.removeAllOverlays()// Clear all
}
overlay.addOverlay(simplePopup)
},
Copy the code2, the track line is a gradual line, there are many demos in HMAP, you can check by yourself.
Part of the track component code:
// There are problems getting buffers when the coordinates of hmap2.1.3 point are repeated
// var polygon = lineString.getBuffer(0.1)
// var extent = polygon.getExtent()
if(! noRepeatPointList) { noRepeatPointList = data }let noRepeatPoint = []
// Array of no repeating coordinate points
for (var j = 0; j < noRepeatPointList.length; j++) {
let noRepeatcoord = new hmap.basetype.Coordinate(
Number(noRepeatPointList[j].longitude),
Number(noRepeatPointList[j].latitude),
0
)
let noRepeatPt = new hmap.geom.Point(noRepeatcoord)
noRepeatPoint.push(noRepeatPt)
}
let noRepeatLine = new hmap.geom.Line(noRepeatPoint)
var polygon = noRepeatLine.getBuffer(0.01)
var extent = polygon.getExtent()
map.zoomToExt(extent)
Copy the codeHow to realize the play function to determine the coordinates of the player point
Player point coordinates calculation method:
1. Calculate the total length of the track line. Using point. DistanceTo (point) method to calculate the distance between two adjacent points and add.
2. Determine the playback time such as 1000 seconds
According to the total distance and time, the speed can be obtained, that is, the distance of each playback. When accelerating or decelerating playback, the speed value can be directly multiplied by the distance of each playback.
3. Determine the Angle of the player
According to the longitude and latitude difference of two coordinate points, the Angle value is calculated by right triangle function
4. Determine the coordinates
According to the second step to get the distance of each move and the Angle value obtained in the third step, the right triangle function is used to calculate the distance in the x direction and the distance in the y direction
How to use the track component
1. Introduce the component bayonettrace.js in the same way as hmap.
<script src="static/hmap.debug.js"></script>
<script src="static/BayonetTrace.js"></script>
Copy the code2, build track objects into hmap. Map, hmap. Layer. VectorLayer, function (when handling play after its display box)
var trace = new hmap.Biz.BayonetTrace(map, layer, callback)
// Set the default playback speed of track to 8 for large-screen display
trace.speed(8)
Copy the code3. Set the trace line style and path style. The style properties refer to the official HMAP document hmap.style.linesymbol
var _style = {
"Line" : {
width: 3.color: [0.new hmap.style.Color(255.216.0.0.6), 1.0.new hmap.style.Color(253.126.49.0.6)]},"CompleteLine" : {
width: 3.color: [0.new hmap.style.Color(255.216.0.1), 1.0.new hmap.style.Color(253.126.49.1)]
}
}
trace._style=_style
Copy the code4. Set the starting and ending styles. The style attributes refer to the official HMAP document, hmap.style.circle
var startStyle={
radius: 1.fillColor: new hmap.style.Color(255.216.0.0.6),
}
trace.setStartStyle(startStyle) // Set the initial style of the moving object
trace.setendStyle(endStyle) // Set the style of the moving object after playback
Copy the code5. Set the starting and ending styles. The style attributes refer to the official HMAP document, hmap.style.icon
var moveStyle={
opacity: 1.imgSrc: '/ctm01multdeploy/static/trace/images/orbitCircle.png'.size: new hmap.basetype.Size(24.24),
anchor: [0.5.0.5].offset: new hmap.basetype.Offset(0.0.0)
}
trace.setmoveStyle(moveStyle) // Set the style first before setting the path
Copy the code6. Add track to pass in point arrays and non-repeating coordinate point groups (reasons explained in step 1 and Step 2)
var data = [{
"id": "K1"."latitude": "30.222066"."longitude": "120.20474"
}, {
"id": "K2"."latitude": "30.258439"."longitude": "120.206797"
}];
// Process data to get repeatable coordinate points
let noRepeatPointList = this.handleRepeatPoint(data)
trace.setPath(data, noRepeatPointList) // Set the path
trace.stopTime(1) // Display the popbox setting residence time in seconds when passing point
trace.setPathShow(true) // Sets whether to display paths already traveled
Copy the code7, set the track function, start playing, pause, accelerate, decelerate and so on
/** * start */
trace.start();
/** * Track movement pause */
trace.pause();
/** * track move continues */
trace.resume();
/** * track movement stops */
trace.stop();
/** * speed up or slow down */
trace.speed(s);
/** * track moved to restart */
trace.restart();
/** ** replay */
trace.restart(startIndex,endIndex);
Copy the codeComponents use demo examples
Previously, I shared the idea of track development in the project. Sharing a simple and pure track function demo can more intuitively understand what functions should be provided in the design of track playback.
The running results are as follows:
conclusion
I will mainly share the development ideas of the track component and clarify the functions of the map engine in the track (dot and line drawing). Therefore, no matter what map engine is changed, such as ArcGIS or Leaflet, we only need to modify the way of dot and line drawing in the component. The design ideas and principles can be copied.