强大的地图库--Leaflet.js爬坑记录(2)

转载请注明出处:王亟亟的大牛之路

上一次是用link形式写的demo的东西，这次把打包方式集成到了以npm webpack打包的方式对项目进行管理

上一篇的传送门

切换到es6后到一些姿势调整

首先是依赖，package.json变动如下

{"name": "leafletdemo","version": "1.0.0","description": "操作指令:<br>\r npm install<br>\r npm run dev<br>","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack","dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"},"repository": {"type": "git","url": "git@github.com:PacteraOpenSourceGroup/LeafletDemo.git"},"author": "ddwhan0123","license": "ISC","devDependencies": {"babel-core": "^6.26.0","babel-loader": "^7.1.2","babel-preset-es2015": "^6.24.1","babel-preset-stage-0": "^6.24.1","css-loader": "^0.28.7","file-loader": "^1.1.5","style-loader": "^0.19.0","url-loader": "^0.6.2","webpack": "^3.10.0"},"dependencies": {"fetch-jsonp": "^1.1.3","leaflet": "^1.2.0","leaflet-rotatedmarker": "^0.2.0","proj4leaflet": "^1.0.2","webpack-dev-server": "^2.9.5","whatwg-fetch": "^2.0.3"}
}

//运行直接
npm run dev
//打包就
npm run build

跑http://localhost:3333/ 可以看到效果

导包姿势的调整

本来是
<script src="......"></script>
现在是
import * as L from "leaflet"

本来是
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
现在是
<style> @import "./static/css/pop/infor_pop.css"; </style>

加载谷歌/天地图等其他平台的地图

之前demo阶段使用的是百度地图，然后需求需要使用google map或者其他的图源，所以进行了一顿骚操作，发现还是crs的锅，然后直接选择弃用，然后找到了一个66的工具类leaflet.ChineseTmsProviders

源码也比较简单，就是根据不同属性名引用不同的地图地址，效果如下

上面简要的贴了一下与上一篇的变化点，具体可以看源码：源码传送门

关于webpack的姿势可以看这一篇:传送门！！！！

我也是移动Native开发转的前端，深深觉得脚手架玩6了工作效率高很多，写的比较简单，单纯记录工作过程，希望能给读者有所帮助谢谢读到这里

强大的地图库--Leaflet.js爬坑记录(2)相关推荐

centos7安装mysql日志空白_centos7安装Mysql爬坑记录 - G
centos7安装Mysql爬坑记录查看是否已安装使用下列命令查看是否已经安装过mysql/mariadb/PostgreSQL 如果未安装,不返回任何结果(ECS的centos镜像默认未安装任何 ...
mybatis-generator 详细配置及使用，爬坑记录
mybatis-generator 详细配置及使用,爬坑记录提示:如果不成功一定是项目路径和数据库配置出问题,本篇基于 MySQL 8.0.13,调试没有问题. 如果失败,建议使用相同的项目结构, ...
kotlin与java混合开发_使用kotlin和Java混合开发Android项目爬坑记录
使用kotlin和Java混合开发Android项目爬坑记录不定期将开发过程中遇到的问题添加在此处,加深记忆. 主要内容包括但不限于java与kotlin语言的一些区别,以及在使用android-s ...
03、Swagger2和Springmvc整合详细记录（爬坑记录）
时间内容备注 2018年6月18日基本使用 spirngmvc整合swagger2 开始之前这个系列博文基本是,在项目的使用中一些模块的内容记录,但是后期逐渐优化,不单单是整合内容. swagg ...
centos7 安装mysql8_CentOS7中安装MySQL8.0.21爬坑记录
在CentOS7.3中安装了MySQL8.0.21之后,就开启了一段漫长的爬坑历程,简要回顾如下: 一.从Win10中用Navicat连接安装好的MySQL服务器出现如下异常:1045 - Acce ...
ubuntu20安装gdb插件gef的爬坑记录
0x00 环境 ubuntu20.04.2.0 0x01 踩坑过程 1.按照官网教程安装官网地址:https://github.com/hugsy/gef 按照官网提示安装,wget报TLS连接错误 ...
win10 系统下安装ubuntu实现双系统爬坑记录
谨以此教程纪念一下自己的爬坑之旅,如有问题,敬请大神指正; 不同电脑的配置和环境不同,本博客提供的方法仅供参考! 首先呢,基于想要在电脑上装一个实体Linux系统的夙愿,找了很多教程,得知个人电脑比较 ...
uniapp结合萤石视频ezuikit.js的爬坑记录
1.前言由于开发需要,项目需要接入萤石的视频监控.萤石官方提供了三种协议的的视频方式,hls,rtmp,ezopen.三种协议是视频直播有一定差别,由于hls有十多秒的延迟,不符合项目的要求,并且因 ...
flutter小说阅读页之爬坑记录-半角转全角字符
最近在做一个小说app,然而昨天在做阅读页时遇到了一个奇葩的坑. ### 半角转全角既然是阅读页嘛,要等宽才好看嘛,那就安排! 首先必须是全部字符转换为全角啦,于是就顺手写了下面这些代码.这不是so ...

强大的地图库--Leaflet.js爬坑记录(2)

转载请注明出处:王亟亟的大牛之路

强大的地图库--Leaflet.js爬坑记录(2)相关推荐

最新文章

热门文章