Leaflet开发入门

简介: Leaflet开发入门

开发环境配置

电子地图已经渗透到O2O、生活服务、出行等领域,传统的GIS也孕育着互联网基因。在国内互联网电子地图领域,百度地图和高德地图较为出色,天地图作为国家地理信息公共服务平台,推出了面向互联网的公众版在线地图服务与API。国内在开放源代码这一方面做得远远不够,相比而言国外开源代码较多且丰富,如人气较高的OpenLayers、Leaflet、Mapbox GL等。

简单而言,Leaflet就是一个开源的前端地图交互类库,具有轻量级、支持移动端、丰富的插件资源等特点。2016年9月27日,Leaflet 1.0版本发布,越来越多的开发者加入社区,成为Leaflet的忠实用户,使得Leaflet的生态逐渐壮大。目前,Leaflet强大的开源库插件涉及地图应用的各个方面,包括地图服务、数据提供、数据格式、地理编码、路线搜索、地图控件等类型的插件。Leaflet官网的网址为http://leafletjs.com,GitHub项目的网址为https://github.com/Leaflet


使用Leaflet开发WebGIS应用,先要配置Leaflet开发环境,这也是Leaflet开发的必备步骤。

(1)获取Leaflet开发库。Leaflet是一个免费的开源库,用户可以从Leaflet官网下载,单击其官网首页的“Download”链接进入资源页面下载Leaflet开发库,

用户也可以从GitHub上的Leaflet项目资源中获取Leaflet开发库。在Leaflet的资源页面中,提供了当前最新版本的Leaflet开发库,Leaflet开发库分别提供了Leaflet开发必备的核心开发库、样式文件、图片资源。

Leaflet开发库如图

,包括如下内容。

Leaflet开发库

• leaflet.js(leaflet-src.js):核心开发库,集成当前Leaflet的所有核心功能,其中leaflet-src.js为源码,供调试时使用。

• leaflet.css:样式类,包含Leaflet的所有默认样式信息。

• images:图像资源文件。

需要注意的是,使用的是Leaflet V1.3.3版本开发库,其官网会即时发布当前最新版本的Leaflet开发库。

(2)选定一个开发工具。针对PC端的Web应用需求,Leaflet作为一个基于JavaScript的WebGIS客户端开发库,本质就是HTML+JavaScript脚本的Web客户端开发,可以使用DreamWeaver等工具开发网页,还可以直接使用文本编辑器等编写网页。目前,除了DreamWeaver工具,开发Web应用时还有很多集成开发环境(Integrated Development Environment,IDE)供大家选择。.NET体系就是微软的Visual Studio,包括2010、2012、2015、2019等多个版本;Java的开发环境包括Eclipse、JBuilder、NetBeans等,这些都是主流的Web应用开发环境。

由于Leaflet是纯客户端的开发库,用户可以根据自己的喜好选择合适的开发工具。如果涉及后端开发,则建议根据.NET或Java体系类别选择相应的集成开发环境。在此,使用Microsoft Visual Studio 2010(简称VS2010)作为开发工具,部分功能实例涉及的后端开发采用.NET实现。用户可以从微软官网下载Microsoft Visual Studio 2010的安装程序。Leaflet以简单、易用、高效为开发理念,设计轻巧灵活,非常易于理解和上手,这也是它被众多用户喜爱的原因之一。Leaflet作为备受青睐的开源地图开发库,主要有以下几个特性。

(1)友好的移动端应用。Leaflet是轻量级、跨平台的,其压缩库的容量约为30KB,非常适应移动端应用场景,并且PC上的所有效果均能在移动端上无缝呈现,可以轻松在iPad、iPhone和Android等移动端构建地图应用。

(2)丰富的可视化效果。Leaflet可以轻松地实现自定义标注功能,并支持视频流。在标注图片时可以设置图标图片和阴影图片,让标注更有立体感;同时可以设置锚点的位置,让图标定位更加精准;另外,还可以像添加一个地图图层一样添加视频文件并在地图上展示。此外,还有很多诸如时空动画、热力图、聚合点等效果都可以轻松实现,增强可视化效果。

