1.安装git客户端
下载地址 https://git-scm.com/downloads
2.Windows上mapbox演示环境搭建
参照 https://gitee.com/mirrors/Mapbox-GL-JS/blob/main/CONTRIBUTING.md进行。
(1)安装git, node.js, yarn, npm and node-gyp.
Install git, node.js (version ^10.15), yarn, npm and node-gyp.
(1.1)安装nodejs(版本是10.xx, xx>=15以上 )
参见《window下nodeJs多版本安装并快速切换》安装nodejs。
参见《国内npm镜像源推荐及使用》设置国内npm镜像源。
(1.2)打开cmd窗口,切换到node10
C:\_y> node10
(1.3)在cmd窗口中,安装yarn和node-gyp
C:\_y> npm install -g yarn
yarn 淘宝源安装,分别复制粘贴以下代码行到cmd窗口运行即可
yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
(1.5)在cmd窗口中, 安装node-gyp
C:\_y> cnpm i -g node-gyp
(2)下载代码,安装node模块依赖
(2.1)Mapbox-GL-JS提供的搭建方式
首先Clone the repository(下载代码),即在自己的电脑上找个位置,用git下载mapbox-gl-js代码
C:\_y> git clone https://gitee.com/mirrors/Mapbox-GL-JS.git
然后,Install node module dependencies(安装node模块依赖)
C:\_y> cd mapbox-gl-js
C:\_y\Mapbox-GL-JS> yarn install
(2.2)但是如果采用(2.1)的步骤,有些电脑上会卡在 yarn install这步进行不下去(最后几个module下载不下来),因此这里提供了一个安装了node模块依赖的mapbox-gl-js-complete.zip作为(2.1)的替代方案。请到下面链接的链接下载mapbox-gl-js-complete.zip,并将其解压到自己的电脑上某个位置,如C:\_y。
https://pan.baidu.com/s/1nWTNmUEeWNj1-tVNdBD4dg (提取码:8xm5)
(3)Install headless-gl dependencies
(headless-gl dependencies地址是https://github.com/stackgl/headless-gl#windows)
##copy node_modules/headless-gl/deps/windows/dll/x64/*.dll c:\windows\system32
copy node_modules/gl/deps/windows/dll/x64/*.dll c:\windows\system32
(4)Serving the Debug Page
(4.1)注册mapbox账号,获取MAPBOX ACCESS TOKEN
登陆官方网站 https://account.mapbox.com/ 注册mapbox账号。
当你注册账号成功,网站会自动给你一个默认 token,这个token就是使用地图的MAPBOX ACCESS TOKEN(token可以自己创建),(建议英语差的小伙伴选择谷歌浏览器一键翻译)。
我的账户的public token是
pk.eyJ1Ijoic2dpdDIwMjAiLCJhIjoiY2tqYzU1dW1qMHF5eTJxbDNuMmU1bWo5eiJ9.51o3mujFe6QO7Rj4hhzS4g
(4.2)启动 debug server的流程需要如下两个步骤:
set MAPBOX_ACCESS_TOKEN={YOUR MAPBOX ACCESS TOKEN}
yarn run start-debug
即
C:\_y\Mapbox-GL-JS> set MAPBOX_ACCESS_TOKEN=pk.eyJ1Ijoic2dpdDIwMjAiLCJhIjoiY2tqYzU1dW1qMHF5eTJxbDNuMmU1bWo5eiJ9.51o3mujFe6QO7Rj4hhzS4g
C:\_y\Mapbox-GL-JS> yarn run start-debug
(4.3)Open the debug page at http://localhost:9966/debug ;
或者
(4.3.1)在VS Code中按F5键,在“select Environment”下拉列表框中选择chrome,
在产生的.vscode/launch.json中,把"url"的值改为"http://localhost:9966/debug"
{
// 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": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:9966/debug",
"webRoot": "${workspaceFolder}"
}
]
}
在 src\ui\map.js文件中打上断点,按F5开始跟踪