基于leaflet.js实现的轨迹回放

左手的ㄟ右手 2023-07-24 02:13 123阅读 0赞

先看下效果图： (注意，这里是GIF图片，看起来会有些卡顿，但真实情况是很流畅的)
在这里插入图片描述
js文件们：（自己创建一个js文件，复制进去）
markerTrack.js：

  1. L.Marker.addInitHook(function () { 
  2.     this.moveOptions = { 
  3.         origin: null,
  4.         timer: null,
  5.         done: 0,
  6.         path: null,
  7.         length: 0
  8.     };
  9.     this.setSpeed = function (speed) { 
  10.         this.moveOptions.speed = isNaN(parseFloat(speed)) || parseFloat(speed) <= 0 ? 200 : parseFloat(speed);
  11.     };
  12.     this.getSpeed = function () { 
  13.         return this.moveOptions.speed;
  14.     };
  15.     this.moveAlong = function (path, speed) { 
  16.         path = path instanceof L.Polyline ? path : new L.Polyline(path);
  17.         this.moveOptions.path = path;
  18.         this.moveOptions.length = L.GeometryUtil.length(path);
  19.         this.moveOptions.speed = isNaN(parseFloat(speed)) || parseFloat(speed <= 0) ? 200 : parseFloat(speed);
  20.         this._move();
  21.     };
  22.     this.pauseMove = function () { 
  23.         clearInterval(this.moveOptions.timer);
  24.         this.moveOptions.timer = null;
  25.     };
  26.     this.resumeMove = function () { 
  27.         this._move();
  28.     };
  29.     this.stopMove = function () { 
  30.         this.pauseMove();
  31.         this.moveOptions.done = 0;
  32.     };
  33.     this._move = function () { 
  34.         if (this.moveOptions.timer) return;
  35.         let _t = this;
  36.         this.moveOptions.timer = setInterval(function () { 
  37.             let done = _t.moveOptions.done;
  38.             done += _t.moveOptions.speed / 1000 * 20;
  39.             let radio = done / _t.moveOptions.length;
  40.             radio >= 1 ? (radio = 0, done = 0) : true;
  41.             _t.moveOptions.done = done;
  42.             let p = L.GeometryUtil.interpolateOnLine(_t._map, _t.moveOptions.path, radio);
  43.             _t.setLatLng(p.latLng);
  44.             let pre_p = _t.moveOptions.path.getLatLngs()[p.predecessor];
  45.             if (pre_p) { 
  46.                 let passed = _t.moveOptions.path.getLatLngs().slice(0, p.predecessor + 1);
  47.                 passed.push(p.latLng);
  48.                 _t.fire('update_position', { path: passed});
  49.                 let deg = L.GeometryUtil.computeAngle(_t._map.project(pre_p), _t._map.project(p.latLng))
  50.                 _t._icon.style.transformOrigin = '50% 50%';
  51.                 _t._icon.style.transform += ' rotateZ(' + deg + 'deg)';
  52.             }
  53.         }, 20);
  54.     }
  55. });

