【Leaflet入门篇】 Leaflet快速入门

WhyLearnCode

已于 2023-07-07 10:42:57 修改

阅读量1.4k

点赞数 8

分类专栏： leaflet 文章标签： javascript

于 2023-07-06 21:13:23 首次发布

本文链接：https://blog.csdn.net/WhyLearnCode/article/details/131585396

版权

leaflet 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

【Leaflet入门篇】 Leaflet快速入门

0 前言
1 引入
2 使用

0 前言

Leaflet 是一个开源并且对移动端友好的交互式地图 JavaScript 库。它大小仅仅只有 42 KB of JS, 并且拥有绝大部分开发者所需要的所有地图特性。
Leaflet 简单、高效并且易用。它可以高效的运行在桌面和移动平台, 拥有着大量的扩展插件、优秀的文档（相对于openlayer，Leaflet有一个非常友好的中文网站）、简单易用的 API 和完善的案例, 以及可读性较好的源码。
一个优秀的文档对初学者的帮助是巨大的，接下来的内容都是基于这个文档来的（强烈推荐大家看官方文档 https://leafletjs.cn/）

【Leaflet入门篇】文章可以帮助大家能够更好的阅读教程文档
“Leaflet快速入门”主要讲Leaflet的引入和使用（添加简单的地图元素和点击事件），对应教程【Leaflet快速入门指南】

1 引入

引入分为脚本引入(script)和模块引入(import)等
脚本引入

<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>

注：先引leaflet.css，在引leaflet.js
模块引入

// 直接安装
npm install --save leaflet@1.7.1 (版本号自己顶，此刻最新版本v1.9.4)

// package.json 添加安装
"dependencies": {
  "leaflet": "^1.7.1"
}
npm install 

// 引入
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

2 使用

本文将使用分为以下三步：

2.1 创建具有特定id的div元素

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

注：需要设定div元素的高度height，不然地图无法显示

2.2 实例map

var map = L.map('map').setView([29.04656, 112.86254], 8);

L.map(‘map’) 是静态实例方法，参数’map’是指id问map的div原始，setView([29.04656, 112.86254], 13)是设置地图中心点和缩放级别
此时只创建了地图实例，地图上只有缩放控件，需要在地图上添加元素（本文会演示添加简单的地图服务、标记、圆和多边形等元素）

右下角有一个Leaflet图标，那是Attribution版权控件，可以通过地图的attributionControl属性控制是否显示。

// 添加{attributionControl: false}去掉版权控件
var map = L.map('map', {attributionControl: false}).setView([29.04656, 112.86254], 13);

2.3 添加地图元素

1）添加地图服务：教程中添加的是openstreetmap的瓦片图层，没有科学上网访问不友好

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

选择一个可以轻松访问的瓦片服务，使用天地瓦片服务（需要token，好像也不够轻松）

var url = http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=xxx (替换tk)
L.tileLayer(url, {
  maxZoom: 18
}).addTo(map)
// 修改地图中心点
map.setView([27.629216, 111.711649])

Leaflet能添加tile瓦片服务还能添加其他类型的地图服务（wms）等，后面的文档中会详细介绍。

2）标记、圆和多边形
在地图开发中常用的标记在Leaflet中添加也十分方便

var marker = L.marker([51.5, -0.09]).addTo(map);

除了标记还有圆、多边形等

var circle = L.circle([29.16175, 112.40661], 
 {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 500 // 半径
}).addTo(map);

var polygon = L.polygon([
    [29.22409, 113.21960],
    [28.80135, 112.87902],
    [28.74358, 113.543701]
]).addTo(map);

添加弹窗显示地图元素的信息是在地图开发中经常碰到的
使用popups可以很好做到

marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");

bindPopup()绑定需要显示的信息（点击元素后显示的内容）
openPopup()自动打开（不需要手动点击，直接显示）

2.4 事件

通过监听事件可以进行交互，Leaflet 中每个对象都有属于自己的事件，例如单击地图显示经纬度

var popup = L.popup();

function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(map);
}

map.on('click', onMapClick);

以上就是【Leaflet入门篇】Leaflet快速入门的全部内容
完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"/>
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <div id="map" style="height: 500px; width: 500px"></div>
    <script>
      var map = L.map('map', {attributionControl: false}).setView([29.04656, 112.86254], 8);
      // L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
      //     maxZoom: 19,
      //     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
      // }).addTo(map);
      var url = "http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=xxx" // xxx (替换tk)
      L.tileLayer(url, {
        maxZoom: 18
      }).addTo(map)

      var marker = L.marker([29.06097, 111.93969]).addTo(map);

      var circle = L.circle([29.16175, 112.40661], 
                            {
                              color: 'red',
                              fillColor: '#f03',
                              fillOpacity: 0.5,
                              radius: 10000 // 半径 单位m
                            }).addTo(map);

      var polygon = L.polygon([
        [29.22409, 113.21960],
        [28.80135, 112.87902],
        [28.74358, 113.543701]
      ]).addTo(map);


      marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
      circle.bindPopup("I am a circle.");
      polygon.bindPopup("I am a polygon.");

      var popup = L.popup();

      function onMapClick(e) {
        popup
          .setLatLng(e.latlng)
          .setContent("You clicked the map at " + e.latlng.toString())
          .openOn(map);
      }

      map.on('click', onMapClick);
    </script>
  </body>
</html>

点赞收藏加关注，收获满满不迷路
欢迎评论交流

WhyLearnCode

关注

8
点赞
踩
13

收藏

觉得还不错? 一键收藏
3
评论
【Leaflet入门篇】 Leaflet快速入门

【Leaflet入门篇】文章可以帮助大家能够更好的阅读教程文档“快速入门”主要讲Leaflet的引入和使用（添加简单的地图元素和点击事件），对应教程【[Leaflet快速入门指南](https://leafletjs.cn/examples/quick-start/)】
复制链接

扫一扫