leaflet加载高德地图卫星图并且要有行政区域名称
要在Leaflet中加载高德地图卫星图并显示行政区域名称，您可以使用高德地图的Web API和Leaflet的相关功能来实现。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Leaflet加载高德地图卫星图并显示行政区域名称</title>
<style>
#map {
height: 600px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_AMAP_API_KEY"></script>
<script>
// 创建地图实例
var map = L.map('map').setView([39.9, 116.4], 10);
// 使用高德地图卫星图
L.tileLayer('https://webst04.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
attribution: '高德地图卫星图'
}).addTo(map);
// 获取行政区域边界数据
fetch('https://restapi.amap.com/v3/config/district?keywords=北京市&subdistrict=3&key=YOUR_AMAP_API_KEY')
.then(function(response) {
return response.json();
})
.then(function(data) {
var district = data.districts[0];
var polygon = L.polygon(district.polyline.split(';').map(function(pointStr) {
var point = pointStr.split(',');
return [Number(point[1]), Number(point[0])];
}), {
color: 'red',
fillOpacity: 0.2
}).addTo(map);
// 在多边形中心位置添加行政区域名称标签
var center = polygon.getBounds().getCenter();
L.marker(center).bindTooltip(district.name).addTo(map);
});
</script>
</body>
</html>
请确保将上述代码中的YOUR_AMAP_API_KEY替换为您自己的高德地图Web API密钥。此示例代码创建了一个Leaflet地图实例，并在地图上加载了高德地图卫星图。然后，它使用高德地图的Web API获取指定行政区域（此示例中为北京市）的边界数据，并在地图上绘制多边形边界。最后，它在多边形中心位置添加了一个行政区域名称标签。
请注意，此示例仅显示了一个行政区域，您可以根据需要修改代码以显示其他行政区域
原文地址: http://www.cveoy.top/t/topic/h24r 著作权归作者所有。请勿转载和采集!