ycmapboxdeckgl v0.2.1

ycmapboxdeckgl

介绍

ycmapboxdeckgl 是对于 webgl、deck.gl 与 mapbox-gl-js 的深入理解与封装的一个包

基于rollup打包，后期切换至 rolldown 构建

关键词：

• deck.gl
• mapbox-gl-js

Examples

Use

Installation npm

npm install ycmapboxdeckgl --save

Installation yarn

yarn add ycmapboxdeckgl --save

使用前 请先初始化好mapboxgl的map 或者deck

Use in project

// mapboxgl为例
import {get**Fn} from "ycmapboxdeckgl";
const layer = get**Fn(obj);
map.addLayer(layer);

包含的 图层函数

• 1、getHeightAreaLayerFn 带高度的区域背景
• 2、getCanvasImgLayerFn canvas绘制的旋转背景图片可代替简单视频视频
• 3、getAirLineAndPlaneRunLayerFn 两点间的航线(抛物线，双色渐变) 模型方向路径随动
• 4、getFlyingNeedleLayerFn 基于点位的飞针效果
• 5、getMoreCircleLayerFn 多圈散点图
• 6、getFlyDustLayerFn 粒子系统-尘埃飞舞图
• 7、getArrowsRunLayerFn 路径箭头流动图

1、带高度的区域背景图层函数 getHeightAreaLayerFn 包含的子图层

• 1、视频背景
• 2、边界墙
• 3、可腾空的图片
• 4、路径线段
• 5、可以跑动的路径线段

getHeightAreaLayerFn 的参数

const obj = {
    id:'layerId', //图层id
    data:data || [], // 图层渲染的基础数据
    baseHeight:baseHeight,//基准高度 - 子对象也可单独设置
    runOverTime:3000,// 动效运行一次的时间
    propsBgVideoBitmapObj:{// 背景视频的配置
        // 媒体在地图上呈现的点位信息 -4个点
        position:[[85.81549253389267,15.721578351761664],[78.0921798799344,51.01916291741034],[127.36158818966658,53.252582127552444],[127.2728144809999,20.861060124151905]],
        // 如是视频需要video的dom  详见 https://deck.gl/docs/api-reference/layers/bitmap-layer
        videoDom:videoDom,
    },
    propsBitmapObj:{// 可腾空的图片
        // 展示位置
        bounds:[[73.5072274417376,18.21900528544038],[73.5559765504169,53.512529431770496],[134.96868313804356,53.52895134345358],[135.16798402949382,18.130937089587178]],
        image:'./mapbox-gl-js/image/cat.png',// 资源地址
        baseHeight:(baseHeight * 0.9)// 可腾空的高度设置
    },
    propsPathObj:{//常显的描边线段
        getColor:[75,150,220,200],//颜色
        getWidth:1.8,// 线宽
        baseHeight:(baseHeight * 0.98),//线段可腾空的 高度
    },
    propsSolidPolygonObj:{ //动效墙
        baseHeight:baseHeight,// 可腾空的高度设置
        getLineColor:  [100,200,230,250],// 墙的线色
        getFillColor: [11,86,221,250], //墙的渐变颜色1
        getFillColor2: [83,189,250,250], // 墙的渐变颜色2
    },
    propsTripsObj:{// 跑动的线段
        baseHeight:(baseHeight * 0.96),// 可腾空的高度设置
        data:borderLineRunDateArr || [], // 跑动的线段数据
        runOverTime:8000, // 跑完一次的时间
        widthMinPixels:3, //最小的 线宽
        dafaultColor:[255,255,255,255],// 线的 颜色
    }
}


// 图层渲染的基础数据 data 的数据格式

