leaflet、leaflet-draw、leaflet-toolbar、leaflet-draw-toolbar源码编译
一、leaflet源码编译
1、安装cnpm
npm install -g --registry=https://registry.npm.taobao.org cnpm
2、使用cnpm安装所需模块
cnpm install rollup rollup-plugin-git-version rollup-plugin-json git-rev-sync
cnpm install -g uglify-js
3、编译
npm run build
4、说明
编译过程将使用rollup进行代码的打包,使用uglifyjs进行代码的混淆和压缩,编译的文件将输出到dist下
leaflet-src.js 源码打包文件
leaflet-src.esm.js 源码打包文件,esm即为EcmaScript Module其支持import from
leaflet.js 对源码打包文件进行混淆压缩后的文件
*.js.map JavaScript Source Map文件,参见:http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html
二、leaflet.draw源码编译
1、安裝cnpm
npm install -g --registry=https://registry.npm.taobao.org cnpm
2、使用cnpm安装所需模块
cnpm install jake uglify-js@2.8.29 uglifycss source-map git-rev
3、编译
npm run build
4、说明
安装uglify-js时应指定安装版本为2.8.29,使用最新版的uglify-js将导致错误,错误内容为“error: DefaultsError: `fromString` is not a supported option”
编译过程将使用jake进行代码的打包,使用uglifyjs进行代码混淆和压缩,使用和uglifycss进行样式文件的压缩,编译的文件将输出到dist下
leaflet.draw-src.js 源码打包文件
leaflet.draw-src.css 样式打包文件
leaflet.draw.js 对源码打包文件进行混淆压缩后的文件
leaflet.draw.css 对样式打包文件进行压缩后的文件
*.js.map JavaScript Source Map文件,参见:http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html
三、leaflet.toolbar源码编译
1、安裝cnpm
npm install -g --registry=https://registry.npm.taobao.org cnpm
2、使用cnpm安装所需模块
cnpm install -g grunt
cnpm install matchdep
cnpm install grunt grunt-autoprefixer grunt-bump grunt-contrib-clean grunt-contrib-coffee grunt-contrib-concat grunt-contrib-cssmin grunt-contrib-jshint
cnpm install grunt-contrib-less grunt-contrib-nodeunit grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect grunt-gh-pages grunt-mocha grunt-karma
cnpm install karma karma-mocha karma-phantomjs-launcher karma-chrome-launcher karma-firefox-launcher karma-safari-launcher karma-mocha-reporter karma-coverage
cnpm install leaflet chai sinon@1.10.3
3、编译
打开终端执行:grunt default,再打开一个终端执行:grunt build:js
打开终端执行:grunt test 执行测试代码
4、说明
grunt 编译工具:https://www.gruntjs.net/
四、leaflet-draw-toolbar源码编译
1、安裝cnpm
npm install -g --registry=https://registry.npm.taobao.org cnpm
2、使用cnpm安装所需模块
cnpm install -g grunt
cnpm install matchdep
cnpm install grunt grunt-autoprefixer grunt-bump grunt-contrib-clean grunt-contrib-coffee grunt-contrib-concat grunt-contrib-cssmin grunt-contrib-jshint
cnpm install grunt-contrib-less grunt-contrib-nodeunit grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect grunt-contrib-copy grunt-gh-pages grunt-mocha grunt-karma
cnpm install karma karma-mocha karma-phantomjs-launcher karma-chrome-launcher karma-firefox-launcher karma-safari-launcher karma-mocha-reporter karma-coverage
cnpm install leaflet leaflet-draw leaflet-toolbar chai sinon@1.10.3
3、编译
打开终端执行:grunt default,再打开一个终端执行:grunt build:js
打开终端执行:grunt test 执行测试代码
4、说明
grunt 编译工具:https://www.gruntjs.net/
leaflet、leaflet-draw、leaflet-toolbar、leaflet-draw-toolbar源码编译相关推荐
- leaflet+geoserve+jquery实现简单Webgis系统(附源码下载)
1.基于leaflet的小系统,源码1000多行,能注释的我都注释了,运行没有任何问题,源码下载链接在评论区: 2.里面用到了很多插件,大部分插件都是使用BootCDN的复制<script> ...
- leaflet+postgres+postgis(附源码下载)
前端使用Jquery和leaflet展示地图,前端jquery封装的ajax通过js的后端运行环境node.js实现和postgres空间数据库的交互.主要实现功能(源代码下载链接在评论区): 1.数 ...
- 【ToolBar】Android ToolBar之完全解析
原文地址:Toolbar:上位的小三 炮兵 镇楼 Toolbar是Android 5.0中新引入的一个控件,其出现的目的就是为了取代ActionBar,在讲解Toolbar之前我们还是来恶补一下关于A ...
- Leaflet文档阅读笔记-Leaflet on Mobile笔记
目录 CSS和HTML改如何设置 定位功能 CSS和HTML改如何设置 如下的设置: body {padding: 0;margin: 0; } html, body, #map {height: 1 ...
- leaflet 结合 Echarts4 实现散点图(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
- leaflet 结合 d3.js 实现 geojson 数据地形剖面分析(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
- leaflet地图截图批量导出(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
- Angular + Leaflet 实现房源数据可视化(附github源码)
这是什么?租房信息展示平台 宏观的租房数据可视化 微观的房源信息展示 多条件搜索 等等 链接 地图搜租房 来龙去脉 受 @李国宝 的地图搜租房启发,利用其提供的开放API,配合自己在前端和地理信息 ...
- C#开发APP,ToolBar控件在Smobiler中的使用方式【附案例源码】——Smobiler移动开发平台...
控件说明 底部工具栏控件. 效果演示 其他效果 该界面为仿淘宝UI制作的一个简单的UI模板,源码获取方式请拉至文章末尾. 特色属性 属性 属性说明 Direction(相对布局) 容器主轴方向. Fl ...
最新文章
- 37 windows_37_Thread_InterLock 线程-原子锁
- android之实现各个组件点击事件监听
- MindManager 报错:Click to restart mindjet player 解决方法
- 一个有趣的python排序模块:bisect
- 【30集iCore3_ADP出厂源代码(ARM部分)讲解视频】30-7底层驱动之滴嗒定时器
- CSS兼容IE6,IE7,FF的技巧(COPY来的,还没看)
- 【转】Azure Messaging-ServiceBus Messaging消息队列技术系列2-编程SDK入门
- 算法竞赛入门经典 第五章总结1
- 深度解析DDD中台和微服务设计
- Gradle 3.0.0设置Apk文件输出命名
- PHP开源的项目管理软件
- 07 SQL优化技术
- 麻瓜编程python web_python web麻瓜编程教程
- Yarn FairSheduler使用FairSharePolicy计算Fair Share的规则、原理和代码实现
- tcp too many orphaned sockets 问题引发的思考
- 如何通过QQ群做网站推广
- 深度学习阅读导航 | 04 FPN:基于特征金字塔网络的目标检测
- 【新知实验室】腾讯云TRTC实时音视频体验
- 打开WPS或office,提示运行时错误‘424’或 运行错误‘429’,ActiveX部件不能创建对象
- bidirectional PIM