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>
目录
相关文章
|
定位技术 API 网络架构
地图图层接入:从mapbox转向cesium
由于地图坐标系的不统一,地图图商提供的图层服务也各有特色,在图层对接的开发过程中常会遇到许多坑,从二维图层到三维图层,地图引擎mapbox再到cesium,本文将分享笔者在近期地图图层接入过程中总结的一些经验。
3691 10
|
2月前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
675 0
|
4月前
|
缓存 前端开发 定位技术
Cesium加载Mapbox自定义地图
Cesium加载Mapbox自定义地图
133 0
|
7月前
|
JavaScript 搜索推荐 定位技术
【百度地图2.5D、3D在Vue项目中的使用】嵌入二维百度地图、三维百度地图、多种显示模式风格样式颜色的百度地图
【百度地图2.5D、3D在Vue项目中的使用】嵌入二维百度地图、三维百度地图、多种显示模式风格样式颜色的百度地图
|
7月前
|
定位技术
使用Echarts实现地图展示
使用Echarts实现地图展示
147 0
|
7月前
|
定位技术
echarts显示地图
echarts显示地图
|
定位技术
257Echarts - 3D 地图(Buildings)
257Echarts - 3D 地图(Buildings)
71 1
|
定位技术
百度地图使用 ->展示地图一
百度地图使用 ->展示地图一
105 0
|
前端开发 数据可视化 定位技术
GIS前端-地图标绘与动画
GIS前端-地图标绘与动画
159 0
|
定位技术 API
Cesium开发:限制地图浏览范围
Cesium开发:限制地图浏览范围
764 1

热门文章

最新文章