<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<!-- 引入 leaflet-gpx 插件的 CSS 文件 -->
<link rel="stylesheet" href="https://unpkg.com/leaflet-gpx@1.7.0/gpx.css" />
<!-- 引入 Leaflet 自带定位控件的 CSS 文件 -->
<link rel="stylesheet" href="https://unpkg.com/leaflet.locatecontrol@0.74.0/dist/L.Control.Locate.min.css" />
<!-- 引入 Font Awesome 图标库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<!-- 引入 leaflet-gpx 插件的 JavaScript 文件 -->
<script src="https://unpkg.com/leaflet-gpx@1.7.0/gpx.js"></script>
<!-- 引入 Leaflet 自带定位控件的 JavaScript 文件 -->
<script src="https://unpkg.com/leaflet.locatecontrol@0.74.0/dist/L.Control.Locate.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
#map {
/* 修改为固定高度 600px */
height: 400px;
width: 100%;
}
#ol-logo {
position: absolute;
bottom: 6px;
left: 6px;
z-index: 999;
}
#ol-logo img {
width: 100px;
}
.ol-zoom {
right:.5em;
left: unset;
}
.chess {
background:
repeating-conic-gradient(
#fff 0deg 90deg,
#e6e6e6 0deg 180deg)
0 0/40px 40px round;
}
.leaflet-control-attribution {
display: none !important;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// 将初始位置设置为北京，经纬度为 [39.916431,116.390767]，缩放级别设为 13(也可以设置成你自己所需要的初始位置)
var map = L.map('map').setView([39.916431,116.390767], 13);
// 第一个图层
var topoLayer = L.tileLayer('https://api.maptiler.com/maps/landscape/256/{z}/{x}/{y}@2x.png?key=你的API密钥', {
attribution: "",
id: 'topo - v2',
accessToken: '你的API密钥',
maxZoom: 18
});
// 第三个图层
var satelliteLayera = L.tileLayer('https://api.maptiler.com/maps/backdrop/256/{z}/{x}/{y}@2x.png?key=你的API密钥', {
attribution: "",
id:'backdrop - v2',
accessToken: '你的API密钥',
maxZoom: 18
});
// 第二个图层
var satelliteLayer = L.tileLayer('https://api.maptiler.com/maps/satellite/{z}/{x}/{y}@2x.jpg?key=你的API密钥', {
attribution: "",
id:'satellite - v2',
accessToken: '你的API密钥',
maxZoom: 18
});
// 加载 GPX 文件
var gpx = new L.GPX('你的gpx文件路径.gpx', {
async: true,
marker_options: {
startIconUrl: 'https://unpkg.com/leaflet-gpx@1.7.0/pin-icon-start.png',
endIconUrl: 'https://unpkg.com/leaflet-gpx@1.7.0/pin-icon-end.png',
shadowUrl: 'https://unpkg.com/leaflet-gpx@1.7.0/pin-shadow.png'
}
}).on('loaded', function (e) {
map.fitBounds(e.target.getBounds());
});
//显示轨迹
gpx.addTo(map);
//显示鼠标点击经纬度
var popup = L.popup();
function onMapClick(e) {
var lat = e.latlng.lat.toFixed(6);
var lng = e.latlng.lng.toFixed(6);
popup
.setLatLng(e.latlng)
.setContent(`纬度: ${lat}, 经度: ${lng}`)
.openOn(map);
}
map.on('click', onMapClick);
// 添加第一个图层到地图
topoLayer.addTo(map);
// 创建图层控制
var baseLayers = {
"等高线": topoLayer,
"地势图": satelliteLayera,
"卫星图": satelliteLayer
};
var overlayLayers = {
"GPX轨迹": gpx
};
L.control.layers(baseLayers, overlayLayers).addTo(map);
// 添加 Leaflet 自带的定位控件
L.control.locate({
position: 'topleft', // 定位控件的位置，可根据需要调整
drawCircle: true, // 是否绘制表示精度的圆
follow: false, // 是否在定位后跟随用户位置移动地图
setView: false, // 是否在定位后自动设置地图视图
keepCurrentZoomLevel: false, // 是否保持当前缩放级别
markerStyle: {
weight: 1,
opacity: 0.8,
fillOpacity: 0.8
},
circleStyle: {
weight: 1,
clickable: false
},
icon: 'fa-solid fa-location-arrow', // 使用 Font Awesome 图标
iconLoading: 'fa-solid fa-spinner fa-spin',
metric: true, // 使用公制单位
strings: {
title: "双击显示你的大概位置",
popup: "你在这里，误差约 {distance} {unit}",
outsideMapBoundsMsg: "你似乎在地图边界之外"
},
locateOptions: {
maxZoom: 18
}
}).addTo(map);
</script>
</body>
</html>
Comments NOTHING