# mapboxgl-demo2

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

## Basic Information

- **Project Name**: mapboxgl-demo2
- **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-27
- **Last Updated**: 2021-09-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# mapboxgl-demo2

> typescript + vue3 + mapbox + turfjs



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



## 需求

- 开发时间时限：3天
  1、用TypeScript、Vue、mapbox(https://www.mapbox.com/mapbox-gl-js/api/)开发，空间计算可以使用turfjs(http://turfjs.org/)
  2、显示地图
  3、在地图上随机打50个点，点在广州范围内，点数据都包含loss属性值，随机给值，loss为数字型，取值范围为：0 到 100，只使用一个图层。
  4、点的颜色和loss属性值关联，0到20为绿色，21到40为蓝色，41到60为橙色，61到100为红色。
  5、应用提供可以过滤的面板，选择要显示的loss值范围的点，可以是多选框，选择要显示的区间。做到的效果为，能够选择只显示0到60的loss值的点，使用mapbox表达式处理。
  6、应用提供周边查询点，在地图上选择一个点，查询出周边100米的点数据，展示点的数据列表，包括选择的位置到该点的距离，按距离最近排序。
  7、打包并发布这个应用。

- 检查功能点：
  1、使用TypeScript、Vue、mapbox开发。
  2、地图正常显示。
  3、地图有随机的点、并且点颜色和loss属性关联。
  4、能够根据区间过滤点的数据。
  5、能够进行周边查询，并展示列表。
  6、代码风格良好。

- 加分点：
  1、点击选择点，有高亮效果



## 实现步骤

### 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. 在广州范围内生成50个坐标

- 区域 GEOJSON 生成网址 `http://datav.aliyun.com/tools/atlas/index.html，根据区域数据画出范围

- `Math.random()` 或者 `turf.randomPoint` 随机生成50个坐标
- `booleanPointInPolygon` 判断点是否在广州范围内



### 3. 颜色规则(点的颜色和loss属性值关联，0到20为绿色，21到40为蓝色，41到60为橙色，61到100为红色)

```typescript
 paint: {
     'circle-color': {
         property: 'loss',
             stops: [
                 [0, 'green'], // 0-20 绿色
                 [21, 'blue'], // 21-40 蓝色
                 [41, 'orange'], // 41-60 橙色
                 [61, 'red'] // 61-100 红色
             ]
     }
 }
```



### 4. 过滤面板

- `map.setFilter()` 动态更新过滤规则
- `['<=', 'loss', 60]` 过滤 loss 小于 60 的点



### 6. 查询周边点

- `map.on('click')` 点击事件
- `map.queryRenderedFeatures()` 查找当前点击的点
- `turf.circle` 以自身为圆心，生成方圆百米内的圆圈范围
- `map.getSource('gzPoint')._data` 获取所有的点
- `turf.pointsWithinPolygon(所有的点, 范围)` 筛选出在范围内的点，并过滤排除自己
- `turf.rhumbDistance() `计算生成距离数组并 `sort` 排序
- 生成 HTML 节点元素
- `new mapboxgl.Popup().setLngLat(中心坐标).setHTML(内容).addTo(map)` 显示弹出层



## 问题总结

### 1. mapboxgl 没有 ts 官方声明文件，引入报错

- 解决： `src` 下新建 `js-modules.d.ts` 文件，添加 `declare module 'mapbox-gl';`

### 2. `turf.randomPoint` 随机生成坐标的 bbox 是个矩形范围 ，不会用

- 解决：改用 random() 手动生成