leaflet初尝试

最新推荐文章于 2024-08-26 20:25:07 发布

wrkkkk

最新推荐文章于 2024-08-26 20:25:07 发布

阅读量69

点赞数

分类专栏： leaflet学习文章标签： javascript html 前端

本文链接：https://blog.csdn.net/wrkkkk/article/details/130101862

版权

leaflet学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该文介绍了如何在网页中利用Leaflet库创建地图。首先，在部分引入leaflet.css和leaflet.js文件。接着，在创建一个具有固定高度和宽度的地图容器，并指定id。然后，通过JavaScript创建地图对象和图层，这里以高德的基础底图为例。最后，将图层添加到地图上，并设定初始的中心点和缩放级别。

摘要由CSDN通过智能技术生成

1、在head引用leaflet.css和leaflet.js文件

    <link rel="stylesheet" href="./leaflet/leaflet.css">
    <script src="./leaflet/leaflet.js"></script>

2、在body创建地图容器，并设置容器的高度和宽度

需要给容器设置id，在创建地图时需要传入

    <div id="map" style="height:400px width:400px"></div>

3、创建地图、图层，并加载图层

在创建完成地图和图层后，使用图层的addTo()方法，将图层加载至地图显示，如下加载高德基础底图

    <script>
        var map = L.Map('map');  // 使用id为'map'的容器创建地图
        // 创建图层
        var layer = L.TileLayer('http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
             maxZoom: 18,   // 设置最大缩放等级
         });
        layer.addTo(map);  // 将图层加载至地图
        map.setView([40,118],5);  // 设置初始中心点及缩放等级
    </script>