leaflet创建简单地图
一、leaflet介绍:
1.Leaflet 是一个为建设移动设备友好的互动地图,而开发的现代的、开源的 JavaScript 库。它是由 Vladimir Agafonkin 带领一个专业贡献者团队开发,虽然代码仅有 33 KB,但它具有开发人员开发在线地图的大部分功能。
2.Leaflet设计坚持简便、高性能和可用性好的思想,在所有主要桌面和移动平台能高效运作,在现代浏览器上会利用HTML5和CSS3的优势,同时也支持旧的浏览器访问。支持插件扩展,有一个友好、易于使用的API文档和一个简单的、可读的源代码。
官网:http://leafletjs.com/
二、快速入门
1.在html页面头部加入CSS file 和JavaScript file
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
2.在body里面定义一个层
<div id="map"></div>
3.加入js代码来实现地图的显示
<script type="text/javascript">
var mymap = L.map('mapid').setView([35.5,104.6],9);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
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,
}).addTo(mymap);
var marker = L.marker([35.5,104.6]).addTo(mymap);
var circle = L.circle([35.5,104.8], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(mymap);
var polygon = L.polygon([
[35.5, 104.3],
[35.5, 104.4],
[35.5, 104.5]
]).addTo(mymap);
</script>
下面我来一一介绍一下js代码中所用到的几个函数及其里面的参数:
map方法:实例化了<DIV>元素的DOM对象ID的地图和一个可选的对象文字与地图选项。
参数:他的第一个参数可以是一个id也可以是一个html元素,后面的可选参数就不在这里做一一介绍了。
setView方法:设置地图的视图(地理中心和缩放)与给定的动画选项。
参数:第一个参数是地理位置的纬度和经度。通过这个地理位置的经纬度将会在地图页面打开时显示在页面的中心位置。
第二个参数是设置可缩放值。后面的可选参数就不做介绍了。
tileLayer方法:用于在地图上加载和显示瓷砖层
参数:第一个参数是一个url:{s}代表可选的子领域,连续的被用来帮助浏览器并行请求每个域的限制。子领域值可在后面的选项中指定。a或b或c,在默认情况下可省略。
后面好多可选的参数就不在这里一一指定了。
后面的marker、circle、polygon方法分别是用来在地图上添加标记,圆和多边形的。
leaflet创建简单地图的更多相关文章
- 使用Leaflet创建地图模块
背景 最近需要为某单位开发地图展示系统,因此开始涉略和使用Leaflet这个轻量级地图库. 创建基础地图需要以下几步 引入相关js和css文件,创建基础地图 <div id="map& ...
- google maps js v3 api教程(1) -- 创建一个地图
原文地址 google maps javascript官方文档:https://developers.google.com/maps/documentation/javascript/ 在创建地图之前 ...
- 创建Mesh->格子地图转NavMesh->可破坏墙壁
1. 前言 最近连续做了很多代码动态生成Mesh的工作,从动态生成修改瞄准范围的Mesh到可破坏的墙壁,以及之前写了一半导航网格生成. 想借此机会整理下最近的积累,如果在阅读过程中发现 ...
- HTML5创建高德地图
创建高德地图 功能真的很好很强大,有图有证据! 1.申请key值 去官网2.https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db ...
- [.NET] WebApi 生成帮助文档及顺便自动创建简单的测试工具
==========最终的效果图========== ==========下面开始干活:生成帮助文档========== 一.创建 WebApi 项目 二.找到 HelpPageConfig.cs 并 ...
- Web Service 的创建简单编码、发布和部署
最近,老大准备将已有的C/S架构项目中的通信部分做成通用,需要将其支持WebService为以后项目向着B/S架构升级做好铺垫,为此身为屌丝的我去各种百度WebService是个什么卵玩意,然后逐渐搭 ...
- Azure PowerShell (5) 使用Azure PowerShell创建简单的Azure虚拟机和Linux虚拟机
<Windows Azure Platform 系列文章目录> 本文介绍的是国外的Azure Global.如果是国内由世纪互联运维的Azure China,请参考这篇文档: Azure ...
- myeclipse(2015)中创建简单的Maven项目的步骤(用于生成可执行jar文件)------》myeclipse2015
利用MyEclipse的引导,可以很方便的创建简单的.用于生成可执行jar文件的Maven项目: 1.New -> Project... 选择 Maven Project, 点击Next > ...
- 使用Visual Studio创建简单的自己定义Web Part 部件属性
使用Visual Studio创建简单的自己定义Web Part 部件属性 自己定义属性使用额外的选项和设置拓展你的Web part部件.本文主要解说怎样使用Visual Studio创建简单的自己定 ...
随机推荐
- kendo ui 富文本编辑控件 Editor 实现本地上传图片,并显示
富文本编辑的组件有很多,大名鼎鼎的KENDO UI中自然也有,但是默认功能中,只能包含网络图片, 而如果要实现本地上传图片,KENDO UI也提供了相应的功能,但必须实现KENDO规定的多个接口, 而 ...
- Comet4J推技术在SSHE三大框架中应用-linux下亲测可用
Comet4J(Comet for Java)是一个纯粹基于AJAX(XMLHTTPRequest)的服务器推送框架,消息以JSON方式传递,具备长轮询.长连接.自动选择三种工作模式. 下载地址 co ...
- Lisp中编写宏的步骤以及规范
一.编写步骤 1.编写示例的宏调用以及它应当展开的代码,反之亦然. 2.编写从示例调用中生成手写展开式的代码. 3.确保宏抽象不产生"泄露". 二.遵循规则 1.除非有特殊理由,否 ...
- sharepoint webpart
SharePoint开发中,不仅仅是WebPart,我们都经常会使用的几个关键位置,如下: GAC: C:\Windows\assembly,也就是部署的位置: ISAPI位置,SharePoint ...
- Ternary Search Trees 三分搜索树
经常碰到要存一堆的string, 这个时候可以用hash tables, 虽然hash tables 查找很快,但是hash tables不能表现出字符串之间的联系.可以用binary search ...
- IOS系列swift语言之课时三
今天需要掌握的内容就是:闭包.类.结构体.属性(计算属性和延迟属性) 同样里面有一些题目,有兴趣的可以做一下. 首先我们需要知道什么是闭包?所谓的闭包就是一个代码块(一般是指函数以及被它捕获的成员变量 ...
- re模块汇总
text = 'The Attila the hun show' m = re.match('.',text)#任意单个字符 m.group() 'T' m = re.match('.*',text) ...
- app跳转openURL,兼容方法
- (void)openScheme:(NSString *)scheme { UIApplication *application = [UIApplication sharedApplicat ...
- 图情期刊要求2015(A,B,C类)
中国图书馆学报+情报学报+大学图书馆学报+图书情报工作+图书情报知识+情报理论与实践+国家图书馆学刊+情报杂志+图书与情报+情报科学+图书馆杂志+图书馆建设+情报资料工作+图书馆论坛+现代图书情报技术 ...
- 【UVA11082】Matrix Decompressing(有上下界的网络流)
题意:给出一个矩阵前i列所有元素的和,和前j行所有元素的和,求这个矩阵解压以后的原型.(答案不唯一) n,m<=20,1<=a[i,j]<=20 思路:这道题把边上的流量作为原先矩阵 ...