@gooin/yzt-datavis-mapbox

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数据，但是个别的图层所需数据格式不尽相同，需要统一数据入口的数据结构，内部做转换以适配不同的库

• [ ] 测试用例编写
• [ ] 入参参数校验
• [ ] 打包体积优化

用法

yarn add git地址...

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);