em.geometryutil.js：

  1. // Packaging/modules magic dance.
  2. (function (factory) { 
  3.     factory(window.L)
  4. }(function (L) { 
  5. "use strict";
  7. L.Polyline._flat = L.LineUtil.isFlat || L.Polyline._flat || function (latlngs) { 
  8.     // true if it's a flat array of latlngs; false if nested
  9.     return !L.Util.isArray(latlngs[0]) || (typeof latlngs[0][0] !== 'object' && typeof latlngs[0][0] !== 'undefined');
  10. };
  12. /** * @fileOverview Geometry utilities for distances and linear referencing. * @name L.GeometryUtil */
  14. L.GeometryUtil = L.extend(L.GeometryUtil || { }, { 
  16.     /** Shortcut function for planar distance between two {L.LatLng} at current zoom. @tutorial distance-length @param {L.Map} map map to be used for this method @param {L.LatLng} latlngA geographical point A @param {L.LatLng} latlngB geographical point B @returns {Number} planar distance */
  17.     distance: function (map, latlngA, latlngB) { 
  18.         return map.latLngToLayerPoint(latlngA).distanceTo(map.latLngToLayerPoint(latlngB));
  19.     },
  21.     /** Shortcut function for planar distance between a {L.LatLng} and a segment (A-B). @param {L.Map} map map to be used for this method @param {L.LatLng} latlng - The position to search @param {L.LatLng} latlngA geographical point A of the segment @param {L.LatLng} latlngB geographical point B of the segment @returns {Number} planar distance */
  22.     distanceSegment: function (map, latlng, latlngA, latlngB) { 
  23.         var p = map.latLngToLayerPoint(latlng),
  24.            p1 = map.latLngToLayerPoint(latlngA),
  25.            p2 = map.latLngToLayerPoint(latlngB);
  26.         return L.LineUtil.pointToSegmentDistance(p, p1, p2);
  27.     },
  29.     /** Shortcut function for converting distance to readable distance. @param {Number} distance distance to be converted @param {String} unit 'metric' or 'imperial' @returns {String} in yard or miles */
  30.     readableDistance: function (distance, unit) { 
  31.         var isMetric = (unit !== 'imperial'),
  32.             distanceStr;
  33.         if (isMetric) { 
  34.             // show metres when distance is < 1km, then show km
  35.             if (distance > 1000) { 
  36.                 distanceStr = (distance  / 1000).toFixed(2) + ' km';
  37.             }
  38.             else { 
  39.                 distanceStr = Math.ceil(distance) + ' m';
  40.             }
  41.         }
  42.         else { 
  43.             distance *= 1.09361;
  44.             if (distance > 1760) { 
  45.                 distanceStr = (distance / 1760).toFixed(2) + ' miles';
  46.             }
  47.             else { 
  48.                 distanceStr = Math.ceil(distance) + ' yd';
  49.             }
  50.         }
  51.         return distanceStr;
  52.     },
  54.     /** Returns true if the latlng belongs to segment A-B @param {L.LatLng} latlng - The position to search @param {L.LatLng} latlngA geographical point A of the segment @param {L.LatLng} latlngB geographical point B of the segment @param {?Number} [tolerance=0.2] tolerance to accept if latlng belongs really @returns {boolean} */
  55.     belongsSegment: function(latlng, latlngA, latlngB, tolerance) { 
  56.         tolerance = tolerance === undefined ? 0.2 : tolerance;
  57.         var hypotenuse = latlngA.distanceTo(latlngB),
  58.             delta = latlngA.distanceTo(latlng) + latlng.distanceTo(latlngB) - hypotenuse;
  59.         return delta/hypotenuse < tolerance;
  60.     },
  62.     /** * Returns total length of line * @tutorial distance-length * * @param {L.Polyline|Array<L.Point>|Array<L.LatLng>} coords Set of coordinates * @returns {Number} Total length (pixels for Point, meters for LatLng) */
  63.     length: function (coords) { 
  64.         var accumulated = L.GeometryUtil.accumulatedLengths(coords);
  65.         return accumulated.length > 0 ? accumulated[accumulated.length-1] : 0;
  66.     },
  68.     /** * Returns a list of accumulated length along a line. * @param {L.Polyline|Array<L.Point>|Array<L.LatLng>} coords Set of coordinates * @returns {Array<Number>} Array of accumulated lengths (pixels for Point, meters for LatLng) */
  69.     accumulatedLengths: function (coords) { 
  70.         if (typeof coords.getLatLngs == 'function') { 
  71.             coords = coords.getLatLngs();
  72.         }
  73.         if (coords.length === 0)
  74.             return [];
  75.         var total = 0,
  76.             lengths = [0];
  77.         for (var i = 0, n = coords.length - 1; i< n; i++) { 
  78.             total += coords[i].distanceTo(coords[i+1]);
  79.             lengths.push(total);
  80.         }
  81.         return lengths;
  82.     },
  84.     /** Returns the closest point of a {L.LatLng} on the segment (A-B) @tutorial closest @param {L.Map} map map to be used for this method @param {L.LatLng} latlng - The position to search @param {L.LatLng} latlngA geographical point A of the segment @param {L.LatLng} latlngB geographical point B of the segment @returns {L.LatLng} Closest geographical point */
  85.     closestOnSegment: function (map, latlng, latlngA, latlngB) { 
  86.         var maxzoom = map.getMaxZoom();
  87.         if (maxzoom === Infinity)
  88.             maxzoom = map.getZoom();
  89.         var p = map.project(latlng, maxzoom),
  90.            p1 = map.project(latlngA, maxzoom),
  91.            p2 = map.project(latlngB, maxzoom),
  92.            closest = L.LineUtil.closestPointOnSegment(p, p1, p2);
  93.         return map.unproject(closest, maxzoom);
  94.     },
  96.     /** Returns the closest latlng on layer. Accept nested arrays @tutorial closest @param {L.Map} map map to be used for this method @param {Array<L.LatLng>|Array<Array<L.LatLng>>|L.PolyLine|L.Polygon} layer - Layer that contains the result @param {L.LatLng} latlng - The position to search @param {?boolean} [vertices=false] - Whether to restrict to path vertices. @returns {L.LatLng} Closest geographical point or null if layer param is incorrect */
  97.     closest: function (map, layer, latlng, vertices) { 
  99.         var latlngs,
  100.             mindist = Infinity,
  101.             result = null,
  102.             i, n, distance, subResult;
  104.         if (layer instanceof Array) { 
  105.             // if layer is Array<Array<T>>
  106.             if (layer[0] instanceof Array && typeof layer[0][0] !== 'number') { 
  107.                 // if we have nested arrays, we calc the closest for each array
  108.                 // recursive
  109.                 for (i = 0; i < layer.length; i++) { 
  110.                     subResult = L.GeometryUtil.closest(map, layer[i], latlng, vertices);
  111.                     if (subResult.distance < mindist) { 
  112.                         mindist = subResult.distance;
  113.                         result = subResult;
  114.                     }
  115.                 }
  116.                 return result;
  117.             } else if (layer[0] instanceof L.LatLng
  118.                         || typeof layer[0][0] === 'number'
  119.                         || typeof layer[0].lat === 'number') {  // we could have a latlng as [x,y] with x & y numbers or {lat, lng}
  120.                 layer = L.polyline(layer);
  121.             } else { 
  122.                 return result;
  123.             }
  124.         }
  126.         // if we don't have here a Polyline, that means layer is incorrect
  127.         // see https://github.com/makinacorpus/.GeometryUtil/issues/23
  128.         if (! ( layer instanceof L.Polyline ) )
  129.             return result;
  131.         // deep copy of latlngs
  132.         latlngs = JSON.parse(JSON.stringify(layer.getLatLngs().slice(0)));
  134.         // add the last segment for L.Polygon
  135.         if (layer instanceof L.Polygon) { 
  136.             // add the last segment for each child that is a nested array
  137.             var addLastSegment = function(latlngs) { 
  138.                 if (L.Polyline._flat(latlngs)) { 
  139.                     latlngs.push(latlngs[0]);
  140.                 } else { 
  141.                     for (var i = 0; i < latlngs.length; i++) { 
  142.                         addLastSegment(latlngs[i]);
  143.                     }
  144.                 }
  145.             };
  146.             addLastSegment(latlngs);
  147.         }
  149.         // we have a multi polygon / multi polyline / polygon with holes
  150.         // use recursive to explore and return the good result
  151.         if ( ! L.Polyline._flat(latlngs) ) { 
  152.             for (i = 0; i < latlngs.length; i++) { 
  153.                 // if we are at the lower level, and if we have a L.Polygon, we add the last segment
  154.                 subResult = L.GeometryUtil.closest(map, latlngs[i], latlng, vertices);
  155.                 if (subResult.distance < mindist) { 
  156.                     mindist = subResult.distance;
  157.                     result = subResult;
  158.                 }
  159.             }
  160.             return result;
  162.         } else { 
  164.             // Lookup vertices
  165.             if (vertices) { 
  166.                 for(i = 0, n = latlngs.length; i < n; i++) { 
  167.                     var ll = latlngs[i];
  168.                     distance = L.GeometryUtil.distance(map, latlng, ll);
  169.                     if (distance < mindist) { 
  170.                         mindist = distance;
  171.                         result = ll;
  172.                         result.distance = distance;
  173.                     }
  174.                 }
  175.                 return result;
  176.             }
  178.             // Keep the closest point of all segments
  179.             for (i = 0, n = latlngs.length; i < n-1; i++) { 
  180.                 var latlngA = latlngs[i],
  181.                     latlngB = latlngs[i+1];
  182.                 distance = L.GeometryUtil.distanceSegment(map, latlng, latlngA, latlngB);
  183.                 if (distance <= mindist) { 
  184.                     mindist = distance;
  185.                     result = L.GeometryUtil.closestOnSegment(map, latlng, latlngA, latlngB);
  186.                     result.distance = distance;
  187.                 }
  188.             }
  189.             return result;
  190.         }
  192.     },
  194.     /** Returns the closest layer to latlng among a list of layers. @tutorial closest @param {L.Map} map map to be used for this method @param {Array<L.ILayer>} layers Set of layers @param {L.LatLng} latlng - The position to search @returns {object} ``{layer, latlng, distance}`` or ``null`` if list is empty; */
  195.     closestLayer: function (map, layers, latlng) { 
  196.         var mindist = Infinity,
  197.             result = null,
  198.             ll = null,
  199.             distance = Infinity;
  201.         for (var i = 0, n = layers.length; i < n; i++) { 
  202.             var layer = layers[i];
  203.             if (layer instanceof L.LayerGroup) { 
  204.                 // recursive
  205.                 var subResult = L.GeometryUtil.closestLayer(map, layer.getLayers(), latlng);
  206.                 if (subResult.distance < mindist) { 
  207.                     mindist = subResult.distance;
  208.                     result = subResult;
  209.                 }
  210.             } else { 
  211.                 // Single dimension, snap on points, else snap on closest
  212.                 if (typeof layer.getLatLng == 'function') { 
  213.                     ll = layer.getLatLng();
  214.                     distance = L.GeometryUtil.distance(map, latlng, ll);
  215.                 }
  216.                 else { 
  217.                     ll = L.GeometryUtil.closest(map, layer, latlng);
  218.                     if (ll) distance = ll.distance;  // Can return null if layer has no points.
  219.                 }
  220.                 if (distance < mindist) { 
  221.                     mindist = distance;
  222.                     result = { layer: layer, latlng: ll, distance: distance};
  223.                 }
  224.             }
  225.         }
  226.         return result;
  227.     },
  229.     /** Returns the n closest layers to latlng among a list of input layers. @param {L.Map} map - map to be used for this method @param {Array<L.ILayer>} layers - Set of layers @param {L.LatLng} latlng - The position to search @param {?Number} [n=layers.length] - the expected number of output layers. @returns {Array<object>} an array of objects ``{layer, latlng, distance}`` or ``null`` if the input is invalid (empty list or negative n) */
  230.     nClosestLayers: function (map, layers, latlng, n) { 
  231.         n = typeof n === 'number' ? n : layers.length;
  233.         if (n < 1 || layers.length < 1) { 
  234.             return null;
  235.         }
  237.         var results = [];
  238.         var distance, ll;
  240.         for (var i = 0, m = layers.length; i < m; i++) { 
  241.             var layer = layers[i];
  242.             if (layer instanceof L.LayerGroup) { 
  243.                 // recursive
  244.                 var subResult = L.GeometryUtil.closestLayer(map, layer.getLayers(), latlng);
  245.                 results.push(subResult);
  246.             } else { 
  247.                 // Single dimension, snap on points, else snap on closest
  248.                 if (typeof layer.getLatLng == 'function') { 
  249.                     ll = layer.getLatLng();
  250.                     distance = L.GeometryUtil.distance(map, latlng, ll);
  251.                 }
  252.                 else { 
  253.                     ll = L.GeometryUtil.closest(map, layer, latlng);
  254.                     if (ll) distance = ll.distance;  // Can return null if layer has no points.
  255.                 }
  256.                 results.push({ layer: layer, latlng: ll, distance: distance});
  257.             }
  258.         }
  260.         results.sort(function(a, b) { 
  261.             return a.distance - b.distance;
  262.         });
  264.         if (results.length > n) { 
  265.             return results.slice(0, n);
  266.         } else  { 
  267.             return results;
  268.         }
  269.     },
  271.     /** * Returns all layers within a radius of the given position, in an ascending order of distance. @param {L.Map} map map to be used for this method @param {Array<ILayer>} layers - A list of layers. @param {L.LatLng} latlng - The position to search @param {?Number} [radius=Infinity] - Search radius in pixels @return {object[]} an array of objects including layer within the radius, closest latlng, and distance */
  272.     layersWithin: function(map, layers, latlng, radius) { 
  273.       radius = typeof radius == 'number' ? radius : Infinity;
  275.       var results = [];
  276.       var ll = null;
  277.       var distance = 0;
  279.       for (var i = 0, n = layers.length; i < n; i++) { 
  280.         var layer = layers[i];
  282.         if (typeof layer.getLatLng == 'function') { 
  283.             ll = layer.getLatLng();
  284.             distance = L.GeometryUtil.distance(map, latlng, ll);
  285.         }
  286.         else { 
  287.             ll = L.GeometryUtil.closest(map, layer, latlng);
  288.             if (ll) distance = ll.distance;  // Can return null if layer has no points.
  289.         }
  291.         if (ll && distance < radius) { 
  292.             results.push({ layer: layer, latlng: ll, distance: distance});
  293.         }
  294.       }
  296.       var sortedResults = results.sort(function(a, b) { 
  297.           return a.distance - b.distance;
  298.       });
  300.       return sortedResults;
  301.     },
  303.     /** Returns the closest position from specified {LatLng} among specified layers, with a maximum tolerance in pixels, providing snapping behaviour. @tutorial closest @param {L.Map} map map to be used for this method @param {Array<ILayer>} layers - A list of layers to snap on. @param {L.LatLng} latlng - The position to snap @param {?Number} [tolerance=Infinity] - Maximum number of pixels. @param {?boolean} [withVertices=true] - Snap to layers vertices or segment points (not only vertex) @returns {object} with snapped {LatLng} and snapped {Layer} or null if tolerance exceeded. */
  304.     closestLayerSnap: function (map, layers, latlng, tolerance, withVertices) { 
  305.         tolerance = typeof tolerance == 'number' ? tolerance : Infinity;
  306.         withVertices = typeof withVertices == 'boolean' ? withVertices : true;
  308.         var result = L.GeometryUtil.closestLayer(map, layers, latlng);
  309.         if (!result || result.distance > tolerance)
  310.             return null;
  312.         // If snapped layer is linear, try to snap on vertices (extremities and middle points)
  313.         if (withVertices && typeof result.layer.getLatLngs == 'function') { 
  314.             var closest = L.GeometryUtil.closest(map, result.layer, result.latlng, true);
  315.             if (closest.distance < tolerance) { 
  316.                 result.latlng = closest;
  317.                 result.distance = L.GeometryUtil.distance(map, closest, latlng);
  318.             }
  319.         }
  320.         return result;
  321.     },
  323.     /** Returns the Point located on a segment at the specified ratio of the segment length. @param {L.Point} pA coordinates of point A @param {L.Point} pB coordinates of point B @param {Number} the length ratio, expressed as a decimal between 0 and 1, inclusive. @returns {L.Point} the interpolated point. */
  324.     interpolateOnPointSegment: function (pA, pB, ratio) { 
  325.         return L.point(
  326.             (pA.x * (1 - ratio)) + (ratio * pB.x),
  327.             (pA.y * (1 - ratio)) + (ratio * pB.y)
  328.         );
  329.     },
  331.     /** Returns the coordinate of the point located on a line at the specified ratio of the line length. @param {L.Map} map map to be used for this method @param {Array<L.LatLng>|L.PolyLine} latlngs Set of geographical points @param {Number} ratio the length ratio, expressed as a decimal between 0 and 1, inclusive @returns {Object} an object with latLng ({LatLng}) and predecessor ({Number}), the index of the preceding vertex in the Polyline (-1 if the interpolated point is the first vertex) */
  332.     interpolateOnLine: function (map, latLngs, ratio) { 
  333.         latLngs = (latLngs instanceof L.Polyline) ? latLngs.getLatLngs() : latLngs;
  334.         var n = latLngs.length;
  335.         if (n < 2) { 
  336.             return null;
  337.         }
  339.         // ensure the ratio is between 0 and 1;
  340.         ratio = Math.max(Math.min(ratio, 1), 0);
  342.         if (ratio === 0) { 
  343.             return { 
  344.                 latLng: latLngs[0] instanceof L.LatLng ? latLngs[0] : L.latLng(latLngs[0]),
  345.                 predecessor: -1
  346.             };
  347.         }
  348.         if (ratio == 1) { 
  349.             return { 
  350.                 latLng: latLngs[latLngs.length -1] instanceof L.LatLng ? latLngs[latLngs.length -1] : L.latLng(latLngs[latLngs.length -1]),
  351.                 predecessor: latLngs.length - 2
  352.             };
  353.         }
  355.         // project the LatLngs as Points,
  356.         // and compute total planar length of the line at max precision
  357.         var maxzoom = map.getMaxZoom();
  358.         if (maxzoom === Infinity)
  359.             maxzoom = map.getZoom();
  360.         var pts = [];
  361.         var lineLength = 0;
  362.         for(var i = 0; i < n; i++) { 
  363.             pts[i] = map.project(latLngs[i], maxzoom);
  364.             if(i > 0)
  365.               lineLength += pts[i-1].distanceTo(pts[i]);
  366.         }
  368.         var ratioDist = lineLength * ratio;
  370.         // follow the line segments [ab], adding lengths,
  371.         // until we find the segment where the points should lie on
  372.         var cumulativeDistanceToA = 0, cumulativeDistanceToB = 0;
  373.         for (var i = 0; cumulativeDistanceToB < ratioDist; i++) { 
  374.             var pointA = pts[i], pointB = pts[i+1];
  376.             cumulativeDistanceToA = cumulativeDistanceToB;
  377.             cumulativeDistanceToB += pointA.distanceTo(pointB);
  378.         }
  380.         if (pointA == undefined && pointB == undefined) {  // Happens when line has no length
  381.             var pointA = pts[0], pointB = pts[1], i = 1;
  382.         }
  384.         // compute the ratio relative to the segment [ab]
  385.         var segmentRatio = ((cumulativeDistanceToB - cumulativeDistanceToA) !== 0) ? ((ratioDist - cumulativeDistanceToA) / (cumulativeDistanceToB - cumulativeDistanceToA)) : 0;
  386.         var interpolatedPoint = L.GeometryUtil.interpolateOnPointSegment(pointA, pointB, segmentRatio);
  387.         return { 
  388.             latLng: map.unproject(interpolatedPoint, maxzoom),
  389.             predecessor: i-1
  390.         };
  391.     },
  393.     /** Returns a float between 0 and 1 representing the location of the closest point on polyline to the given latlng, as a fraction of total line length. (opposite of L.GeometryUtil.interpolateOnLine()) @param {L.Map} map map to be used for this method @param {L.PolyLine} polyline Polyline on which the latlng will be search @param {L.LatLng} latlng The position to search @returns {Number} Float between 0 and 1 */
  394.     locateOnLine: function (map, polyline, latlng) { 
  395.         var latlngs = polyline.getLatLngs();
  396.         if (latlng.equals(latlngs[0]))
  397.             return 0.0;
  398.         if (latlng.equals(latlngs[latlngs.length-1]))
  399.             return 1.0;
  401.         var point = L.GeometryUtil.closest(map, polyline, latlng, false),
  402.             lengths = L.GeometryUtil.accumulatedLengths(latlngs),
  403.             total_length = lengths[lengths.length-1],
  404.             portion = 0,
  405.             found = false;
  406.         for (var i=0, n = latlngs.length-1; i < n; i++) { 
  407.             var l1 = latlngs[i],
  408.                 l2 = latlngs[i+1];
  409.             portion = lengths[i];
  410.             if (L.GeometryUtil.belongsSegment(point, l1, l2, 0.0001)) { 
  411.                 portion += l1.distanceTo(point);
  412.                 found = true;
  413.                 break;
  414.             }
  415.         }
  416.         if (!found) { 
  417.             throw "Could not interpolate " + latlng.toString() + " within " + polyline.toString();
  418.         }
  419.         return portion / total_length;
  420.     },
  422.     /** Returns a clone with reversed coordinates. @param {L.PolyLine} polyline polyline to reverse @returns {L.PolyLine} polyline reversed */
  423.     reverse: function (polyline) { 
  424.         return L.polyline(polyline.getLatLngs().slice(0).reverse());
  425.     },
  427.     /** Returns a sub-part of the polyline, from start to end. If start is superior to end, returns extraction from inverted line. @param {L.Map} map map to be used for this method @param {L.PolyLine} polyline Polyline on which will be extracted the sub-part @param {Number} start ratio, expressed as a decimal between 0 and 1, inclusive @param {Number} end ratio, expressed as a decimal between 0 and 1, inclusive @returns {Array<L.LatLng>} new polyline */
  428.     extract: function (map, polyline, start, end) { 
  429.         if (start > end) { 
  430.             return L.GeometryUtil.extract(map, L.GeometryUtil.reverse(polyline), 1.0-start, 1.0-end);
  431.         }
  433.         // Bound start and end to [0-1]
  434.         start = Math.max(Math.min(start, 1), 0);
  435.         end = Math.max(Math.min(end, 1), 0);
  437.         var latlngs = polyline.getLatLngs(),
  438.             startpoint = L.GeometryUtil.interpolateOnLine(map, polyline, start),
  439.             endpoint = L.GeometryUtil.interpolateOnLine(map, polyline, end);
  440.         // Return single point if start == end
  441.         if (start == end) { 
  442.             var point = L.GeometryUtil.interpolateOnLine(map, polyline, end);
  443.             return [point.latLng];
  444.         }
  445.         // Array.slice() works indexes at 0
  446.         if (startpoint.predecessor == -1)
  447.             startpoint.predecessor = 0;
  448.         if (endpoint.predecessor == -1)
  449.             endpoint.predecessor = 0;
  450.         var result = latlngs.slice(startpoint.predecessor+1, endpoint.predecessor+1);
  451.         result.unshift(startpoint.latLng);
  452.         result.push(endpoint.latLng);
  453.         return result;
  454.     },
  456.     /** Returns true if first polyline ends where other second starts. @param {L.PolyLine} polyline First polyline @param {L.PolyLine} other Second polyline @returns {bool} */
  457.     isBefore: function (polyline, other) { 
  458.         if (!other) return false;
  459.         var lla = polyline.getLatLngs(),
  460.             llb = other.getLatLngs();
  461.         return (lla[lla.length-1]).equals(llb[0]);
  462.     },
  464.     /** Returns true if first polyline starts where second ends. @param {L.PolyLine} polyline First polyline @param {L.PolyLine} other Second polyline @returns {bool} */
  465.     isAfter: function (polyline, other) { 
  466.         if (!other) return false;
  467.         var lla = polyline.getLatLngs(),
  468.             llb = other.getLatLngs();
  469.         return (lla[0]).equals(llb[llb.length-1]);
  470.     },
  472.     /** Returns true if first polyline starts where second ends or start. @param {L.PolyLine} polyline First polyline @param {L.PolyLine} other Second polyline @returns {bool} */
  473.     startsAtExtremity: function (polyline, other) { 
  474.         if (!other) return false;
  475.         var lla = polyline.getLatLngs(),
  476.             llb = other.getLatLngs(),
  477.             start = lla[0];
  478.         return start.equals(llb[0]) || start.equals(llb[llb.length-1]);
  479.     },
  481.     /** Returns horizontal angle in degres between two points. @param {L.Point} a Coordinates of point A @param {L.Point} b Coordinates of point B @returns {Number} horizontal angle */
  482.     computeAngle: function(a, b) { 
  483.         return (Math.atan2(b.y - a.y, b.x - a.x) * 180 / Math.PI);
  484.     },
  486.     /** Returns slope (Ax+B) between two points. @param {L.Point} a Coordinates of point A @param {L.Point} b Coordinates of point B @returns {Object} with ``a`` and ``b`` properties. */
  487.     computeSlope: function(a, b) { 
  488.         var s = (b.y - a.y) / (b.x - a.x),
  489.             o = a.y - (s * a.x);
  490.         return { 'a': s, 'b': o};
  491.     },
  493.     /** Returns LatLng of rotated point around specified LatLng center. @param {L.LatLng} latlngPoint: point to rotate @param {double} angleDeg: angle to rotate in degrees @param {L.LatLng} latlngCenter: center of rotation @returns {L.LatLng} rotated point */
  494.     rotatePoint: function(map, latlngPoint, angleDeg, latlngCenter) { 
  495.         var maxzoom = map.getMaxZoom();
  496.         if (maxzoom === Infinity)
  497.             maxzoom = map.getZoom();
  498.         var angleRad = angleDeg*Math.PI/180,
  499.             pPoint = map.project(latlngPoint, maxzoom),
  500.             pCenter = map.project(latlngCenter, maxzoom),
  501.             x2 = Math.cos(angleRad)*(pPoint.x-pCenter.x) - Math.sin(angleRad)*(pPoint.y-pCenter.y) + pCenter.x,
  502.             y2 = Math.sin(angleRad)*(pPoint.x-pCenter.x) + Math.cos(angleRad)*(pPoint.y-pCenter.y) + pCenter.y;
  503.         return map.unproject(new L.Point(x2,y2), maxzoom);
  504.     },
  506.     /** Returns the bearing in degrees clockwise from north (0 degrees) from the first L.LatLng to the second, at the first LatLng @param {L.LatLng} latlng1: origin point of the bearing @param {L.LatLng} latlng2: destination point of the bearing @returns {float} degrees clockwise from north. */
  507.     bearing: function(latlng1, latlng2) { 
  508.         var rad = Math.PI / 180,
  509.             lat1 = latlng1.lat * rad,
  510.             lat2 = latlng2.lat * rad,
  511.             lon1 = latlng1.lng * rad,
  512.             lon2 = latlng2.lng * rad,
  513.             y = Math.sin(lon2 - lon1) * Math.cos(lat2),
  514.             x = Math.cos(lat1) * Math.sin(lat2) -
  515.                 Math.sin(lat1) * Math.cos(lat2) * Math.cos(lon2 - lon1);
  517.         var bearing = ((Math.atan2(y, x) * 180 / Math.PI) + 360) % 360;
  518.         return bearing >= 180 ? bearing-360 : bearing;
  519.     },
  521.     /** Returns the point that is a distance and heading away from the given origin point. @param {L.LatLng} latlng: origin point @param {float} heading: heading in degrees, clockwise from 0 degrees north. @param {float} distance: distance in meters @returns {L.latLng} the destination point. Many thanks to Chris Veness at http://www.movable-type.co.uk/scripts/latlong.html for a great reference and examples. */
  522.     destination: function(latlng, heading, distance) { 
  523.         heading = (heading + 360) % 360;
  524.         var rad = Math.PI / 180,
  525.             radInv = 180 / Math.PI,
  526.             R = 6378137, // approximation of Earth's radius
  527.             lon1 = latlng.lng * rad,
  528.             lat1 = latlng.lat * rad,
  529.             rheading = heading * rad,
  530.             sinLat1 = Math.sin(lat1),
  531.             cosLat1 = Math.cos(lat1),
  532.             cosDistR = Math.cos(distance / R),
  533.             sinDistR = Math.sin(distance / R),
  534.             lat2 = Math.asin(sinLat1 * cosDistR + cosLat1 *
  535.                 sinDistR * Math.cos(rheading)),
  536.             lon2 = lon1 + Math.atan2(Math.sin(rheading) * sinDistR *
  537.                 cosLat1, cosDistR - sinLat1 * Math.sin(lat2));
  538.         lon2 = lon2 * radInv;
  539.         lon2 = lon2 > 180 ? lon2 - 360 : lon2 < -180 ? lon2 + 360 : lon2;
  540.         return L.latLng([lat2 * radInv, lon2]);
  541.     },
  543.     /** Returns the the angle of the given segment and the Equator in degrees, clockwise from 0 degrees north. @param {L.Map} map: map to be used for this method @param {L.LatLng} latlngA: geographical point A of the segment @param {L.LatLng} latlngB: geographical point B of the segment @returns {Float} the angle in degrees. */
  544.     angle: function(map, latlngA, latlngB) { 
  545.       var pointA = map.latLngToContainerPoint(latlngA),
  546.           pointB = map.latLngToContainerPoint(latlngB),
  547.           angleDeg = Math.atan2(pointB.y - pointA.y, pointB.x - pointA.x) * 180 / Math.PI + 90;
  548.       angleDeg += angleDeg < 0 ? 360 : 0;
  549.       return angleDeg;
  550.     },
  552.     /** Returns a point snaps on the segment and heading away from the given origin point a distance. @param {L.Map} map: map to be used for this method @param {L.LatLng} latlngA: geographical point A of the segment @param {L.LatLng} latlngB: geographical point B of the segment @param {float} distance: distance in meters @returns {L.latLng} the destination point. */
  553.     destinationOnSegment: function(map, latlngA, latlngB, distance) { 
  554.       var angleDeg = L.GeometryUtil.angle(map, latlngA, latlngB),
  555.           latlng = L.GeometryUtil.destination(latlngA, angleDeg, distance);
  556.       return L.GeometryUtil.closestOnSegment(map, latlng, latlngA, latlngB);
  557.     },
  558. });
  560. return L.GeometryUtil;
  562. }));

