不翻墙也能使用的地图还有Mapbox

安装

npm install --save axios
npm install --save mapbox-gl
npm install --save @mapbox/mapbox-gl-directions

使用

import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import MapboxDirections from '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions';
import '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions.css';

1.API实际地址转换经纬度

geocoderAddress (address) {
    return new Promise((resolve) => {
        axios({
            url: `https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(address)}.json`,
            method: 'GET',
            params: {
                access_token: mapboxgl.accessToken
            }
        }).then(res => {
            if (res.status == 200) {
                let center = null;
                res.data.features.map(p => {
                    if (!center) {
                        center = p.center;
                    }
                })
                resolve(center);
            }
        })
   })
}

2.初始化地图

const origin = await this.geocoderAddress(this.origin)
const destination = await this.geocoderAddress(this.destination)

this.map = new mapboxgl.Map({
    container: 'mapboxId',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [(origin[0] + destination[0])/2, (origin[1] + destination[1])/2],
    zoom: 7.5,
    antialias: true, // 抗锯齿
});

添加全局显示控件

this.map.addControl(new mapboxgl.FullscreenControl());;

3.添加轨迹路线

this.map.on('load', () => {
    // 获取主图色
    const primary = getComputedStyle(document.documentElement).getPropertyValue('--el-color-primary');
    const themeColor = (primary.includes(',') ? `rgba(${primary}, 1)` : primary) || '#4361EE';
                
    // 规划路线
    this.directions = new MapboxDirections({
        accessToken: mapboxgl.accessToken,
        unit: 'metric', // metric | imperial
        interactive: false,
        profile: 'mapbox/driving',
        controls: {
            inputs: false,
            instructions: false,
            profileSwitcher: false
        }
     });
    
    
    this.map.addControl(this.directions, 'top-left');
    
    this.directions.setOrigin(origin); // 设置起点的经纬度
    this.directions.setDestination(destination); // 设置起点的经纬度

轨迹线的样式修改

// MapboxDirections 对象里加属性styles
styles: [
    {
        'id': 'directions-route-line-casing',
        'type': 'line',
        'source': 'directions',
        'layout': {
            'line-cap': 'round',
            'line-join': 'round'
         },
         'paint': {
             'line-color': '#fff',
             'line-width': 2,
          },
          'filter': [
              'all',
              ['in', '$type', 'LineString'],
              ['in', 'route', 'selected']
           ]
      },
      {
          'id': 'directions-route-line',
          'type': 'line',
          'source': 'directions',
          'layout': {
              'line-cap': 'butt',
              'line-join': 'round'
          },
          'paint': {
              'line-color': {
                  property': 'congestion',
                  'type': 'categorical',
                  'default': themeColor,
                  'stops': [
                      ['unknown', themeColor],
                      ['low', themeColor],
                      ['moderate', '#f09a46'],
                      ['heavy', '#e34341'],
                      ['severe', '#8b2342']
                  ]
              },
              'line-width': 7
         }
      },
      {
          'id': 'directions-origin-point',
          'type': 'circle',
          'source': 'directions',
          'paint': {
              'circle-radius': 16,
              'circle-color': '#f09a46'
          },
          'filter': [
              'all',
              ['in', '$type', 'Point'],
              ['in', 'marker-symbol', 'A']
          ]
      },
      {
          'id': 'directions-destination-point',
          'type': 'circle',
          'source': 'directions',
          'paint': {
              'circle-radius': 16,
              'circle-color': '#8b2342'
          },
          'filter': [
              'all',
              ['in', '$type', 'Point'],
              ['in', 'marker-symbol', 'B']
          ]
      }
 ]

4.计算起始点的距离

this.directions.on('route', (event) => {
    // console.log(event.route); // 输出路线信息
    // 计算距离为整数
    const distance = Math.round(event.route[0].distance/1000 || 0);
    const distanceMI = Math.round(event.route[0].distance * 0.62137/1000 || 0);
    
    // 格式化公里
    this.distanceMatrix = distance ? `${numberFormat(distance)} KM` : '';
    
    // 格式化英里
    if (this.unit == 'imperial') {
        this.distanceMatrix = distanceMI ? `${numberFormat(distanceMI)} MILES` : '';
    }
 });
 
 // 格式化函数
export const numberFormat = (num) => {
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}

5.效果