mapbox datavis mapbox

主要功能：

- 适配 mapbox 原生、deck.gl、antV-L7、THREE 不同可视化图层加载，最终返回一个 MapBox 的 Layer ，用于添加到地图中
- 额外扩展可视化图层

todo

- [ ] 适配 mapbox 原生、deck.gl、antV-L7 不同图层加载
- [x] mapbox 原生
- [x] deck.gl
- [ ] antV-L7 因为图层加载在其内建的Scene对象中，需要额外处理
- [ ] THREE 以 mapbox 的 custom-layer 方式
- [ ] 支持接口原生参数传入及额外自定义选项
- [ ] 可用的地理图层补充
- [x] HeatMap (mapbox)
- [x] ArcLayer (deck.gl)
- [x] GeoJSONLayer (deck.gl)
- [x] RouteLineLayer (antV)
- [ ] 不上地图的表格图表扩充
- [ ] 统一图层管理，事件管理
- [ ] 通用数据转换
> 不同库的大部分图层都支持GeoJSON数据，但是个别的图层所需数据格式不尽相同，需要统一数据入口的数据结构，内部做转换以适配不同的库
- [ ] 测试用例编写
- [ ] 入参参数校验
- [ ] 打包体积优化

用法

``shell
yarn add git地址...
`

`javascript
import { ArcLayer,GeoJsonLayer } from 'fantasy-datavis-mapbox';
import mapboxgl from 'mapbox-gl';

mapboxgl.accessToken = 'pk.eyJ1IjoiZ29vaW4iLCJhIjoiY2ppY3RjcGd5MDRqcjNrbWFlanEyazk2OCJ9.-v6OvStrPvVwu2-Tx9Uogg';
const AIR_PORTS =
'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson';

let map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [0.45,51.47],
zoom: 4,
pitch: 30,
bearing:0
});

const myArcLayer = ArcLayer({
id: 'arcs1',
data: AIR_PORTS,
dataTransform: d =>
d.features.filter(f =>
f.properties.scalerank < 4),
// // Styles
getSourcePosition: f =>
[-0.4531566, 51.4709959], // London
getTargetPosition: f =>
f.geometry.coordinates,
getSourceColor: [0, 128, 200, 100],
getTargetColor: [200, 0, 80, 150],
getWidth: 2
});

const myJsonLayer = GeoJsonLayer({
id: "geojson",
data: AIR_PORTS,
onClick: info =>
// eslint-disable-next-line
info.object && alert(extra fun=> ${info.object.properties.name} (${info.object.properties.abbrev}))
});


map.addLayer(myArcLayer);
map.addLayer(myJsonLayer);

``