学习地图前端库leaflet的源码
1.下载源码。
从github上拉下代码。 代码结构如下：
2.调试。
1) 下载依赖。
npm install
然后查看packge.json中的执行语句
2). npm run build生成调试包
npm run build
执行后，将生成js和css文件，同时有对应的source-map文件
从生成的source-map中可以看出，里面是指向src下的文件。
3).执行 npm run debug进行调试。
npm run debug
实际上调试的是一下目录的demo
根据控制台启动的静态服务，打开网页
打开网页，进入debug----map,然后选择其中一个html文件。
3.选择一个demo为例，来查看生成地图的过程。
在network中找到其中的瓦片，找到其中的调用栈，就比较清晰的看到函数的调用过程。
可以看到生成瓦片之前的所有步骤（左边）以及对应的文件（右边）。从下往上看。也可以点击右边进入源码中。 页面上的地图实际上是多个这种瓦片安装序号拼接而成。
4.补充，使用vscode打断点调试
1）自动生成launch.json,
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://127.0.0.1:8080",
"webRoot": "${workspaceFolder}"
}
]
}
2）修改其中的url跟本地启动的静态服务地址保持一致。
"url": "http://127.0.0.1:8080",
