# mapboxgl-demo1

**Repository Path**: sagit_zh/mapboxgl-demo1

## Basic Information

- **Project Name**: mapboxgl-demo1
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-09-24
- **Last Updated**: 2021-09-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# mapboxgl-demo1

> typescript + vue2 + mapbox +turfjs



## 启动
```
yarn install
yarn serve
```



## 需求

- 开发时间时限：3天

1、用TypeScript、Vue、mapbox(https://www.mapbox.com/mapbox-gl-js/api/)开发，空间计算可以使用turfjs(http://turfjs.org/)

2、显示地图

3、在地图上选取几个点，完成选取后，形成轨迹线路，线路显示到地图上

4、点击播放轨迹，模拟汽车沿着轨迹移动

5、点击汽车图标可以显示当前的汽车状态（汽车车票，汽车型号，汽车颜色， 汽车剩余油量，距离终点距离，距离终点时间），距离终点距离根据当前位置计算，其他的使用模拟数据即可。

6、打包并发布这个应用

 

- 检查功能点：

1、使用TypeScript、Vue、mapbox开发

2、地图正常显示

3、点击选取后能形成轨迹

4、能够播放轨迹动画

5、点击汽车图标能出现汽车状态信息

6、代码风格良好



## 实现步骤

### 1. 显示地图

- 安装 mapboxgl 、turfjs

```bash
yarn add mapbox-gl @turf/turf 
```

- 导入模块

```js
import 'mapbox-gl/dist/mapbox-gl.css'
import * as turf from '@turf/turf'
```

- 创建容器

```vue
<template>
	<div id="map" ref="map"></div>
</template>

<style lang="less">
body {
  display: flex;
  justify-content: center;
    
    #map {
      width: 1000px;
      height: 500px;
    }
}
</style>
```

- 初始化地图

```typescript
const map:Ref = ref()

mapboxgl.accessToken =
       'pk.eyJ1Ijoic2FnaXQtemgiLCJhIjoiY2t0bnl5dDFnMDZ0aTJwcDNsa3N4emF1biJ9.jFO8rJJN-kvaz9vuQ0odKQ' // 设置 token

const map = new mapboxgl.Map({
        container: 'map',
        center: [113.3111, 23.0857],
        zoom: 7,
        style: 'mapbox://styles/mapbox/streets-v11',
        hash: true
}) // 创建 mapbox对象

map.value = map
```



### 2. 选取点、生成路线、计算总距离

> 参考例子：https://docs.mapbox.com/mapbox-gl-js/example/measure/

- `map.on('click')` 点击事件
- `map.queryRenderedFeatures()` 查找是否有点，有则删除无则新增
- 删除用 `filter` 过滤实现，新增用 `map.getSource().setData()` 更新 source
- 通过点的 `point-geojson` 关联生成路线 `line-geojson`
- 使用 `turf.length` 计算路线 `line-geojson` 总距离

### 3. 按轨迹移动（难点）

> 参考例子：https://docs.mapbox.com/mapbox-gl-js/example/animate-point-along-route/

- 生成小汽车图标 car（当地图上有第一个点时）
- 根据 `总距离 / 步长` 生成平均每一段的 `移动距离`
- 根据 `移动距离` 使用 `turf.along()` 生成所有移动的坐标点
- 给小汽车添加角度属性
- 实时更新小汽车的 source 的坐标和角度，形成逐帧播放
- 使用 `requestAnimationFrame()` 生成动画播放

### 4. 显示汽车详情

- 预设好一个 marker 框，隐藏状态
- ` new mapboxgl.Marker(el).setLngLat('坐标').addTo(map)` 就行
- 重点是剩余距离的计算

### 5. 剩余距离计算（难点）

- 目前手上的算法只有 `turf.length()` 这一种
- 汽车移动过程中，角度发生改变时就是切换到下一条线段，这时候把前面的端点去掉，把汽车自身坐标作为端点，计算出汽车到末端的剩余距离