标签：start world center 必须 click 文档 管理工具 nodejs att
leaflet-webpack 入门开发系列环境知识点了解：
- node 安装包下载
webpack 打包管理工具需要依赖 node 环境，所以 node 安装包必须安装，上面链接是官网下载地址- webpack 配置介绍文档
详细的 webpack 文档配置介绍，适合新手查看，我也是边看边学- vscode 安装包下载，我这边用 vscode工具编译开发前端项目，个人觉的这款工具还不错
- leaflet api文档介绍，详细介绍 leaflet 每个类的函数以及属性等等
- leaflet 在线例子
- leaflet 插件，leaflet 的插件库，非常有用
我之前有计划写一系列关于 leaflet 入门开发文章，只是一直没什么时间来整理，最近刚好单位有个 WebGIS 项目是用 leaflet 结合 webpack 来管理使用的，所以，开始了本篇文章 leaflet-webpack 入门开发系列一初探篇，对于 webpack 这个管理工具平台，我也是学习阶段，跟大家一起学习交流，写的不好之处，望见谅。
dist webpack 打包编译后的文件夹
dist/index.html 地图主页
src/index.js 地图初始化代码
package.json 记录了项目的配置信息，包括名称、版本、许可证等元数据，也会记录所需的各种模块，包括 执行依赖，和开发依赖
webpack.config.js webpack 的配置文件
<html> <head> <title>Leaflet入门开发系列Demo</title> </head> <body> <div id="map" style="width: 100%; height: 100%;"></div> <script src="bundle.js"></script> </body> </html>
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); })
完整demo源码见小专栏文章尾部：GIS之家小专栏
文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波
leaflet-webpack 入门开发系列一初探篇（附源码下载）
标签：start world center 必须 click 文档 管理工具 nodejs att
原文地址：https://www.cnblogs.com/giserhome/p/10888912.html
