• ThingJS官方示例(十一):基于数据矢量及贴图url开发OD线


    前端# #三维可视化# #OD线开发#

    1. 基础图层创建
    2. OD线创建(矢量与贴图)
    3. 大数据量对接
      在这里插入图片描述

    简介:数字孪生体已经从制造领域逐步延伸拓展至城市空间,数字孪生城市又比工业制造复杂得多,与物理城市相对应。做不到100%逼真,而是构建统一的城市信息模型,让数字城市和现实城市进行“虚实结合”!3D城市动态模型包含点、线、面等地理要素,组合成信息化数字地图,有助于提升城市规划、建筑、交通、能源等领域的数字化水平。

    Demo链接:http://www.thingjs.com/guide/?m=sample

    OD线 (Origin-Destination Line) 指的是起点和终点的连线,用于表示两点之间的某种关系,如航班线路、人口迁徙、交通流量、经济往来等。从本周起中国缓慢进入春运高峰期,堪称一次爆发式人口迁徙事件,春运迁徙地图通常使用OD线表示:

    迁入来源地,OD线汇聚到一个方向,比如海口市,作为人口迁入的终点位置。
    在这里插入图片描述
    迁出目的地,OD线扩散到不同方向,但是起点是同一个位置,比如人口从哈尔滨市迁出。
    在这里插入图片描述
    GeoLine是带有地理位置的线要素,可以添加属性字段来存储其他信息,可以分为三种不同的线条类型,OD线不同在于限制了起点和终点,GIS里面就能够形成,绘制三维OD线需要哪些注意事项?创建OD线与其他线条有何区别?

    OD线开发体验见demo:http://www.thingjs.com/guide/?m=sample

    1. 基础图层创建

    动态加载地球组件之后,获取不同图层叠加,在ThingLayer业务图层进行更灵活的二次开发。创建一个ThingLayer图层,并将ThingLayer添加到底图中,获取起点的坐标位置startPos,展示由点及面的向外扩散效果。
    var startPos = [116.39139175415039, 39.906082185995366];

    2. OD线创建

    ThingJS渲染器提供两种渲染类型,矢量渲染vector以及贴图渲染image;获取OD线先从ThingJS图层中查询迁徙路径,如北京-济南,接下来就这条路径做样式修改。
    在这里插入图片描述

    (1)Vector样式渲染

    渲染器renderer设置Vector矢量线的颜色,示例显示rgb数组【255,0,0】的使用方法,还可以使用rgb字符串“rgb (255,0,0)”、十六进制字符串"#ff0000"。
    流动效果速度默认为0,静止效果;数值可正可负,代表正反两种流动方向,贴图样式也同样适用。

    renderer: {
        lineType: 'Line',
        type: 'vector', // 代表纯色渲染
        color: [255, 0, 0],
        // opacity:0.2 ,// 设置不透明度 默认是1
        // speed: 1 ,// 流动效果速度, 默认是0 不流动;speed 可正可负,正负代表流动方向
        // effect: true // 线发光效果 默认为 false 不开启
    }
    });
    

    (2)Image样式渲染

    获取url来生成贴图类型的OD线,颜色及其他样式是贴图本身所具备的,通过修改贴图通道叠加数numPass来扩充线宽度,一般来说该数值越大,线越亮。
    利用effect函数开启线发光特效,在地图上起到重要的强调作用。

    renderer: {
        lineType: 'Line',
        type: 'image', // 代表贴图渲染
        imageUrl: '/guide/image/uGeo/path.png',
        numPass: 3,
        speed: 0.5, // 流动效果速度, 默认是0 不流动;speed 可正可负,正负代表流动方向
        // effect: true // 线发光效果 默认为 false 不开启
    }
    

    3. 大数据量对接

    值得注意的是,大数据量的OD线一般需要浏览器端渲染至少几十万或上百万以上,不管数据传输还是数据渲染都需要采取更高效的方式——ThingJS平台提供生成动态大数据的接口,利用WebSocket(百万量级), MQTT(单机千万级)数据接口实现流畅的双工通信,配合前端SDK轻松在线开发!

    关于ThingJS

    ThingJS提供物联网3D可视化组件,让3D开发更轻松!直接Javascript调用3D脚本,基于200个3D开发源码示例,让你全面了解物联网可视化开发逻辑。利用场景搭建-3D脚本开发-数据对接-项目部署的一站式服务让开发更高效,与20万个开发者一同成为数字孪生技术创新者!
    在这里插入图片描述

  • 相关阅读:
    BZOJ3813 奇数国
    BZOJ2735 世博会
    BZOJ2081 [Poi2010]Beads
    BZOJ3276 磁力
    BZOJ2054 疯狂的馒头
    BZOJ2610 [Poi2003]Monkeys
    BZOJ2428 [HAOI2006]均分数据
    BZOJ2120 数颜色
    BZOJ2527 [Poi2011]Meteors
    补比赛——牛客OI周赛9-普及组
  • 原文地址:https://www.cnblogs.com/thingjs/p/14298898.html
Copyright © 2020-2023  润新知