leaflet-webpack 入门开发系列一初探篇（附源码下载）
前言
leaflet-webpack 入门开发系列环境知识点了解：
- node 安装包下载
webpack 打包管理工具需要依赖 node 环境，所以 node 安装包必须安装，上面链接是官网下载地址- webpack 配置介绍文档
详细的 webpack 文档配置介绍，适合新手查看，我也是边看边学- vscode 安装包下载，我这边用 vscode工具编译开发前端项目，个人觉的这款工具还不错
- leaflet api文档介绍，详细介绍 leaflet 每个类的函数以及属性等等
- leaflet 在线例子
- leaflet 插件，leaflet 的插件库，非常有用
我之前有计划写一系列关于 leaflet 入门开发文章，只是一直没什么时间来整理，最近刚好单位有个 WebGIS 项目是用 leaflet 结合 webpack 来管理使用的，所以，开始了本篇文章 leaflet-webpack 入门开发系列一初探篇，对于 webpack 这个管理工具平台，我也是学习阶段，跟大家一起学习交流，写的不好之处，望见谅。
环境搭建
- 安装 node.js，笔者版本为：10.15.3
- 下载安装 vscode
- demo 项目工程文件目录以及关键代码讲解
dist webpack 打包编译后的文件夹
dist/index.html 地图主页
src/index.js 地图初始化代码
package.json 记录了项目的配置信息，包括名称、版本、许可证等元数据，也会记录所需的各种模块，包括 执行依赖，和开发依赖
webpack.config.js webpack 的配置文件
- index.html
<html>
<head>
<title>Leaflet入门开发系列Demo</title>
</head>
<body>
<div id="map" style="width: 100%; height: 100%;"></div>
<script src="bundle.js"></script>
</body>
</html>
- index.js
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
/* This code is needed to properly load the images in the Leaflet CSS */
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
iconUrl: require('leaflet/dist/images/marker-icon.png'),
shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
}); //const map = L.map('map');
const map = L.map("map", {
attributionControl: false
});
const defaultCenter = [23.1441, 113.3693];
const defaultZoom = 15;
const basemap = L.tileLayer('https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}');
const marker = L.marker(defaultCenter);
map.setView(defaultCenter, defaultZoom);
basemap.addTo(map);
marker.addTo(map);
//监听地图点击事件
map.on("click",(evt)=>{
console.log(evt);
})
- 在 vscode 新建终端，输入 npm install 或者 npm i, 安装环境需要的依赖包，若无报错信息，则进行下一步
- npm run build，打包编译web项目
- npm start，node 启动 web 项目打包到浏览器运行看效果
- 如果正常出现该页面，则运行成功
完整demo源码见小专栏文章尾部：GIS之家小专栏
文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波
leaflet-webpack 入门开发系列一初探篇（附源码下载）的更多相关文章
- leaflet-webpack 入门开发系列六矢量瓦片(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- leaflet-webpack 入门开发系列五地图卷帘(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- openlayers5-webpack 入门开发系列一初探篇（附源码下载）
前言 openlayers5-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载 ...
- leaflet-webpack 入门开发系列四图层控件样式优化篇(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- cesium-webpack 入门开发系列一初探篇（附源码下载）
前言 cesium-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 we ...
- 使用jQuery和CSS3制作数字时钟(jQuery篇) 附源码下载
HTML 和上一篇文章:使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构,只是多了个>date用来展示日期和星期的. <div id="clock" ...
- arcgis api 3.x for js 入门开发系列批量叠加 zip 压缩 SHP 图层优化篇（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- openlayers4 入门开发系列之地图导航控件篇（附源码下载）
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- openlayers4 入门开发系列之地图展示篇（附源码下载）
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
随机推荐
- 什么是StatefulSet
简单说来,StatefulSet其实就是一种升级版的Deployment,大体工作原理如下 1.为每个Pod名字按顺序编号,按顺序启动 # kubectl get po -o wide -l app= ...
- golang 处理 json 结构体
首先 我们来看一下这个json 字串 { "resp": { ", "respMsg": "成功", "app" ...
- Java每日一面(Part1:计算机网络)[19/10/21]
作者:故事我忘了￠个人微信公众号:程序猿的月光宝盒 1.UDP简介 1.1UDP报文结构: Source Port:源端口 Destination Port:目标端口 Length:数据包长度 C ...
- BurpSuite的基础使用，这个教程有“坑”？
BurpSuite简介 BurpSuite是一款辅助渗透的工具,可以给我们带来许多便利.Burp给我们提供了简单的HTTP抓包改包,数据枚举模块,以及各种安全漏洞的手动式扫描与爬虫式扫描,还有很多经常 ...
- Swift设置只读（readOnly）属性
class ReadOnly { private(set) var name: String init(_ name: String) { self.name = name } } let obj = ...
- WPF datagrid 列按钮使用
原文:WPF中使用DataGrid时操作列按钮问题 <DataGrid x:Name="datagrid" AutoGenerateColumns="Fal ...
- MarkDown使用小技巧
写作目的 笔者看完一些MarkDown入门文字后,发现很多文档对一些容易遇到的细微问题缺少解释.本文意欲稍作补充. 目标读者 使用MarkDown仅为了排版出更好看的文章,而不关注技术细节,不懂HTM ...
- HashMap默认加载因子为什么选择0.75？(阿里)
Hashtable 初始容量是11 ,扩容 方式为2N+1; HashMap 初始容量是16,扩容方式为2N; 阿里的人突然问我为啥扩容因子是0.75,回来总结了一下: 提高空间利用率和 减少查询成本 ...
- java异常处理机制详解
java异常处理机制详解 程序很难做到完美,不免有各种各样的异常.比如程序本身有bug,比如程序打印时打印机没有纸了,比如内存不足.为了解决这些异常,我们需要知道异常发生的原因.对于一些常见的异常,我 ...
- Python参数类型以及实现isOdd函数，isNum函数，multi函数，isPrime函数
Python参数类型以及实现isOdd函数,isNum函数,multi函数,isPrime函数 一.Python参数类型 形参:定义函数时的参数变量. 实参:调用函数时使用的参数变量. 参数传递的过程 ...