<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>显示一个地图</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#mapid {
height: 600px;
}
</style>
</head>
<body>
<div id="mapid"></div>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(mymap)
// 案例一，添加船标并绘制行驶轨迹:
// * 定义标记 *
var boatlcon = L.icon({
iconUrl: "./img/car.png",
iconSize: [23, 30],
iconAnchor: [15, 15], // icon指定点与实际坐标点的偏移量，此处为底部中心点
})
var boatMarker = L.marker([],//个坐标留空，方使合续添加
{
icon: boatlcon,
draggable: false
}
)
var boatLineGroup = L.layerGroup([])//轨迹线图层组，方便管理
boatLineGroup.addTo(myMap)
var boatLines = L.polyline([], {color: '#3fe522', weight: 2,}) // 轨迹线的样式设定
var boatLineList = []//绘制轨迹用的
function addBoat(lat_value, long_value) {
boatMarker.setLatLng([lat_value, long_value])
boatMarker.addTo(mymap)
boatLineList.push([lat_value, long_value]) // 添加至轨迹数组，绘制轨迹用
}
function moveBoat(lat_value, long_value, yaw) {
// parse : 经纬度、角度
boatMarker.setLatLng([lat_value, long_value])//设定船的新坐标
boatMarker.setRotationAngle(yaw);//l旋转船标, 1~360，需要leaflet.rotatedMar.js
const boat_line_line = boatLineList.push([lat_value, long_value])
boatLineGroup.addLayer(boatLines) // 向图层组添加轨迹线
if (boat_line_line > 1) {
redrawLine(boatLines, boatLineList)
}
}
function redrawLine(line_obj, line_list) {
// 接收一个线对象、坐标数组，重绘
line_obj.setLatLngs(line_list) // 给轨迹线设定坐标值，参数为数组
line_obj.redraw()
}
</script>
</body>
</html>
浙公网安备 33010602011771号