用 Mapbox 和 Vue.js 制作一个地图可视化船舶定位查询系统

主要功能有：

• 通过搜索框查询船舶关键字
• 查询到船舶后，自动定位到船舶位置
• 弹出船舶相关信息
• DEMO：船只搜索代号为 9445320（已经接了真实全球数据）

---

• 默认已经使用vue-cli脚手架安装vue.js，并安装了elementUI，Less
• 本Demo使用了elementUI，为了让示例代码DOM结构清晰，删除部分HTML标签

---

1、目录结构
2、安装Mapbox
3、Map.vue组件
4、MapPage.vue页面

---

^[1]

1、目录结构

src\
  |- components\ // 公用组件目录
      |- Map.vue
  |- views\ // 页面组件目录
      // MapPage.vue为显示地图的页面，包含一个Map.vue 组件
      // 其实可以把Map组件的代码也写在MapPage里面，逻辑上还省事情一些，但是代码行数太长了，我不习惯一个组件超过300行代码
      |- MapPage.vue
  |- App.vue
  |- main.js

逻辑结构

---

^[2]

2、安装Mapbox

在项目目录下执行：

npm install mapbox-gl --save

---

^[3]

3、Map.vue组件

• 需要用一个箭头体现出船舶的 位置 和 航向/船头指向
• 最开始我的解决方法是用一张箭头图片，然后通过 css3 的 transform:rotate(x角度deg) 对图片进行角度转动，但是遇到一个问题，当地图进行旋转和推拉（伪3D效果，官方叫bearing 和 pitch），箭头图片并不会随地图转动。
• 所以只有将箭头通过添加图层（layer）的方式画在地图就，需要求出箭头各个点的坐标：

---

• 当我天真的以为真没提供相关 API，结果还真找到了.....
• 所以 Map.vue 组件的 addGeoMarker() 方法中加箭头的部分要重新写了，直接用图片，没这么麻烦了（新代码见这里）
• 以前写的老方思路留着把，说不定在其它什么地方能用上

---

画个箭头

• P₀为船舶所在位置，作为原点（X₀,Y₀)，α为船舶航向
• P₁(X₁,Y₁)，P₂(X₂,Y₂)，P₃(X₃,Y₃)，β为135°，γ为225°
• 以0.05个经纬度作为画箭头的单位长度 L，P₀P₁ = 3 * L，P₀P₂ = √2 * L
• X₁ = X₀ + 3 * L * sinα
• Y₁ = Y₀ + 3 * L * cosα
• X₂ = X₀ + √2 * L * sin(α + 135)
• Y₁ = Y₀ + √2 * L * cos(α + 135)
• X₃ = X₀ + √2 * L * sin(α + 225)
• Y₃ = Y₀ + √2 * L * cos(α + 225)

---

^[4]

4、MapPage.vue页面

---

1. 目录结构 ↩

2. 安装Mapbox ↩

3. Map.vue组件 ↩

4. MapPage.vue页面 ↩