一.简介

Leaflet是一个主要适用于移动端交互地图的领先的开源javascript库。虽然js库只有38KB左右,但是却能满足大部分开发者的所有功能需求。

Leaflet拥有着简单,高效和实用的设计思想。它可以在所有主要的桌面和移动端平台上高效的运转,可以扩展插件,它有一个漂亮的、易用的和文档清晰的API,还有一个简单、易读的源代码。

二.入门实例展示

该图展示了我们选择的地图图层(tiles),以及初始化了基本的标记和弹窗。

三.快速开始

1.准备一个空白的html界面。

在head引入css样式文件。

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>

引入js文件,确保js文件在css文件之后引入。

<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>

2.创建一个div元素并声明id,此时必须有一个明确的宽度,否则默认为0.

<div id="mapid" style="width:600px;height:400px;"></div>

3.设置地图

一个用漂亮的Mapbox Streets的地图图块创建的伦敦中心的地图,首先需要初始化地图,并且设置视图用选择的地理坐标和缩放级别。

var mymap = L.map('mapid').setView([51.505, -0.09], 13); //(地理坐标,缩放等级)

默认情况下,地图上所有的鼠标和触摸的交互控件都是激活的。

注意:setView方法可以一个地图对象,并且大部分的Leaflet方法在不返回明确的数值是都是返回一个对象。

在地图上添加一个图层,此时是一个Mapbox Streets的图层。创建一个图层通常需要涉及到为图层设置URL模板,图层的属性文本和缩放的最大级别。在当前例子下,运用Mapbox中的经典地图的 mapbox.streets 图块(为了从Mapbox中运用图块,必须请求token)。

//titleLayer是指基础图层的元素
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18, //最大放大倍数
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets', //地图类型,不强制选择图层的提供方,可替换mapbox.satellite等
}).addTo(mymap);

4.添加其他元素(标记marker、圆圈circle和多边形polygon等)

除了添加图层之外,例子上还有标记、圆圈和多边形。

例如,创建一个标记:

var marker = L.marker([51.5, -0.09]).addTo(mymap); //初始化添加一个标记

或者添加一个圆圈:

var circle = L.circle([51.5, -0.05], { 
  color: 'red',
  fillColor: '#f03',
  fillOpacity: 0.5,
  radius: 500
}).addTo(mymap); //初始化一个边框red,内部背景颜色#f03,透明度0.5,半径为500的圆圈范围

或者添加一个多边形:

var polygon = L.polygon([ [51.509, -0.08], [51.503, -0.06], [51.51, -0.047]]).addTo(mymap);  //初始化一个多边形,自定义样式如circle

也可以显示一些弹窗提示:

marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup(); //openPopup()初始化界面时触发
circle.bindPopup("I am a circle."); //点击触发
polygon.bindPopup("I am a polygon.");

或者初始化显示弹窗是可以这么写:

//这里我们使用openOn而不是addTo是因为当开启一个新的气泡点时将自动关闭上一个打开的气泡点,这样提高了使用性
var popup = L.popup() .setLatLng([51.5, -0.09]) .setContent("I am a standalone popup.") .openOn(mymap);

5.简单的触发事件

该方法展示了点击可触发一个弹窗,并显示该点的坐标。

var popup = L.popup(); //声明(初始化)一个弹窗
function onMapClick(e) {
console.log(e.latlng)
popup .setLatLng(e.latlng) .setContent("You clicked the map at " + e.latlng.toString()) .openOn(mymap); //点击时通过e.latlng显示该点坐标
}
mymap.on('click', onMapClick); //点击时触发onMapClick事件

以上就是简单的Leaflet地图显示案例的基本属性使用以及说明。

Leaflet学习笔记(一)的更多相关文章

  1. Leaflet学习笔记-基础内容

    为什么选择Leaflet 开源,且代码仅有 31 KB,但它具有开发人员开发在线地图的大部分功能(80%的功能) 是不是比arcgis要小很多呢 官网:http://leafletjs.com/ 劣势 ...

  2. Leaflet学习笔记-Leaflet.awesome-markers

    基础篇传送门 http://www.cnblogs.com/CoffeeEddy/p/4919987.html 效果图 是不是感觉很美观啊 为什么选择awesome 地图上面需要各种各样的Mark,难 ...

  3. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  4. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  5. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  6. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  7. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  8. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

  9. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

随机推荐

  1. 面试书上一些题目的整理:O(n)复杂度排序年龄 & 青蛙跳台阶

    可以按照年龄的个数,设置99个桶,然后桶内处理. 青蛙跳台阶,每次1阶或者2阶,就是fib数 如果每次1到n阶,那么归纳法可得,是2^(n-1) 另外1*2 覆盖 2*n个矩阵的问题,仍然是Fib数. ...

  2. Test Precisely and Concretely

    Test Precisely and Concretely Kevlin Henney IT IS IMPORTANT TO TEST for the desired, essential behav ...

  3. 在openwrt上编译一个最简单的ipk包

    1 什么是opkg Opkg 是一个轻量快速的套件管理系统,目前已成为 Opensource 界嵌入式系统标准.常用于路由.交换机等嵌入式设备中,用来管理软件包的安装升级与下载. opkg updat ...

  4. Checkmarx VisualStudio plugin installation process.

    1-      Configuration of plugin VSTudio Prerequisite: -Your visual studio MUST be up to date with th ...

  5. Android APP 调试过程中遇到的问题。

    调试过过程中APP安装完启动后有的时候会异常退出,报这个错误.有的时候可以直接启动.查找不到原因.网上说把commit方法替换成commitAllowingStateLoss() 也无效. Andro ...

  6. js 拼接字符串,table等

    var userTableStr=''; userTableStr +='<table width="750" height="33" border=&q ...

  7. 洛谷P2607 [ZJOI2008]骑士 基环树动归

    Code: #include<algorithm> #include<cstdio> #include<algorithm> #include<cstring ...

  8. iOS面试总结(待完善)

    闲的没事总结一下面试资料,先列个大纲,然后慢慢填充,一步步完善,反正也不急. 1.基本属性 2.KVC与KVO 3.代理与block 4.多线程:NSThread,GCD,NSOperation 5. ...

  9. (WC2016模拟十八)Gangsters of Treeland

    HINT: $1\leq N,Q\leq 10^5$ 原题:CodeChef November Challenge 2013 - MONOPLOY 题解: 其实这题是[SDOI2017]树点涂色的弱化 ...

  10. Vue中两种传值方式

    第一种:通过url传参,直接在地址后加? ,通过this.$route.query对象获取 第二种:通过路由传参,修改路由,通过this.$route.params对象获取