leaflet地图介绍

简介: 本文将介绍有关于leaflet地图组件在web中的应用什么是leaflet?leaflet是一个轻量级的开源js地图组件,适用于移动设备,用法简单性能优越,如果你曾经使用过高德或者百度的地图api的话,相信你可以很轻易的上手更加简单的leafletleaflet是怎么运作的?leaflet的工作方法和高德百度之类的并不一样,由于leaflet是个开源项目,所以它本身只有地图组件并不提供地图内容,也就是说,我们不需要为了使用leaflet而去注册key。

本文将介绍有关于leaflet地图组件在web中的应用

什么是leaflet?

leaflet是一个轻量级的开源js地图组件,适用于移动设备,用法简单性能优越,如果你曾经使用过高德或者百度的地图api的话,相信你可以很轻易的上手更加简单的leaflet

leaflet是怎么运作的?

leaflet的工作方法和高德百度之类的并不一样,由于leaflet是个开源项目,所以它本身只有地图组件并不提供地图内容,也就是说,我们不需要为了使用leaflet而去注册key。

所以当我们在页面中创建了地图之后,还需要去其他的地图内容提供商(ArcGIS)那里加载地图,有可能需要申请key,当然,在下文里我会给出一个免费又好看的地图内容的。

使用方法

引用外部代码

<!-- 提供leaflet的样式 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/leaflet/1.2.0/leaflet.css">
<!-- 提供leaflet的代码 -->
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>   
 <!-- 让leaflet可以方便的使用ArcGIS服务 -->
<script src="https://unpkg.com/esri-leaflet@2.1.4/dist/esri-leaflet.js"></script>

新建地图

有关地图的完整api在这里

html

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

js

var map = L.map('map').setView([37.002553, 106.890747], 3)
var map = L.map('map', {
  center: [37.002553, 106.890747],
  zoom: 3
})

上面这两种实现的效果是一样的,都是在id为map的div上创建一个中心为[51, 51],缩放等级为13的地图,那么现在你应该能看到一个没有地图内容的地图组件了。

加载地图内容

L.esri.tiledMapLayer({
  url: 'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'
}).addTo(map)

上面的代码会去读取url里提供的地图内容并加载到名字为map的地图组件实例里,更多的内容可以复制上面的url,他们提供了另外几种地图的样式。好了,当你完成了这一步时你应该可以看到一个完整的地图已经被加载出来了。

添加覆盖物

添加标记点 官方api

var marker = L.marker([38.761954, 117.775429]).addTo(map)

添加圆形 官方api

var circle = L.circle([38.761954, 117.575429], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 500
}).addTo(map)

添加多边形 官方api

var polygon = L.polygon([
  [38.561954, 117.675429],
  [38.561954, 117.475429],
  [38.361954, 117.375429]
]).addTo(map)

处理事件

你可以为map或者marker之类事件驱动的类上使用on或者off添加或关闭一个事件监听 官方api

var popup = L.popup()
map.on('click', function (e) {
  popup
    .setLatLng(e.latlng)
    .setContent("你点击了 " + e.latlng.toString())
    .openOn(map)
})

上述代码将在点击地图时弹出点击位置的信息,其中L.popup()可以初始化一个弹出框。

大体内容就介绍到这里,以下是完整的html代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>leaflet地图测试</title>

  <link rel="stylesheet" href="http://cdn.bootcss.com/leaflet/1.2.0/leaflet.css">    <!-- 提供leaflet的样式 -->
  <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>     <!-- 提供leaflet的代码 -->
  <script src="https://unpkg.com/esri-leaflet@2.1.4/dist/esri-leaflet.js"></script>     <!-- 让leaflet加载地图更加简单 -->
  
</head>
<body>
  <div id="map" style="height:500px;"></div>
  <script>
    var map = L.map('map').setView([37.002553, 106.890747], 3)
    L.esri.tiledMapLayer({
      url: 'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'
    }).addTo(map)
    var marker = L.marker([38.761954, 117.775429]).addTo(map)
    var circle = L.circle([38.761954, 117.575429], {
      color: 'red',
      fillColor: '#f03',
      fillOpacity: 0.5,
      radius: 500
    }).addTo(map)
    var polygon = L.polygon([
      [38.561954, 117.675429],
      [38.561954, 117.475429],
      [38.361954, 117.375429]
    ]).addTo(map)

    var popup = L.popup()
    map.on('click', function (e) {
      popup
        .setLatLng(e.latlng)
        .setContent("你点击了 " + e.latlng.toString())
        .openOn(map)
    })
  </script>
</body>
</html>
目录
相关文章
|
消息中间件 数据可视化 Java
Docker Compose:部署SpringBoot应用(含MySQL,Redis,Nacos,RabbitMQ,Nginx)
Docker Compose:部署SpringBoot应用(含MySQL,Redis,Nacos,RabbitMQ,Nginx)
Docker Compose:部署SpringBoot应用(含MySQL,Redis,Nacos,RabbitMQ,Nginx)
vue-3d-model.umd.js报错You may need an appropriate loader to handle this file type怎么办?
vue-3d-model.umd.js报错You may need an appropriate loader to handle this file type怎么办?
|
缓存 Prometheus 监控
记一次victoriaMetrics代理性能优化问题
记一次victoriaMetrics代理性能优化问题
238 0
|
8月前
|
机器学习/深度学习 存储 传感器
DeepMind发布Matryoshka(套娃)量化:利用嵌套表示实现多精度LLM的低比特深度学习
本文介绍 Google DeepMind 提出的 Matryoshka 量化技术(MatQuant),该技术通过训练单个大型语言模型(LLM)实现多精度部署,革新了深度学习
188 4
|
11月前
|
机器学习/深度学习 人工智能 运维
智能运维:AI驱动的IT运维革命###
【10月更文挑战第21天】 随着数字化转型的深入,智能运维(AIOps)正逐步成为企业IT管理的核心。本文将探讨AI技术如何赋能运维领域,通过自动化、智能化手段提升系统稳定性和效率,降低运营成本,并分享实施智能运维的最佳实践与挑战应对策略。 ###
788 1
|
机器学习/深度学习 资源调度 自然语言处理
循环神经网络RNN完全解析:从基础理论到PyTorch实战1
循环神经网络RNN完全解析:从基础理论到PyTorch实战
1971 0
|
存储 自然语言处理 NoSQL
Graph + LLM|图数据库技术如何助力行业大语言模型应用落地
图数据库作为处理复杂数据结构的有力工具,为企业构建行业大语言模型提供了强大的支持。本文将探讨图数据库和图技术在帮助企业构建行业大语言模型方面的应用,以及它们如何提高语言模型的智能性和适用性。
Graph + LLM|图数据库技术如何助力行业大语言模型应用落地
|
人工智能 自然语言处理 搜索推荐
2023云栖大会 | 阿里云发布通义千问2.0
今天,阿里云正式发布千亿级参数大模型通义千问2.0。在10个权威测评中,通义千问2.0综合性能超过GPT-3.5,正在加速追赶GPT-4。通义千问APP在各大手机应用市场正式上线,所有人都可通过APP直接体验最新模型能力。
3166 10
|
定位技术 API
Leaflet中如何限制地图的拖动范围
本文讲解了在Leaflet中如何进行地图范围的控制,并通过代码的方式进行示例,并展示了最终效果。
1014 0
Leaflet中如何限制地图的拖动范围
|
传感器 机器学习/深度学习 算法
基于PDR算法实现行人惯性导航附matlab代码
基于PDR算法实现行人惯性导航附matlab代码