Leaflet基本用法

置顶 Guo zy

已于 2023-05-30 16:13:43 修改

阅读量836

点赞数 2

分类专栏： Leaflet.js 文章标签： javascript 开发语言 ecmascript

于 2023-05-29 13:12:01 首次发布

本文链接：https://blog.csdn.net/Alone_Endeavor/article/details/130924663

版权

Leaflet.js 专栏收录该内容

1 篇文章

订阅专栏

文章介绍了如何利用阿里云获取地理JSON数据，并结合HTML5和Leaflet库来创建和操作地图。首先引入Leaflet的CSS和JS文件，然后创建地图容器，设置中心点和缩放比例。接着添加切片图层和矢量图层，通过L.geoJSON加载GeoJSON数据，实现省份信息的标注和鼠标交互效果，如颜色变化和点击事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用阿里云地理工具获取相应的地理JSON数据，用于对地图边界绘制。

如何使用leaflet？

这里用HTML5进行操作；

因为我是用的是Leaflet库，所以要引入JavaScript 和 CSS 文件（可参考官网https://leafletjs.com/）

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>

容器创建：

 <div id="map"></div>

这里给容器设置宽100vw,高100vh;并清除默认的margin及padding值；

    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100vw;
            height: 100vh;
        }
    </style>

首先要有一个地图中心点，以及缩放比例

这里以中国版图为例，其中心点为北纬34°32′27.00″，东经108°55′25.00″。

在此基础上声明 map 变量并使用 Leaflet map 对其进行初始化；

const map = L.map('map', {
  center: [35.8617, 104.1954],
  zoom: 3.5
});

其中L代表Leaflet的 JavaScript 库中所有的内容，并且很多功能通过L进行扩展。

center代表其中心点经纬度

zoom为缩放比例

也可以使用setView()方法进行初始化

 var map = L.map("map").setView([35.8617, 104.1954], 6)

添加切片图层，这将是 Leaflet 地图的基础图层。切片图层是通过服务器通过直接 URL 请求访问的一组切片。此切片图层将地理边界添加到地图中。

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map);

也可以添加多个矢量图层的选项。将街景作为图层之一；


const basemaps = {
  StreetView: L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',   {attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}),
  Topography: L.tileLayer.wms('http://ows.mundialis.de/services/service?',   {layers: 'TOPO-WMS'}),
  Places: L.tileLayer.wms('http://ows.mundialis.de/services/service?', {layers: 'OSM-Overlay-WMS'})
}

Leaflet 还提供了让用户控制要渲染的图层的功能。使用该功能，我将在页面右上角添加一个选项菜单按钮，让您选择要覆盖在地图上的三个图层中的哪一个；

L.control.layers(basemaps).addTo(map);

设置wms为默认图层

basemaps.Places.addTo(map)

将开始的json数据，在加载GeoJSON数据后，可以通过feature对象获取到各省份的信息，

可点击对应区域使其标注

L.geoJSON(geoJSON, {
            style: function (feature) {
                return {
                    fillColor: 'green',
                    weight: 2,
                    opacity: 1,
                    color: 'white',
                    fillOpacity: 0.7
                };
            },
            onEachFeature: function (feature, layer) {
                // 添加省份名称标注
                layer.bindPopup(feature.properties.name);

                // 添加鼠标悬停效果
                layer.on('mouseover', function () {
                    this.setStyle({
                        fillOpacity: 1,
                    });
                });
                layer.on('mouseout', function () {
                    this.setStyle({
                        fillOpacity: 0.7,
                    });
                });

                layer.on("click", function () {
                    this.setStyle({
                        fillOpacity: 0.7,
                        color: "red",
                        fillColor: "orange"
                    })
                })
            }
        }).addTo(map);

至此：