leaflet的入门开发(一)
2016年9月27日—1.0leaflet,最快的,最稳定和严谨的leaflet,终于出来了!
leaflet是领先的开源JavaScript库为移动设备设计的互动地图。重33 KB的JS,所有映射大多数开发人员所需要的特性。
leaflet设计简单,性能和可用性。它有效地在所有主要的桌面和移动平台,可以扩展的插件,有一个美丽的,易于使用和证据确凿的API和一个简单的、易读的源代码,是一个快乐作出贡献。
让我们开始一个小实例:准备一个空白页
这里我们创建一个地图在地图的div,添加瓷砖的选择,然后添加一个标记,在弹出一些文本:
地图在编写任何代码之前,您需要做以下页面上制备步骤:
- 包括leaflet CSS文件标题部分的文档:
1
|
<link rel= "stylesheet" href= "https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" /> |
(没有这个文件可以去下载,也可以自己引入,以下不再累述),点击下载(稳定版本);
- 包括传单JavaScript文件:
1
|
<script src= "https://unpkg.com/leaflet@1.0.1/dist/leaflet.js" ></script> |
- 放一个div元素与特定的id,你想要你的地图:
1
|
<div id= "mapid" ></div> |
(id名字可以随便设定,但是必须与下面js代码定义个一样。。)
- 确保定义的映射容器有一个高度,例如通过设置CSS(必须定义一个高度,因为无法获取指定的id名,因此这个库并没有进行高度的处理设置,自己必须设置高度,如同div默认是没有高度的一样):
1
|
#mapid { height: 180px; } |
- 现在您已经准备好初始化地图,用它做一些东西。
设置地图
让我们创建一个地图的中心北京某个地点漂亮Mapbox街道瓷砖。首先我们将初始化和设置它的视图映射到我们选择的地理坐标和缩放级别(里面的 mapid 必须和设置的id保持一致):
1
|
var mymap = L.map( 'mapid' ).setView([39.9788, 116.30226], 14); |
在默认情况下(我们没有通过任何选项创建地图实例)时,所有鼠标和触摸交互启用了在地图上,它有放大和归因控制。(这些都可以通过js来控制,目前只是入门,有深入了解的可以自己摸索)
注意setView调用返回地图对象——大多数leaflet方法这样的行为时不返回一个显式的值,它允许方便类jQuery方法控制。
接下来,我们将添加一个砖层来增加我们的地图,在这种情况下这是一个Mapbox街道砖层。创建一个砖层通常涉及瓷砖图像的模板设置URL(在Mapbox得到你),归因的文本和的最大缩放级别层:
1
2
3
4
5
6
|
L.tileLayer( 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}' , { attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>' , maxZoom: 18, id: 'your.mapbox.project.id' , accessToken: 'your.mapbox.public.access.token' }).addTo(mymap); |
确保所有的代码称为div和传单。js包含。就是这样!现在你有一个工作leaflet地图。
标记,圆圈和多边形
除了砖层,您可以轻松地向地图添加其他东西,包括标志、折线、多边形、圆和弹出窗口。让我们添加一个标记:
1
2
|
L.marker([39.9788, 116.30226]).addTo(mymap) .bindPopup( "北京大厦<br>" ).openPopup(); |
添加一个圆是相同的(除了指定半径米作为第二个参数),但允许您控制看起来如何通过选择在创建对象时作为最后一个参数:
1
2
3
4
5
|
L.circle([39.9908, 116.26625], 500, { color: 'red' , fillColor: '#f03' , fillOpacity: 0.5 }).addTo(mymap).bindPopup( "颐和园欢迎你" ); |
添加一个多边形很简单:
1
2
3
4
5
6
|
L.polygon([ [39.92096, 116.38591], [39.91079, 116.38676], [39.91118, 116.3962], [39.92014, 116.39482] ]).addTo(mymap).bindPopup( "故宫" ); |
弹出窗口时通常使用您想要一些信息附加到地图上的一个特定的对象。传单有非常方便的快捷方式(和上面添加的方式一样,直接添加或者,另行添加,实际是一样的 openPopup是表示默认是否打开):
1
2
3
|
marker.bindPopup( "北京大厦" ).openPopup(); circle.bindPopup( "颐和园" ); polygon.bindPopup(故宫"); |
试着点击我们的对象。bindPopup方法高度与指定的HTML内容弹出你的标记弹出出现当你点击对象,和openPopup方法(标记)立即打开弹出。
您还可以使用弹出窗口层(当你需要更多的东西比附加一个弹出一个对象):
1
2
3
4
|
var popup = L.popup() .setLatLng([51.5, -0.09]) .setContent( "I am a standalone popup." ) .openOn(mymap); |
这里我们用openOn代替遭受因为它处理自动关闭之前打开弹出当打开一个新的良好的可用性。
处理事件
每次发生在leaflet,比如用户点击地图上标记或缩放变化,相应的对象发送一个事件,你可以订阅功能。它允许您对用户交互(这里显示的是每次你点击位置的经纬度):
1
2
3
4
5
|
function onMapClick(e) { alert( "You clicked the map at " + e.latlng); } mymap.on( 'click' , onMapClick); |
每个对象都有自己的一组事件,有关详细信息,请参阅文档。侦听器函数的第一个参数是一个事件对象,它包含有用的信息的事件发生。例如,地图点击事件对象(e在上面的示例中)latlng属性点击出现的位置。
让我们改善我们的例子中,使用一个弹出一个警告:
1
2
3
4
5
6
7
8
9
10
|
var popup = L.popup(); function onMapClick(e) { popup .setLatLng(e.latlng) .setContent( "You clicked the map at " + e.latlng.toString()) .openOn(mymap); } mymap.on( 'click' , onMapClick); |
试着点击地图,你会看到一个弹出的坐标
leaflet的入门开发(一)的更多相关文章
- leaflet的入门开发
2016年9月27日—1.0leaflet,最快的,最稳定和严谨的leaflet,终于出来了! leaflet是领先的开源JavaScript库为移动设备设计的互动地图.重33 KB的JS,所有映射大 ...
- openlayers4 入门开发系列结合 echarts4 实现统计图(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- openlayers4 入门开发系列结合 echarts4 实现交通线流动图
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- leaflet-webpack 入门开发系列六矢量瓦片(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- leaflet-webpack 入门开发系列五地图卷帘(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- leaflet-webpack 入门开发系列四图层控件样式优化篇(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- cesium 入门开发系列地图鹰眼功能(附源码下载)
前言 cesium 入门开发系列环境知识点了解:cesium api文档介绍,详细介绍 cesium 每个类的函数以及属性等等cesium 在线例子 内容概览 cesium 结合 leaflet 实现 ...
- leaflet-webpack 入门开发系列三地图分屏对比(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- leaflet-webpack 入门开发系列二加载不同在线地图切换显示(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
随机推荐
- 阿里云--安装nginx AND访问超时
首先先安装PCRE pcre-devel 和Zlib,因为配置nginx的时候会需要这两个东西PCRE(Perl Compatible Regular Expressions) 是一个Perl库,包括 ...
- 关于log4j的配置文件
因为要在spring中添加Mongodb,在网上查阅资料的时候我发现有人在web.xml中添加如下代码: <context-param> <param-name>l ...
- 本地安装sass出错问题解析
2016年3月23日个人博客文章--迁移到segmentfault 安装sass ruby安装因为sass依赖于ruby环境,所以装sass之前先确认装了ruby.先导官网下载个ruby 在安装的时候 ...
- DevExpress ASP.NET v19.1版本亮点:发布全新的Gantt控件
行业领先的.NET界面控件DevExpress 发布了v19.1版本,本文将以系列文章的方式为大家介绍DevExpress ASP.NET Controls v19.1中新增的一些控件及增强的控件功能 ...
- CSS 多行省略失效 (-webkit-box-orient 失效) Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.
webpck不能编译这个属性-webkit-box-orient: vertical https://github.com/fanyifanbumaimeng/Articles/issues/48 / ...
- PLT hook笔记
1. hook技术概述 hook技术是一种拦截用户函数调用的技术.通过hook技术可以实现统计用户对某些函数的调用次数,对函数注入新的功能的目标.在Linux平台,Hook技术可以分成用户和内核 ...
- npoi 导入
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CusImport.aspx ...
- 静态库lib、动态库dll基础
首先从hello world!开始 //main.cpp文件 void cpu(); int main() { put(); ; } 在main.cpp中定义了一个cpu():函数,但没有实现其功能, ...
- Travis CI Could not find or load main class org.gradle.wrapper.GradleWrapperMain 错误
问题 在 Travis CI 编译的时候出现 Error: Could not find or load main class org.gradle.wrapper.GradleWrapperMain ...
- POJ 3061 Subsequence 尺取法 挑战146页
---恢复内容开始--- Subsequence Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 10487 Accept ...