- 浏览: 65024 次
文章分类
最新评论
-
小色帝:
我是天才是打发
Jquery实现的Tabs页 -
小色帝:
小色帝 写道1111而温热
Jquery实现的Tabs页 -
小色帝:
1111而温热
Jquery实现的Tabs页
开源轻量级移动端友好的JS地图库——leaflet学习教程
Leaflet 是一个为建设交互性好适用于移动设备地图,而开发的现代的、开源的 JavaScript 库。代码仅有 33 KB,但它具有开发在线地图的大部分功能。Leaflet设计坚持简便、高性能和可用性好的哲学思想,在所有主要桌面和移动平台能高效运作,在现代浏览器上会利用HTML5和CSS3的优势,同时也支持旧的浏览器访问。支持插件扩展,有一个友好、易于使用的API文档和一个简单的、可读的源代码。Leaflet强大的开源库插件涉及到地图应用的各个方面包括地图服务,数据提供,数据格式,地理编码,路线和路线搜索,地图控件和交互等类型的插件共有140多个。这些控件 丰富leaflet的功能,同时也可以十分方便的实现自定义的控件具有良好的可扩展性。
官网
--------------------------------------------------------------------------------
###LeafLet快速入门教程
本教程将一步一步的指导你如何使用Leaflet加载地图、使用标记,折线和弹出窗口,处理事件。
####如何用leaflet快速加载地图
• 引入CSS文件 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
• 引用JavaScript <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
• 页面添加一个div作为地图的容器 <div id="map"></div>
• 确定map容器的高度 #map { height: 180px; }
####设置地图
设置地图中心和缩放级别
var map = L.map('map').setView([51.505, -0.09], 13);
添加图层 L.tileLayer('http://{s}.tiles.mapbox.com/v3/MapID/{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(map);
####添加标注、圆形、多边形
#####添加标注
var marker = L.marker([51.5, -0.09]).addTo(map);
#####添加圆形
var circle = L.circle([51.508, -0.11], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(map);
#####添加多边形
var polygon = L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(map);
#####为覆盖物标注、圆、多边形添加弹出气泡
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");
#####处理事件
function onMapClick(e) {
alert("You clicked the map at " + e.latlng);
}
map.on('click', onMapClick);
http://www.thinkgis.cn/topic/541574ff25b631863b00eda6
Leaflet 是一个为建设交互性好适用于移动设备地图,而开发的现代的、开源的 JavaScript 库。代码仅有 33 KB,但它具有开发在线地图的大部分功能。Leaflet设计坚持简便、高性能和可用性好的哲学思想,在所有主要桌面和移动平台能高效运作,在现代浏览器上会利用HTML5和CSS3的优势,同时也支持旧的浏览器访问。支持插件扩展,有一个友好、易于使用的API文档和一个简单的、可读的源代码。Leaflet强大的开源库插件涉及到地图应用的各个方面包括地图服务,数据提供,数据格式,地理编码,路线和路线搜索,地图控件和交互等类型的插件共有140多个。这些控件 丰富leaflet的功能,同时也可以十分方便的实现自定义的控件具有良好的可扩展性。
官网
--------------------------------------------------------------------------------
###LeafLet快速入门教程
本教程将一步一步的指导你如何使用Leaflet加载地图、使用标记,折线和弹出窗口,处理事件。
####如何用leaflet快速加载地图
• 引入CSS文件 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
• 引用JavaScript <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
• 页面添加一个div作为地图的容器 <div id="map"></div>
• 确定map容器的高度 #map { height: 180px; }
####设置地图
设置地图中心和缩放级别
var map = L.map('map').setView([51.505, -0.09], 13);
添加图层 L.tileLayer('http://{s}.tiles.mapbox.com/v3/MapID/{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(map);
####添加标注、圆形、多边形
#####添加标注
var marker = L.marker([51.5, -0.09]).addTo(map);
#####添加圆形
var circle = L.circle([51.508, -0.11], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(map);
#####添加多边形
var polygon = L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(map);
#####为覆盖物标注、圆、多边形添加弹出气泡
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");
#####处理事件
function onMapClick(e) {
alert("You clicked the map at " + e.latlng);
}
map.on('click', onMapClick);
http://www.thinkgis.cn/topic/541574ff25b631863b00eda6
发表评论
-
项目里 Jquery 日期空间,vilidation,highchars控件
2017-03-06 11:24 0项目中用到了一个Jquery 日期控件,挺好用的,特意总结下 ... -
jquery常用事件(整理)
2017-02-13 17:47 233Jquery事件 (一)、事件 ... -
$("parent > child")、$("A B")、$("div#test")、$("div,#test")、$(".test","div")
2016-12-15 10:38 299这个标题似乎有些奇怪,但这些都是合法有效的jQuery选择器。 ... -
type="button" ,"submit" 的区别(转)
2016-07-22 11:16 450type="button" ,"submit" 的区别 ... -
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2016-07-21 14:10 390Jquery中$.get(),$.post(),$.a ... -
Ztree用法事例
2016-05-17 01:11 497【简介】 zTree 是利用 jQuery 的核心代码,实现一 ... -
jQuery 数据缓存data(name, value)详解及实现
2016-05-16 10:35 397本文要讨论的是最流行的JavaScript框架jQuery的数 ... -
jQuery数据缓存$.data 的使用以及源码解析
2016-05-16 00:49 392jQuery数据缓存$.data 的使用以及源码解析 实现原 ... -
jQuery.data()
2016-05-16 00:48 299jQuery.data() 所属分类:数据操作 | 工具类 E ... -
jQuery之AJAX
2016-05-16 00:16 378jQuery之AJAX 一、load() 加载页面数据 ... -
JQuery OrgChart
2016-05-15 12:36 540Query OrgChart 是一个jQuery插件能够让帮你 ... -
JS横向树(组织结构)
2016-05-15 11:19 2898最近看到不少人有类似的需求,实现组织架构的横向展开,显示,无聊 ... -
我也来说说怎么封装jQuery插件
2016-05-14 19:32 367http://www.w3cfuns.com/notes/17 ... -
echarts 各个属性意义注释
2016-05-14 18:27 1031<!DOCTYPE html PUBLIC " ... -
jQuery插件原来如此简单 jQuery插件的机制及实战
2016-05-14 01:00 451jQuery插件原来如此简单 ... -
Echarts 仪表盘实例
2016-05-14 00:51 5228HTML 首先引入Echarts,然后在需要放置图表的地方加上 ... -
Jquery封装对象实例
2016-05-14 00:48 534jQuery自定义类封装 jQuery自定义类封装: ( ... -
Jquery 选择器总结
2015-04-15 19:21 478jQuery 的选择器可谓之强 ... -
关于SS框架后台代码开发规范实例
2013-02-01 17:20 961工作半年了,接触的第一个项目就是SS为后台的框架的开发。 ... -
jquery 里面的.find() .each() .parent() .value(parseInt())
2013-02-01 09:33 19871.find() 方法获得当前元素集合中每个元素的后代,通过选 ...
相关推荐
Leaflet:移动端友好的交互式地图 JavaScript 库
下载如有问题,可私信博主。下载前建议先查看博客内容,其地址为: https://blog.csdn.net/QQ98281642/article/details/119725148
下载如有问题,可私信博主。下载前建议先查看博客内容,其地址为:https://blog.csdn.net/QQ98281642/article/details/123375564
基于leaflet的轻量级地图之路,简要介绍leaflet类库开发及其应用。
1. leaflet风向粒子资源 2. leaflet-velocity.js 3. leaflet-velocity.css 4. wind-global.json
leaflet.polylineDecorator.js
Leaflet.js Essentials 学习leaflet的好书籍,书中有大量的例子
基于Leaflet和现代Web技术栈全新构建, 集成了领先的开源地图库、可视化库,提供了全新的大数据可视化、实时流数据可视化功能,通过本产品可快速实现浏览器和移动端上美观、流畅的地图呈现与空间分析。 框架主要目的...
leaflet v1.3.4 API官方库文件( August 21, 2018) Leaflet 是一个为建设移动设备友好的互动地图,而开发的现代的、开源的轻量级 JavaScript 库。它是由 Vladimir Agafonkin 带领一个专业贡献者团队开发。Leaflet设计...
前端开源库-ives-leaflet-ajax艾夫斯传单Ajax,传单Ajax的自定义版本
前端开源库-leaflet-viewpoint传单视点,多方向传单标记
最新版本1.03,供不喜欢在官网下载的同鞋拿走
天地图配置
leaflet案例代码 直接运行 地图交互 获取图层信息 视频播放 地图缩放级别显示
【解决问题】:如何学习leaflet更高效呢?一张较好的思维导图能够满足核心知识点的总结。通过学习,可以上传解析和导出数据:上传KML、KMZ、Geojson、shp、zip等,导出Image、pdf、geojson、GML、polyline等,还能...
Leaflet 是一个为建设移动设备友好的互动地图,而开发的现代的、开源的 JavaScript 库。它是由 Vladimir Agafonkin 带领一个专业贡献者团队开发,虽然代码仅有 33 KB,但它具有开发人员开发在线地图的大部分功能。 ...
地图内容包括:点线面的绘制、编辑,信息弹出框,放大缩小等等,leaflet是领先的开源javascript库,用于移动友好的交互式地图。它只有38kb的js,拥有大多数开发人员所需要的所有映射功能。leaflet设计简单,性能和...
Leaflet1.0.3地图中文API,Leaflet是一个开源的JavaScript库,对移动端友好且有很好的交互性。 大小仅仅只有 33 KB, 同时具有大多数地图所需要的特点。 Leaflet设计的非常简单易懂, 同时具有很好的性能和易用性。 它...
前端项目-leaflet.pm,在传单1.0中编辑几何层的传单插件
webgis-leaflet 基础功能代码,本资源仅包含 leaflet 基础功能,无插件功能,对于leaflet基础功能上手,leaflet学习,可提供入门级代码,主要方便查阅基础功能,最少代码使用等。 其中代码均在《WebGis之leaflet全面...