Leaflet教程，英文/国际版地图，vue项目集成Leaflet

清晨細雨

已于 2024-05-07 12:05:19 修改

阅读量4.6k

点赞数 15

文章标签： vue.js 前端 javascript

于 2024-05-07 09:28:16 首次发布

本文链接：https://blog.csdn.net/qq_16785561/article/details/138519209

版权

vue开发的项目要做海外版本，但是国内百度、高德等地图咔咔收费，只能找国外版本地图，对比参考了Mapbox、Leaflet、echarts等多种实现，最终选择了Leaflet开发，简单记录一下。效果如下图：

划重点：Leaflet必须翻墙(代理)使用外网才能正常渲染使用

一、Leaflet简介

Leaflet是一个轻量级的Web地图库，它支持多种平台和浏览器，并具有广泛的功能、良好的性能以及易用性。Leaflet的主要特点包括：

轻量级：Leaflet的文件大小较小，加载速度快，特别适合在移动设备和低带宽环境下使用。
易用性：Leaflet提供了简单直观的API，使开发者能够快速上手并创建交互式地图。
可定制性：Leaflet支持自定义图层、标记样式和交互行为，开发者可以根据自己的需求进行定制。
跨平台兼容性：Leaflet可以在各种现代浏览器和移动设备上运行，并且与多种前端框架（如React、Vue等）兼容。

二、Leaflet简单教程

Leaflet 是一个开源的 JavaScript 库，用于在网页上创建交互式地图。以下是一个基本的 Leaflet 教程，帮助你开始使用 Leaflet 创建一个简单的地图：

1. 引入 Leaflet 库

首先，在 HTML 文件中引入 Leaflet 库的 CSS 和 JavaScript 文件。从 Leaflet 的官方网站下载最新的库文件，或者使用 CDN 链接。Leaflet官网地址

<!DOCTYPE html>  
<html>  
<head>  
    <title>Leaflet 入门教程</title>  
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />  
    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>  
</head>  
<body>  
    <!-- 地图容器 -->  
    <div id="map" style="width: 100%; height: 400px;"></div>  
  
    <script>  
        // 在这里编写 JavaScript 代码来初始化地图  
    </script>  
</body>  
</html>

2. 初始化地图

在 JavaScript 代码中，使用 Leaflet 的 API 来初始化地图，并设置地图的中心位置、缩放级别和其他选项。

<script>  
    // 初始化地图  
    var map = L.map('map').setView([51.505, -0.09], 13); // 设置地图的中心位置和缩放级别  
  
    // 添加瓦片图层  
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {  
        maxZoom: 19,  
    }).addTo(map);  
</script>

L.map('map') 创建一个新的地图实例，并将其绑定到 ID 为 "map" 的 HTML 元素上。setView 方法设置地图的中心位置和缩放级别。使用 L.tileLayer 创建一个瓦片图层，并将其添加到地图上。此处使用了 OpenStreetMap 的瓦片图层作为示例。

3. 添加标记和弹窗

使用 Leaflet 添加标记（Marker）和弹窗（Popup）来显示地图上的特定位置的信息。

<script>  
    // ...之前的代码...  
  
    // 创建一个标记并添加到地图上  
    var marker = L.marker([51.5, -0.09]).addTo(map)  
        .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup(); // 绑定一个弹窗并打开它  
</script>

三、实际使用（以单页面使用为例）

准备工作（安装依赖）：


npm install leaflet //地图主服务
npm install leaflet-geosearch //地图搜索服务
npm install leaflet.markercluster//点位聚合

1、页面引入：

import L from "leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet.markercluster";
import "leaflet.markercluster/dist/MarkerCluster.css";
import "leaflet.markercluster/dist/MarkerCluster.Default.css";

2、页面定义元素