如何在HTML中使用Leaflet加载天地图并去掉左上角的缩放图标以及右下角的logo

作者:很菜不狗2024.01.17 23:02浏览量:43

简介:Leaflet是一个开源的JavaScript库,用于在网页上创建交互式地图。天地图是中国国家地理信息公共服务平台提供的地图服务。本文将介绍如何使用Leaflet在HTML中加载天地图,并去掉左上角的缩放图标和右下角的logo。

千帆应用开发平台“智能体Pro”全新上线 限时免费体验

面向慢思考场景,支持低代码配置的方式创建“智能体Pro”应用

立即体验

要在HTML中使用Leaflet加载天地图,首先需要引入Leaflet和天地图的JavaScript库。你可以通过CDN或者下载本地文件来引入这些库。下面是一个简单的示例代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>加载天地图</title>
  5. <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  6. <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  7. <script src="https://tianmap.org/jsapi/tmap-2.3.8.js"></script>
  8. </head>
  9. <body>
  10. <div id="map" style="width: 800px; height: 600px;"></div>
  11. <script>
  12. // 创建地图容器和设置地图中心点坐标
  13. var map = L.map('map').setView([39.9075, 116.3972], 4);
  14. // 加载天地图图层
  15. L.TianMapLayer().addTo(map);
  16. </script>
  17. </body>
  18. </html>

在上面的代码中,我们首先引入了Leaflet和天地图的JavaScript库。然后,我们创建了一个地图容器,并设置了地图的中心点坐标。最后,我们使用L.TianMapLayer()方法加载天地图图层,并使用addTo()方法将其添加到地图容器中。
如果你想要去掉左上角的缩放图标和右下角的logo,你可以使用Leaflet的选项来自定义这些图标。以下是一个示例代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>去掉缩放图标和logo</title>
  5. <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  6. <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  7. <script src="https://tianmap.org/jsapi/tmap-2.3.8.js"></script>
  8. </head>
  9. <body>
  10. <div id="map" style="width: 800px; height: 600px;"></div>
  11. <script>
  12. // 创建地图容器和设置地图中心点坐标
  13. var map = L.map('map').setView([39.9075, 116.3972], 4);
  14. // 加载天地图图层
  15. L.TianMapLayer().addTo(map);
  16. // 去掉缩放图标和logo
  17. map.removeControl(L.control.zoom); // 去掉缩放图标
  18. map.removeControl(L.control.logo); // 去掉logo
  19. </script>
  20. </body>
  21. </html>

在上面的代码中,我们使用removeControl()方法来移除L.control.zoomL.control.logo这两个控制项,从而去掉缩放图标和logo。注意,这个方法只会移除添加到地图上的控制项,如果你没有添加这些控制项,它们就不会被移除。因此,如果你想要完全自定义地图的外观,你可能需要自己创建控制项并添加到地图上。

article bottom image

相关文章推荐

发表评论