074：vue+mapbox 加载here地图（影像瓦片图 v2版）

在Vue中使用Mapbox加载Here (Nokia)的影像瓦片图可以通过以下步骤实现：

1. 确保你已经安装了Mapbox GL JS库。
2. 获取Here (Nokia)的影像瓦片图服务的API Key和App ID。
3. 在Vue组件中引入Mapbox GL JS并初始化地图。
4. 配置Mapbox地图源使用Here的瓦片图服务。

以下是一个简单的Vue组件示例，展示了如何加载Here的影像瓦片图：

<template>
  <div id="map" style="width: 100%; height: 100vh;"></div>
</template>
 
<script>
import mapboxgl from 'mapbox-gl';
 
export default {
  name: 'HereMapBox',
  mounted() {
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; // 替换为你的Mapbox访问令牌
    const map = new mapboxgl.Map({
      container: 'map', // 地图容器的DOM ID
      style: 'mapbox://styles/mapbox/streets-v11', // 初始地图样式
      center: [13.4, 52.5], // 初始中心点坐标
      zoom: 13 // 初始缩放级别
    });
 
    // 使用Here的瓦片图服务替换默认的Mapbox瓦片来源
    map.on('style.load', () => {
      map.addSource('here-tiles', {
        type: 'raster',
        tiles: ['https://1.base.maps.cit.api.here.com/maptile/2.1/maptile/newest/satellite.day/{z}/{x}/{y}/512/png8?app_id=YOUR_HERE_APP_ID&token=YOUR_HERE_API_KEY'],
        tileSize: 512
      });
 
      map.addLayer({
        id: 'here-tiles',
        type: 'raster',
        source: 'here-tiles',
        minzoom: 0,
        maxzoom: 20
      });
    });
  }
};
</script>
 
<style>
/* 添加你的样式 */
</style>

在上面的代码中，你需要替换YOUR_MAPBOX_ACCESS_TOKEN、YOUR_HERE_APP_ID和YOUR_HERE_API_KEY为你从Here和Mapbox获取的实际API凭证。

请注意，Here的瓦片服务URL可能会随时间更改，因此请确保从Here的官方文档获取最新的服务URL。此外，Mapbox的使用也需要一个有效的访问令牌，可以在Mapbox官网申请。