GIS前端编程-Leaflet插件发布

简介: GIS前端编程-Leaflet插件发布

Leaflet具有强大的插件生态系统。Leaflet插件页面列出了几十个很好的插件,并且每周都有很多插件加入插件资源库中供用户使用。

用户根据一定的标准规范完成插件的功能和相关文件说明,然后上传文件,通过审核后即可正式完成插件的发布。Leaflet插件发布的流程如图所示。

图Leaflet插件发布的流程

Leaflet插件规范(准备文件)

Leaflet插件的开发和发布,需要遵循1. Leaflet插件规范(准备文件)

Leaflet插件的开发和发布,需要遵循些质量标准和扩展规范。

(1)演示文件。

• 存储。Leaflet插件的存储位置是一个单独的GitHub库。

• 命名。插件命名形式为Leaflet.MyPluginName,也可以使用其他形式(如leaflet-my-plugin-name),只要确保在名称中包含Leaflet一词,就可以清楚地看到它是一个Leaflet插件。

• 实例文件。在发布插件的文件中要包含一个demo文件。因为,人们在寻找插件时,会先浏览这个插件的实例文件。演示最简单的方法是使用GitHub页面,最好在存储库中创建一个GitHub页面分支并向它添加一个index.html页面。

• 自述文件。需要建立一个README.md(或者链接一个内容相似的网站),最低限度应该包含以下事项:插件名称、一个简单简洁的描述、要求(版本、其他外部依赖项、浏览器或设备兼容性)、演示的链接、插件说明、简单实例代码。

• 许可文件。每个开源存储库都应该包含许可文件,如MIT License和BSD 2-Clause License。

(2)代码。

• 文件结构。保持文件结构干净、简单,这样能够使其他用户很容易阅读你的插件文件,进行快速学习。一个最基本的插件文件结构代码如下:

一个比较复杂的插件文件结构代码如下:

• 代码约定。每个人都有不同的习惯,但编写的代码要符合人们的阅读习惯。

• API插件。不要在插件中公开全局变量。如果有一个新类,则直接把它放在L命名空间(L.MyPlugin)中。如果继承了一个现有类,则使其成为子属性(L.TileLayer.Banana)。每个类都应该用驼峰式命名法进行命名,如L.TileLayer.Banana。如果想要给现有的Leaflet类添加新的方法,则可以这样做L.Marker.include({myPlugin: …})。

函数、方法、属性和工厂名称应该使用驼峰式命名。类名字母大写应该遵循驼峰式命名规则。

如果函数中有很多参数,则考虑定义一个参数对象(在可能的情况下设置默认值,这样用户就不需要指定所有的值),代码如下:

(3)NPM发布。NPM(节点打包模块)是JavaScript的包管理器和代码存储库。在NPM上发布模块允许其他用户快速查找和安装插件,以及其他依赖于插件的插件。NPM有一个优秀的开发者指南来帮助用户完成这个过程。当用户发布插件时,就在package.json文件中添加一个依赖于Leaflet的依赖项。当用户安装软件时,Leaflet将会被自动安装。

下面是一个package.json文件,用于描述一个Leaflet插件,代码如下:

(4)模块加载程序。模块加载程序(RequireJS和Browserify)实现了模块系统,如AMD(Asynchronous Module Definition)模块和CommonJS模块,以允许用户模块化加载代码。通过遵循基于通用模块定义的模式,可以将对AMD模块和CommonJS模块加载程序的支持添加到Leaflet插件中,代码如下:

现在,插件可以作为AMD模块和CommonJS模块使用,并且可以用于RequireJS和Browserify的模块加载程序中。

2. Leaflet插件上传(上传文件)

当插件发布成功后,该插件会在Leaflet官网的插件列表中显示出来。发布一个Leaflet插件的步骤如下。

(1)获取Leaflet存储库。

(2)确认类别:在docs/plugins.md文件中,找到插件应该插入的部分,添加与插件相关的信息和链接。

(3)提交代码。

(4)通过审核。

一旦提交请求,Leaflet维护者将快速查看用户的插件。如果上传的Leaflet插件符合规范要求,则会很快通过审核,提示插件上传成功。


目录
相关文章
|
3天前
|
前端开发 数据可视化 数据挖掘
前端开发者的福音:这些插件让你轻松应对各种复杂需求!
前端开发领域充满创意与挑战,面对复杂需求,开发者常感力不从心。本文通过三个真实案例,介绍如何利用Chart.js、ESLint和Ant Design等强大插件,解决数据可视化、代码质量和UI组件复用等问题,提高开发效率,创造更出色的前端作品。
11 3
|
28天前
|
前端开发 JavaScript
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
268 8
|
1月前
|
设计模式 前端开发 JavaScript
前端编程的异步解决方案有哪些?
本文首发于微信公众号“前端徐徐”,介绍了异步编程的背景和几种常见方案,包括回调、事件监听、发布订阅、Promise、Generator、async/await和响应式编程。每种方案都有详细的例子和优缺点分析,帮助开发者根据具体需求选择最合适的异步编程方式。
63 1
|
1月前
|
存储 前端开发 Java
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
本文介绍了使用Kaptcha插件在SpringBoot项目中实现验证码的生成和验证,包括后端生成验证码、前端展示以及通过session进行验证码校验的完整前后端代码和配置过程。
90 0
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
|
28天前
|
资源调度 前端开发 安全
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
64 0
|
2月前
|
运维 前端开发
前端使用antdesign导出插件跨域问题
前端使用antdesign导出插件跨域问题
32 1
|
3月前
|
前端开发 安全 测试技术
[译]一种基于模块联邦的插件前端
[译]一种基于模块联邦的插件前端
|
3月前
|
JavaScript 前端开发 开发者
【颠覆你的前端世界!】VSCode + ESLint + Prettier:一键拯救Vue代码于水深火热之中,打造极致编程体验之旅!
【8月更文挑战第9天】随着前端技术的发展,保持代码规范一致至关重要。本文介绍如何在VSCode中利用ESLint和Prettier检查并格式化Vue.js代码。ESLint检测代码错误,Prettier保证风格统一。首先需安装VSCode插件及Node.js包,然后配置ESLint和Prettier选项。在VSCode设置中启用保存时自动修复与格式化功能。配置完成后,VSCode将自动应用规则,提升编码效率和代码质量。
470 1
|
3月前
|
前端开发 开发者
在前端开发中,webpack 作为模块打包工具,其 DefinePlugin 插件可在编译时动态定义全局变量,支持环境变量定义、配置参数动态化及条件编译等功能。
在前端开发中,webpack 作为模块打包工具,其 DefinePlugin 插件可在编译时动态定义全局变量,支持环境变量定义、配置参数动态化及条件编译等功能。本文阐述 DefinePlugin 的原理、用法及案例,包括安装配置、具体示例(如动态加载资源、配置接口地址)和注意事项,帮助开发者更好地利用此插件优化项目。
89 0
|
28天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
118 2