const data = [
    ...{},
    {
        code: `adcode`, // 单条渲染数据的编码
        name: `名称`, // 单条渲染数据的名称
        // path 为单条渲染数据在地图上绘制的经纬度点位的集合（必须）
        path:[...[],[82.95104051779992,38.81040912290382],[100.63091965275163,46.83166879946015],[101.65651390911256,48.3222053774642],[100.64989604273052,51.02441221964443],[107.04675019089842,20.279253742972315],...[]],
        selectedColor:[200,200,0,200],// 单挑渲染数据可以区别于其他基础数据的凸显颜色
    },
    ...{}
];

// propsTripsObj 子对象的data<borderLineRunDateArr> 跑动的线段数据 的格式也如上 data格式

2、canvas绘制的旋转背景图片可代替简单视频视频图层函数 getCanvasImgLayerFn

包含的子图层

• 1、可旋转的背景图片1
• 2、固定的背景图片2

getCanvasImgLayerFn 的参数格式

 const obj = {
     id:'layerId', //图层id
     image:'图片的可访问地址（考虑跨域）',// 可以旋转的背景图片1
     bounds:[80,-10,120,40],// 图片1位置
     image2:'图片的可访问地址（考虑跨域）',// 固定的背景图片2
     bounds2:[90,0,100,30],// 图片2位置
}

3、两点间的航线(抛物线，双色渐变) 与 模型方向随路径指向的图层函数 getAirLineAndPlaneRunLayerFn

包含的子图层

• 1、终点的多圈散点图层 （详见：getMoreCircleLayerFn）
• 2、模型渲染的场景图层
• 3、链接起点到终点的航线图层

getAirLineAndPlaneRunLayerFn 的参数

const obj = {
          id:'layerIdArc', //图层id
          data:data,// 图层渲染数据的集合
          runOverTime:5000,//一次动效完成的时间
          getHeight:0.5,// 曲线高度
          baseHeight:baseHeight * 1.05,// 图层渲染的离地高度
          propsScatterplotObj:{ // 终点散点图的配置对象
            widthRadius:25, // 圆圈宽度
            isStop:!true,//是否扩散
            oneCircleObjGetFillColor:[255,255,200,255],//中心点颜色
            oneCircleObjGetLineColor:[178, 195, 210,200],//内圈颜色1
            twoCircleObjGetLineColor:[200, 200, 10,255],// 内圈颜色2
            threeCircleObjGetLineColor:[100,0,0,0]// 外圈颜色
          },

          propsScenegraphObj:{// 随动模型的配置对象
            getColor:[255,255,255,255],// 模型整体赋色
            scenegraph:'./testglb/airplane.glb',// 模型的可访问地址（考虑跨域）
            isShow:true, // 是否展现
            isFollowLine:true, // 后段是否随线方向
            getOrientation:[0,0,90],// 模型的旋转矩阵
            sizeMinPixels: 1,// 最小显示像素
            sizeMaxPixels: 2,// 最大显示像素
          },

          propsArcObj:{ // 航线曲线的配置对象
            getWidth:3, // 线宽
            sourceColor:[255,0,0,255],//起点颜色
            targetColor:[255,0,255,255], // 终点颜色
          },
        }

        // 渲染的数据集合的数据结构格式
        const data = [
            ...{},
            {
              startPoint:[0,0], //单条数据的起点（必须）
              endPoint:[100,30],//单条数据的终点（必须）
              // 可以忽略配置 会取 propsArcObj 对象里面的配置----
              sourceColor:[255,0,0,255], // 单条曲线前段的颜色
              targetColor:[255,0,0,255], // 单条曲线后段的颜色
              // 可以忽略配置 会取 propsArcObj 对象里面的配置----end
              // 可以忽略配置 会取 propsScatterplotObj 对象里面的配置----
              oneCircleObjGetFillColor:[255,0,0,255], // 单条数据中心点颜色
              oneCircleObjGetLineColor:[255,0,0,255], // 单条数据内圈颜色1
              twoCircleObjGetLineColor:[255,0,0,255], // 单条数据内圈颜色2
              threeCircleObjGetLineColor:[255,0,0,255], // 单条数据外圈颜色
              // 可以忽略配置 会取 propsScatterplotObj 对象里面的配置----end
            },
            ...{},
        ]

