vscode中安装webpack_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源码见小专栏文章尾部：

leaflet-webpack 入门开发系列一初探篇（附源码下载）－小专栏xiaozhuanlan.com

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波

GIS之家店铺：GIS之家
GIS之家源码咨询：GIS之家webgis入门开发系列demo源代码咨询

vscode中安装webpack_leaflet-webpack 入门开发系列一初探篇（附源码下载）相关推荐

arcgis开发多版本之间如何兼容_arcgis api 4.x for js 结合 react 入门开发系列初探篇（附源码下载）...
你还在使用 JQuery 或者 Dojo 框架开发 arcgis api 4.x for js 吗?想试试模块化开发吗?随着前端技术的发展,arcgis api 4.x for js 也有了结合 re ...
android 原生开发 3d地图下载_arcgis api 3.x for js 入门开发系列二不同地图服务展示（附源码下载）...
前言关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
Web 开发中很实用的10个效果【附源码下载】
在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...
Flask+VUE 实现页面增删改查显示开发+测试（图文教程附源码）
目录一.新建项目并初始化二.安装依赖 axios.elementUI 三.Vue代码四.进行接口联调五.后端接口优化六.web页面功能测试七.总结八.展望九.附录(截止发文时的代码) ...
用ionic快速开发hybird App（已附源码,在下面+总结见解）
用ionic快速开发hybird App(已附源码,在下面+总结见解) 1.ionic简介 ionic 是用于敏捷开发APP的解决方案.核心思路是:利用成熟的前端开发技术,来写UI和业务逻辑.也就是说 ...
python 开发视频播放网站_python开发微电影视频网站教程附源码
做为一个合格的Pythoner,只掌握一个框架是不够,如果你有过其它Python框架(例如django)的使用经验,对比不同框架的特性来学习,你将收获更多当前信息若含有黄赌毒等违法违规不良内容,请点 ...
Winforn中DevExpress的TreeList中显示某路径下的所有目录和文件（附源码下载）
场景 Winform中DevExpress的TreeList的入门使用教程(附源码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/deta ...
美！视差滚动在图片滑块中的应用【附源码下载】
视差滚动(Parallax Scrolling)已经被广泛应用于网页设计中,这种技术能够让原本平面的网页界面产生动感的立体效果.下面分享的这个图片滑块效果是难得一见的结合视差滚动的例子,之前的文章给大 ...
云开发表白墙微信小程序源码下载免服务器和域名支持流量主收益
这是一款云开发的表白墙微信小程序特点是云开发,所以也就无需服务器和域名的支持了安装特别的简单首先呢小程序账号开通云开发权限然后把源码上传到微信开发者工具里面然后点击开发者工具软件上面的云开发 ...

vscode中安装webpack_leaflet-webpack 入门开发系列一初探篇（附源码下载）

前言

环境搭建

vscode中安装webpack_leaflet-webpack 入门开发系列一初探篇（附源码下载）相关推荐

最新文章

热门文章