临海建设银行网站口碑营销的优势

1、通过vue create (项目名）创建项目，选择vue2

2、项目中引入mapbox插件，两种方式：

A方式： 通过npm安装mapbox，这种方式需要accessToken。（需要注册mapbox账号，很麻烦，有条件可自行注册，或者安装之后，修改mapbox源码）

修改源码参考：MapBox GL Vue本地引用去掉accessToken验证MapBox在内网使用时，accesstoken不能使用 - 掘金

我自己试了，不好用，可能mapbox版本的问题，你们可以自己试一下，我的版本是3.0.1。

B方式：在index.html引入mapbox的js插件，以下便是两个版本的插件，已免token

https://download.csdn.net/download/qq_48795482/90422454

https://download.csdn.net/download/qq_48795482/90422470

两版本对应的css文件，也引入到index.html文件中。

https://download.csdn.net/download/qq_48795482/90422467

https://download.csdn.net/download/qq_48795482/90422472

类似下图：

3、初始化地图

<div id="map" class="map-container"></div>

const map = new mapboxgl.Map({// accessToken:'pk.eyJ1Ijoic29uZ3plbmd5dSIsImEiOiJjbGo0ZDM0bmMwMTBzM2RreGlqMXNsc2YwIn0.ik-fY3Yx7mRu02ySZnjavQ',container: 'map',style: {version: 8,sources: {tdt_yx: {type: "raster",tileSize: 256,tiles: ["http://service.sdmap.gov.cn/tileservice/sdrasterpubmap?tk=666a632858dc228c2eb6fa5dcbfec95d&layer=SDRasterPubMap&style=default&tilematrixset=default028mm&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix={z}&TileCol={x}&TileRow={y}",],},},layers: [{id: "tdt_yx",type: "raster",source: "tdt_yx",minzoom: 0,maxzoom: 22,},],}, // mapbox底图center: [117.127, 36.669], // 初始化中心点zoom:17, // 初始化层级// projection: "globe",language: "zh-Hans",// pitch: 65,// bearing: -180,//interactive: false,});

注意：不要忘记给地图容器设置宽度和高度哦！

.map-container {width: 100%;height: 100%;}

成功初始化！！！