前言

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. .net core 拦截器的使用

    .net core 拦截器的使用 实例代码:https://gitee.com/D_C_L/InterceptorTest.git 拦截器主要是将程序中的一些可以独立出去的模块进行拦截,比如幕等性,和 ...

  2. Python中的常见特殊方法—— repr方法

    在Python中有些方法名.属性名的前后都添加了双下划线,这种方法.属性通常都属于Python的特殊方法和特殊属性,开发者可以通过重写这些方法或者直接调用这些方法来实现特殊的功能.其实前面见过的构造方 ...

  3. JAVAEE学期总结

         声明:除第一张思维导图为博主所制作,其他思维导图皆来自网络,若侵权,望告知,必删除.                                                      ...

  4. golang中，new和make的区别

    在golang中,make和new都是分配内存的,但是它们之间还是有些区别的,只有理解了它们之间的不同,才能在合适的场合使用. 简单来说,new只是分配内存,不初始化内存: 而make即分配又初始化内 ...

  5. Java - 包装类 常量池

    概述: 在Java中存在一些基本数据类型,这些基本数据类型变量,不能像其他对象一样调用方法,属性.... 一些情况下带来一些问题,包装类就是为了解决这个问题而出现 包装类可以使得这些基础数据类型,拥有 ...

  6. SAP depreciation key config

    正常折旧 Configure 1.分配总帐科目 spro进入后台配置 –> Financial Accounting(New) –> Asset Accounting –> Depr ...

  7. cesium 入门开发系列矢量瓦片加载展示(附源码下载)

    前言 cesium 入门开发系列环境知识点了解:cesium api文档介绍,详细介绍 cesium 每个类的函数以及属性等等cesium 在线例子 内容概览 cesium 实现矢量瓦片加载效果 源代 ...

  8. ORACLE EXPIRED(GRACE)

    查询用户状态col username for a20col account_status for a20select username,account_status,LOCK_DATE,EXPIRY_ ...

  9. 关于sql sp_send_dbmail 发送邮件的怪异问题

    存储过程,其实就是将sp_send_dbmail采用参数的方式发送邮件,存储过程如下: ALTER PROCEDURE [dbo].[SP_Email_Send] @EmailTo varchar(m ...

  10. CodeForces - 1238D（思维）

    题意 https://vjudge.net/problem/CodeForces-1238D 如果一个字符串的每个字母,属于至少一个(长度大于1)的回文串,则称这个字符串为good. 一个长度为n的字 ...