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

前言

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之家小专栏

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

 

posted @ 2019-05-19 13:00 GIS之家 阅读(...) 评论(...) 编辑 收藏