npm 包 leaflet-legacy 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

leaflet-legacy 是一个开源的 Javascript 地图开发库，是 leaflet v0.7.x 的分支版本。相比新版本，它更轻量级，支持更多的浏览器，也更加稳定。本文将介绍如何使用 npm 包 leaflet-legacy 来构建一个基本的地图应用。

安装

首先需要安装 leaflet-legacy，可以使用 npm 或者 yarn 安装，在项目目录下运行以下命令：

npm install leaflet-legacy

或者

yarn add leaflet-legacy

初始化

在 HTML 文件中引入 js 和 css 文件：

<head>
  <link
    rel="stylesheet"
    href="node_modules/leaflet-legacy/dist/leaflet.css"
  />
  <script src="node_modules/leaflet-legacy/dist/leaflet.js"></script>
</head>

在 JavaScript 文件中使用以下代码初始化地图：

const map = L.map('map').setView([39.92, 116.38], 13);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {}).addTo(map);

在 HTML 文件中添加一个 <div> 标签，并设置它的 id 为 map：

<div id="map" style="height: 500px;"></div>

现在你就可以在浏览器中看到一个基本的地图了。

基本操作

接下来，我们将介绍一些常见的地图操作。

添加标记

可以使用以下代码在地图上添加标记：

const marker = L.marker([39.92, 116.38]).addTo(map);

添加多边形

可以使用以下代码在地图上添加多边形：

const polygon = L.polygon([
  [39.92, 116.38],
  [39.92, 116.48],
  [39.82, 116.48],
]).addTo(map);

添加圆形

可以使用以下代码在地图上添加圆形：

const circle = L.circle([39.92, 116.38], {
  radius: 5000,
}).addTo(map);

添加折线

可以使用以下代码在地图上添加折线：

const polyline = L.polyline([
  [39.92, 116.38],
  [39.92, 116.48],
  [39.82, 116.48],
]).addTo(map);

自定义标记图标

可以使用以下代码自定义标记图标：

const myIcon = L.icon({
  iconUrl: 'my-icon.png',
  iconSize: [38, 50],
  iconAnchor: [22, 94],
  popupAnchor: [-3, -76],
});
const marker = L.marker([51.5, -0.09], { icon: myIcon }).addTo(map);

结语

本文介绍了如何使用 npm 包 leaflet-legacy 构建一个基本的地图应用，并介绍了一些常见的地图操作。通过本文的学习，你应该能够掌握使用 leaflet-legacy 开发地图应用的基本技能。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005572781e8991b448d41a7