vue2项目中初始化mapbox组件

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%;
  }

成功初始化！！！