前言

leaflet-webpack 入门开发系列环境知识点了解:

我之前有计划写一系列关于 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 入门开发系列一初探篇(附源码下载)的更多相关文章

  1. leaflet-webpack 入门开发系列六矢量瓦片(附源码下载)

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

  2. leaflet-webpack 入门开发系列五地图卷帘(附源码下载)

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

  3. openlayers5-webpack 入门开发系列一初探篇(附源码下载)

    前言 openlayers5-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载 ...

  4. leaflet-webpack 入门开发系列四图层控件样式优化篇(附源码下载)

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

  5. cesium-webpack 入门开发系列一初探篇(附源码下载)

    前言 cesium-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 we ...

  6. 使用jQuery和CSS3制作数字时钟(jQuery篇) 附源码下载

    HTML 和上一篇文章:使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构,只是多了个>date用来展示日期和星期的. <div id="clock" ...

  7. arcgis api 3.x for js 入门开发系列批量叠加 zip 压缩 SHP 图层优化篇(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  8. openlayers4 入门开发系列之地图导航控件篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  9. openlayers4 入门开发系列之地图展示篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

随机推荐

  1. 【nodejs原理&源码杂记(8)】Timer模块与基于二叉堆的定时器

    目录 一.概述 二. 数据结构 2.1 链表 2.2 二叉堆 三. 从setTimeout理解Timer模块源码 3.1 timers.js中的定义 3.2 Timeout类定义 3.3 active ...

  2. iOS---------审核被拒(隔壁群发的)

    Hello, We are writing to let you know the results of your appeal for your app The App Review Board e ...

  3. Linux下使用 github+hexo 搭建个人博客04-next主题优化

    上篇我们说了 hexo 的优化,针对的站点的优化. 本篇讲解 next 主题的优化,包括:使用语言.前端页面显示宽度.菜单.侧栏.头像.添加或取消动画效果.打赏功能等等. 让页面排版更符合我们所要的功 ...

  4. SQL Server如何查看存储过程的执行计划

    有时候,我们需要查看存储过程的执行计划,那么我们有什么方式获取存储过程的历史执行计划或当前的执行计划呢? 下面总结一下获取存储过程的执行计划的方法. 1:我们可以通过下面脚本查看存储过程的执行计划,但 ...

  5. mysql5.7 Multiple-Column Indexes 多列索引(二)

    场景一: 复合索引的替代方法,对多列字段拼接做hash,引入一个hashed 字段,对此字段添加索引,可以做到复合索引查询速度快,例: SELECT * FROM tbl_name WHERE has ...

  6. 高通lk屏幕向kernel传参

    LK把相关参数报存到cmdline上: 在Bootable\bootloader\lk\dev\gcdb\display\gcdb_display_param.c上gcdb_display_cmdli ...

  7. mysql语法总结及例子

    1. DDL相关 a. -- 查询所有数据库 show databases;-- 删除数据库drop database ladeng; b. -- use `数据库名称`; 表示使用此数据库 use ...

  8. 函数计算自动化运维实战 2 -- 事件触发 eip 自动转移

    函数计算 阿里云函数计算是一个事件驱动的全托管计算服务.通过函数计算,您无需管理服务器等基础设施,只需编写代码并上传.函数计算会为您准备好计算资源,以弹性.可靠的方式运行您的代码,并提供日志查询,性能 ...

  9. go语言设计模式之Concurrency future

    future.go package future type SuccessFunc func(string) type FailFunc func(error) type ExecuteStringF ...

  10. win7 Adobe flash player 无法在线更新

    1.win7 Adobe flash player 无法在线更新,提示应用程序初始化错误 解决方法: 1.https://www.flash.cn/看一下支持的版本,网上找对应版本离线包下载安装即可 ...