mapbox绘制航线图

mapbox

先上效果图

再来一段官网描述：Mapbox GL JS 是一个 JavaScript 库，它使用 WebGL，以 vector tiles 和 Mapbox styles 为来源，将它们渲染成互动式地图。它是 Mapbox GL 生态系统的一部分，其中还包括 Mapbox Mobile，它是一个用 C++ 编写的兼容桌面和移动平台的渲染引擎。

P.S. mapbox地图展示的大部分信息可以在地图样式里面配置。包括平常的河流、土地、天空等颜色，还有各种建筑是否显示地区名字、中英文等。

代码

#map {
    width: 100%;
    height: 1000px;
  }

<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css' rel='stylesheet' />
<div id="map"></div>

    mapboxgl.accessToken = 'token'; // 设置token
    var map = new mapboxgl.Map({ // 初始化 设置样式 地图中心 地图缩放
      container: 'map',
      style: 'mapbox://styles/mapbox/dark-v10',
      center: [-122.414, 37.776],
      zoom: 3
    });
    map.on('load', function () { // 地图加载完成
      var s = [-122.414, 37.776];
      var e = [116, 38.913];
      var route = {
        "id": "route",
        'type': 'FeatureCollection',
        'features': [
          {
            'type': 'Feature',
            'geometry': {
              'type': 'LineString',
              'coordinates': [s, e]
            }
          }
        ]
      };
      
      // 计算起点和终点之间的距离
      var lineDistance = turf.lineDistance(route.features[0], 'kilometers');
      var stepArr = [];
      var steps = 10; // 步数(帧) 
      for (var i = 1; i < lineDistance; i += lineDistance / steps) {
        var lnglat = turf.along(route.features[0], i, 'kilometers');
        stepArr.push(lnglat.geometry.coordinates);
      }
      map.addLayer({
        "id": "route",
        "type": "line",
        "source": {
          "type": "geojson",
          "data": {
            "type": "Feature",
            "properties": {},
            "geometry": {
              "type": "LineString",
              "coordinates": stepArr
            }
          }
        },
        "layout": {
          "line-join": "round",
          "line-cap": "round",
        },
        "paint": {
          "line-color": "red",
          "line-width": 2,
        }
      });
    })

上面代码可以复制直接使用 有分的同学可以两分支持一下 传送门