前言

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 入门开发系列一初探篇（附源码下载）

前言

环境搭建

最新文章

热门文章