效果图如下：
<!DOCTYPE html>
<html>
<head>
<title>轨迹</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 引入样式 -->
<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
<link rel="stylesheet" href="../../lib/element-ui@2.13.0/index.css" />
<style>
html,
body,
#map {
height: 100%;
padding: 0;
margin: 0;
}
.menuBar {
position: absolute;
text-align: center;
top: 10px;
margin: 0 50px;
padding: 5px;
border-radius: 3px;
z-index: 999;
color: #ffffff;
background-color: rgba(0, 168, 0, 1);
}
.timeslider {
position: absolute;
z-index: 999;
width: 100%;
height: 100px;
background: lightseagreen;
bottom: 0px;
display: flex;
align-items: center;
justify-content: center;
}
.block {
width: 80%;
}
.timeslider .slider-demo-block {
display: flex;
align-items: center;
}
.slider-demo-block .el-slider {
margin-top: 0;
margin-left: 12px;
}
.el-slider__marks-text {
position: absolute;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
font-size: 14px;
color: #fff;
margin-top: 15px;
}
</style>
<script src="../../lib/vue@2.6.11/vue.js"></script>
<!-- <script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script> -->
<!-- 引入组件库 -->
<!-- <script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script> -->
<script src="../../lib/element-ui@2.13.0/index.js"></script>
<script src="../../js/prjconfig.js" maptype="leaflet"></script>
<!-- 引入插件 -->
<script src="../../lib/leaflet/plugins/leaflet.polylineDecorator.js"></script>
<script src="../../lib/leaflet/plugins/Leaflet.AnimatedMarker.js"></script>
</head>
<body>
<div id="map"></div>
<div class="menuBar">
<input type="button" value="开始" onclick="startClick()" />
<input type="button" value="暂停" onclick="pauseClick()" />
<input type="button" value="加速" onclick="speetUp()" />
<input type="button" value="减速" onclick="speetDown()" />
<input type="button" value="停止" onclick="stopClick()" />
</div>
<div id="app" class="timeslider">
<div class="block">
<el-slider v-model="value" :max="120" :step="10" :marks="marks" :show-tooltip="false" @change="change">
</el-slider>
</div>
</div>
<script>
//'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
var map = L.map("map", {
crs: L.CRS.EPSG4326, //L.CRS.EPSG3857
center: [MAPINIT.Location.lat, MAPINIT.Location.lon], //[40.76339, 106.9477844],
zoom: MAPINIT.Location.zoom,
minZoom: MAPINIT.zoomsExtent[0],
maxZoom: MAPINIT.zoomsExtent[1],
zoomControl: true,
});
// 使用WMTS Key-Value加载地图服务
let _getc =
"http://192.168.1.212:8095/server/default/getTile/wmts?request=GetCapabilities&service=wmts&layer=yx";
MAPCONFIG.MAPWMTS_IMG =
"http://192.168.1.212:8095/server/vtile/getTile/wmts";
let ls =
"http://192.168.1.212:8095/server/vtile/getTile/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=yx&STYLE=default&TILEMATRIXSET=w&FORMAT=image/png&TILEMATRIX={z}&TILECOL={x}&TILEROW={y}&tk=''";
L.tileLayer(ls, {
zoomOffset: 1,
}).addTo(map);
map.setView(L.latLng(37.550339, 104.114129), 4); //设置缩放级别及中心点
let speetX = 1; // 默认速度倍数
// 加速
function speetUp() {
speetX = speetX * 2;
animatedMarker.setSpeetX(speetX);
}
// 减速
function speetDown() {
speetX = speetX / 2;
animatedMarker.setSpeetX(speetX);
}
// 开始
function startClick() {
animatedMarker.start();
}
// 暂停
function pauseClick() {
animatedMarker.pause();
}
// 停止
function stopClick() {
newLatlngs = [];
animatedMarker.stop();
}
var routeLine;
var realRouteLine;
var decorator;
var animatedMarker;
var newLatlngs;
// 初始化轨迹
function initTrack(coor) {
let latlngs = coor;
// 小车速度
var speedList = [
1, 1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 4, 4, 5, 5, 4, 4, 4, 3, 2, 2, 1, 1,
1,
];
// 轨迹线
routeLine = L.polyline(latlngs, {
weight: 8,
}).addTo(map);
// 实时轨迹线
realRouteLine = L.polyline([], {
weight: 8,
color: "#FF9900",
}).addTo(map);
// 轨迹方向箭头
decorator = L.polylineDecorator(routeLine, {
patterns: [
{
repeat: 50,
symbol: L.Symbol.arrowHead({
pixelSize: 5,
headAngle: 75,
polygon: false,
pathOptions: {
stroke: true,
weight: 2,
color: "#FFFFFF",
},
}),
},
],
}).addTo(map);
var carIcon = L.icon({
iconSize: [37, 26],
iconAnchor: [19, 13],
iconUrl: "../../image/car.png",
});
// 动态marker
animatedMarker = L.animatedMarker(routeLine.getLatLngs(), {
speedList: speedList,
interval: 200, // 默认为100mm
icon: carIcon,
playCall: updateRealLine,
}).addTo(map);
newLatlngs = [routeLine.getLatLngs()[0]];
// 绘制已行走轨迹线（橙色那条）
function updateRealLine(latlng) {
newLatlngs.push(latlng);
realRouteLine.setLatLngs(newLatlngs);
}
}
// 清除polyline线
function clearPolylineGroup(polyline_group) {
latlngs = [];
if (polyline_group) {
map.removeLayer(polyline_group);
}
}
// 清除轨迹方向箭头
function clearArrow() {
map.removeLayer(decorator);
}
// 清除marker
function clearMarker() {
map.removeLayer(animatedMarker);
}
// 重置清空地图上的轨迹、marker
function resetMap() {
clearPolylineGroup(routeLine);
clearArrow(decorator);
clearMarker(animatedMarker);
}
let app = new Vue({
el: "#app",
data: {
message: "Hello Vue!",
value: 0,
marks: {
0: "2023-01",
10: "2023-02",
20: "2023-03",
30: "2023-04",
40: "2023-05",
50: "2023-06",
60: "2023-07",
70: "2023-08",
80: "2023-09",
90: "2023-10",
100: "2023-11",
110: "2023-12",
},
latlngs: [
[39.898457, 116.391844],
[39.898595, 116.377947],
[39.898341, 116.368001],
[39.898063, 116.357144],
[39.899095, 116.351934],
[39.905871, 116.35067],
[39.922329, 116.3498],
[39.931017, 116.349671],
[39.939104, 116.349225],
[39.942233, 116.34991],
[39.947263, 116.366892],
[39.947568, 116.387537],
[39.947764, 116.401988],
[39.947929, 116.410824],
[39.947558, 116.42674],
[39.9397, 116.427338],
[39.932404, 116.427919],
[39.923109, 116.428377],
[39.907094, 116.429583],
[39.906858, 116.41404],
[39.906622, 116.405321],
[39.906324, 116.394954],
[39.906308, 116.391264],
[39.916611, 116.390748],
],
},
mounted() {
this.getMonth();
initTrack(this.latlngs);
},
methods: {
change(e) {
let step = e.toString();
// console.log(Object.keys(this.marks));
if (Object.keys(this.marks).indexOf(step) > -1) {
console.log(this.marks[step]);
}
// console.log(this.value);
if (this.value == 20) {
resetMap();
} else {
resetMap();
initTrack(this.latlngs);
}
},
getMonth() {
let dataArr = [];
let data = new Date();
let year = data.getFullYear();
data.setMonth(data.getMonth() + 1, 1); //获取到当前月份,设置月份
for (let i = 0; i < 12; i++) {
data.setMonth(data.getMonth() - 1); //每次循环一次,月份值减1
let m = data.getMonth() + 1;
m = m < 10 ? "0" + m : m;
dataArr.push(data.getFullYear() + "-" + m);
}
let list = dataArr.reverse();
let obj = {};
let labelArr = Object.keys(this.marks);
labelArr.forEach((item, index) => {
obj[item] = list[index];
});
this.marks = obj;
},
},
});
</script>
</body>
</html>
