如何在HTML中使用Leaflet加载天地图并去掉左上角的缩放图标以及右下角的logo
2024.01.17 23:02浏览量:43简介:Leaflet是一个开源的JavaScript库,用于在网页上创建交互式地图。天地图是中国国家地理信息公共服务平台提供的地图服务。本文将介绍如何使用Leaflet在HTML中加载天地图,并去掉左上角的缩放图标和右下角的logo。
千帆应用开发平台“智能体Pro”全新上线 限时免费体验
面向慢思考场景,支持低代码配置的方式创建“智能体Pro”应用
要在HTML中使用Leaflet加载天地图,首先需要引入Leaflet和天地图的JavaScript库。你可以通过CDN或者下载本地文件来引入这些库。下面是一个简单的示例代码:
<!DOCTYPE html>
<html>
<head>
<title>加载天地图</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://tianmap.org/jsapi/tmap-2.3.8.js"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 600px;"></div>
<script>
// 创建地图容器和设置地图中心点坐标
var map = L.map('map').setView([39.9075, 116.3972], 4);
// 加载天地图图层
L.TianMapLayer().addTo(map);
</script>
</body>
</html>
在上面的代码中,我们首先引入了Leaflet和天地图的JavaScript库。然后,我们创建了一个地图容器,并设置了地图的中心点坐标。最后,我们使用L.TianMapLayer()
方法加载天地图图层,并使用addTo()
方法将其添加到地图容器中。
如果你想要去掉左上角的缩放图标和右下角的logo,你可以使用Leaflet的选项来自定义这些图标。以下是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<title>去掉缩放图标和logo</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://tianmap.org/jsapi/tmap-2.3.8.js"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 600px;"></div>
<script>
// 创建地图容器和设置地图中心点坐标
var map = L.map('map').setView([39.9075, 116.3972], 4);
// 加载天地图图层
L.TianMapLayer().addTo(map);
// 去掉缩放图标和logo
map.removeControl(L.control.zoom); // 去掉缩放图标
map.removeControl(L.control.logo); // 去掉logo
</script>
</body>
</html>
在上面的代码中,我们使用removeControl()
方法来移除L.control.zoom
和L.control.logo
这两个控制项,从而去掉缩放图标和logo。注意,这个方法只会移除添加到地图上的控制项,如果你没有添加这些控制项,它们就不会被移除。因此,如果你想要完全自定义地图的外观,你可能需要自己创建控制项并添加到地图上。

发表评论
登录后可评论,请前往 登录 或 注册