// 渲染数据集data的更新方法为 setNewDataFn
// 用法 
const layer = getAirLineAndPlaneRunLayerFn(obj);
layer.setNewDataFn(data);

4、 基于点位的飞针效果图层函数 getFlyingNeedleLayerFn

getFlyingNeedleLayerFn 参数

const obj = {
          id: 'addLineGoUpLayerFnId', // 图层id
          data: allArr,// 渲染的数据集合
          getSourcePosition: d => d.start, // 飞针起点坐标
          getTargetPosition: d => d.end, // 飞针终点坐标
          getColor: [0, 157, 250, 255], // 飞针颜色
          getWidth: 1.5, // 飞针宽度
          isLineRun: true, // 是否飞动
          runOverTime: 2000 // 动效一次的时间
        }
        
        // data 渲染集合可以用 getMoreRandomVerticalPointFn 函数随机生成点位
        // getMoreRandomVerticalPointFn 函数参数解释
        // const allArr = getMoreRandomVerticalPointFn(
        // center= 基准点位,
        // num = 基于基准点位生成的随机点位个数,
        // maxHeight = 飞针顶端最大高度,
        // minHeight=飞针底端最小高度,
        // againNum= 基于基准点位的扩散倍数
        // 
        //)

5、多圈散点图层函数 getMoreCircleLayerFn

getMoreCircleLayerFn 参数

const obj = {
          id:'MoreCircleLayerId', // 图层id
          data:[ // 渲染数据集合
              ...{},
            {
              coordinates:[10,10],// 点位数据 （必须）
                // 配置可省略 若不设置 则取外出的对象配置------
                oneCircleObjGetFillColor:[255,0,255,255],// 单条数据中心点颜色
                oneCircleObjGetLineColor:[255,0,255,255],// 单条数据内圈1颜色
                twoCircleObjGetLineColor:[255,0,255,255],// 单条数据内圈2颜色
                threeCircleObjGetLineColor:[255,0,255,255],// 单条数据外圈颜色
                // 配置可省略 若不设置 则取外出的对象配置------end
            },
              ...{},
          ],
          widthRadius:80,// 圈的大小
          oneCircleObj:{
            getFillColor:[255, 255, 0,255],// 中心点颜色
            getLineColor:[255, 0, 255,255],// 内圈1颜色
          },
          twoCircleObj:{
            getLineColor:[255, 255, 200,200]//内圈2颜色
          },
          threeCircleObj:{
            getLineColor:[0, 0, 200,200] // 外圈颜色
          },
        }

6、路径箭头流动图 getFlyDustLayerFn

getFlyDustLayerFn 参数

const obj = {

            getColor: [0,0,200,100],// 颜色
            pointSize: 3,// 尘埃大小
            pointDistance: 2000,// 每个尘埃距离
            pointNum: 300,// 尘埃数量
            runOverTime:30000,//一次动效完成的时间
            coordinateOrigin: [103,38,1000],// 粒子系统中心点
        }

7、多圈散点图层函数 getArrowsRunLayerFn

getArrowsRunLayerFn 参数

const data = [
    {
        path:[[88.98190894459628,42.126961784124944],[117.30099979083593,39.908186205313626]]
    },
    {
        path:[[91.04312069663371,16.783840049831667],[108.89355308461859,16.783840049831667]]
    },
]

const obj = {
    id: 'layerId',
    data,// 数据
    getColor:d => ([255,0,0,255]),// 箭头颜色1
    getColor2:d => ([255,0,255,20]),// 箭头颜色2
    getPath: d => (d.path),// data中的路径数据
    getWidth: 500000,// 路劲的宽度
    sidesNum:0.68,// 箭头边缘的的值
    getIsReverse: d => (d.isReverse),//箭头流动方向是否换向
}