(3)出众的渲染性能。Leaflet采用HTML5实现高性能渲染,基于出色的地图渲染引擎,将会呈现出更加细腻流畅的地图,可以轻松支持大数据量级的点数据渲染,渲染性能非常出众。

(4)支持多种数据格式。Leaflet支持大部分服务标准与数据格式,并且可以自定义扩展,使用户在项目对接上无后顾之忧。GeoJSON是一种空间数据格式,Leaflet对此空间数据格式支持较好,也全面支持OGC服务规范(WMS、WFS等)。

(5)灵活的可扩展性。Leaflet受欢迎的主要因素之一就是其灵活的可扩展性,这让其在社区中拥有众多的扩展插件,满足各种功能需求。Leaflet可与专业GIS服务平台结合,丰富的GIS前端开发框架与专业的GIS服务平台强强联合,无缝对接,已经成为GIS领域应用开发的主力军。

开发移动端Hybrid App或移动Web App

,也是基于HTML5+JavaScript开发,但两种方式略有不同。移动端Hybrid App是原生开发嵌入H5页面,一般要借助移动端原生开发的工具,如Android开发使用主流的Eclipse或Android Studio工具、iOS开发使用苹果的Xcode等。移动Web App是为移动浏览器设计的基于Web的应用,与普通Web开发类似,应用部署在服务器端,移动端直接通过浏览器访问,不需要在设备上下载安装。因此,对于移动Web App方式,用户在进行移动网页开发时可以选择与PC端Web应用开发相同的开发工具。


目录
相关文章
|
存储 前端开发 JavaScript
GIS前端编程-Leaflet插件发布
GIS前端编程-Leaflet插件发布
206 0
|
自然语言处理 PyTorch 算法框架/工具
安装ModelScope问题之官方指导的环境搭建会报错如何解决
本合集将提供ModelScope安装步骤、配置要求和环境准备,以便用户顺利启动ModelScope进行模型开发和测试。
391 0
|
前端开发 JavaScript 定位技术
GIS前端编程-Leaflet插件扩展
GIS前端编程-Leaflet插件扩展
265 0
|
存储 前端开发 异构计算
使用WebGL绘制热力图
使用WebGL绘制热力图
376 0
|
10月前
|
物联网 vr&ar Android开发
移动应用与系统:探索现代移动技术的发展趋势####
【10月更文挑战第29天】 本文深入探讨了移动应用开发和移动操作系统的最新趋势,分析了它们对日常生活和行业的影响。随着智能手机的普及和技术的进步,移动应用和操作系统不断进化,以满足用户的需求和期望。文章将通过具体案例和数据分析,揭示这一领域的创新点和未来发展方向。 ####
|
11月前
|
JavaScript 前端开发 开发者
如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。
【10月更文挑战第9天】随着前端开发技术的发展,代码规范和格式化工具变得至关重要。本文介绍如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。通过安装插件、配置 ESLint 和 Prettier,以及设置 VSCode,实现代码实时检查和格式化,确保代码风格一致。
1872 2
|
前端开发 JavaScript Android开发
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
|
11月前
|
Java Linux Windows
windows版java版本管理器
本文介绍了如何在Windows上使用JDK版本管理器jvms来管理多个Java版本,包括下载、初始化、列出本地安装的JDK版本、在线查看可用版本、切换和安装特定版本的Java。
1995 0
windows版java版本管理器
|
缓存 监控 算法
【Java】Java内存溢出:原因、预防和解决方法
【Java】Java内存溢出:原因、预防和解决方法
1166 2
|
算法 安全 数据挖掘
解锁编程之门:数论在算法与加密中的实用应用
解锁编程之门:数论在算法与加密中的实用应用