一个简单的demo，需要适当修改：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>路径轨迹回放</title>
  6.         <meta charset="utf-8" />
  7.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.         <!-- leaflet。js的基础依赖 -->
  9.         <link rel="stylesheet" type="text/css" href="../leaflet/dist/leaflet.css">
  10.         <script type="text/javascript" src="../leaflet/dist/leaflet.js"></script>
  11.         <!-- 轨迹回放的自定义插件（依赖于leaflet。js） -->
  12.         <script type="text/javascript" src="../customLib/markerTrack.js"></script>
  13.         <script type="text/javascript" src="../customLib/em.geometryutil.js"></script>
  14.     </head>
  16.     <style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } </style>
  18.     <body>
  20.         <div id='map'></div>
  23.         <script type="text/javascript"> /* 这块代码是引入地图的,根据自己的项目来就好(我的项目里面是离线地图) */ // --start引入地图-- var url = 'http://localhost:9090/img/{z}/{x}/{y}.png'; // var url = '"http://webrd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'; var map = L.map('map',{ center: [34.694,113.587], zoom: 6, zoomControl: false }); //将图层加载到地图上，并设置最大的聚焦还有map样式 L.tileLayer(url, { maxZoom: 18, minZoom: 3 }).addTo(map); // --end引入地图-- /** * 开始轨迹回放的代码 */ // 运动的轨迹 var polyline = L.polyline([[34.694,113.587],[38.694,113.587],[37.694,115.587]],{ color: 'red'}).addTo(map); // 轨迹运动的图标 var m = L.marker([34.694,113.587],{ icon:L.icon({ iconUrl:'img/run.png', iconAnchor: [25, 15], })}).addTo(map); //添加一条线段也记录已经路过的点 var passed=L.polyline([[]],{ color:'yellow'}).addTo(map); m.on('update_position',function (e) { //每次坐标更新。然后也更新路径 passed.setLatLngs(e.path); }); // 开始运动 m.moveAlong(polyline,300000); </script>
  24.     </body>
  25. </html>

别忘点赞！

发表评论

表情：
评论列表 （有 0 条评论，123人围观）

还没有评论，来说两句吧...

相关阅读