Vue2引入mapbox同时加载天地图(2.5D地图)

在 Vue2 项目中引入 Mapbox 并同时加载天地图（2.5D 地图）可以按照以下步骤进行：

一、安装 Mapbox GL JS

可以通过以下方式在 Vue2 项目中安装 Mapbox GL JS：

1. 使用 npm：

   npm install mapbox-gl
   

2. 使用 yarn：

   yarn add mapbox-gl
   

二、申请 Mapbox 访问令牌

要使用 Mapbox，需要在 Mapbox 官网申请一个访问令牌（Access Token）。申请成功后，将令牌保存在项目的合适位置，以便在代码中使用。

三、引入 Mapbox GL JS 和天地图瓦片服务

1. 在 Vue 组件中引入 Mapbox GL JS：

   import mapboxgl from 'mapbox-gl';
   mapboxgl.accessToken = '你的 Mapbox 访问令牌';
   

2. 加载天地图的瓦片服务。天地图提供了多种地图服务，以矢量地图为例，其 URL 格式如下：

   const tiandituVectorUrl = 'http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}';
   

   其中，{s}代表服务器编号，可以是 0 到 7 的数字；{x}、{y}、{z}分别代表瓦片的 X 坐标、Y 坐标和层级。

四、创建地图实例并添加天地图图层

1. 在 Vue 组件的mounted生命周期钩子中创建 Mapbox 地图实例：

   mounted() {
       this.map = new mapboxgl.Map({
           container: 'map', // 地图容器的 ID
           style: 'mapbox://styles/mapbox/streets-v11', // 初始地图样式
       });
   },
   

2. 添加天地图图层：

   this.map.on('load', () => {
       this.map.addSource('tiandituVector', {
           'type': 'raster',
           'tiles': [tiandituVectorUrl],
           'tileSize': 256
       });
       this.map.addLayer({
           'id': 'tiandituVectorLayer',
           'type': 'raster',
           'source': 'tiandituVector'
       });
   });
   

五、调整地图样式和交互

可以根据需要调整地图的样式、添加交互功能等。例如，可以设置地图的中心点和缩放级别：

this.map.setCenter([经度, 纬度]);
this.map.setZoom(缩放级别);

注意事项：

1. 使用天地图服务需要遵守天地图的服务条款和使用规范。
2. 在加载外部瓦片服务时，可能会遇到跨域问题，可以通过在服务端设置 CORS 头或者使用代理服务器来解决。
3. 不同版本的 Mapbox GL JS 和天地图服务可能会有不同的接口和行为，需要根据实际情况进行调整。