可视化例子(7)——mapbox-北京公交线路图(2.5D地图流动)

2023-11-02 01:30

本文主要是介绍可视化例子(7)——mapbox-北京公交线路图(2.5D地图流动),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、数据格式

数据格式及参照方法:参照 https://blog.csdn.net/Ocean111best/article/details/103294067

二、全部代码

<!doctype html>
<html><head><meta charset="utf-8"><title>Bus lines - ECHARTS-GL</title><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes"> <!-- Fullscreen Landscape on iOS --><link rel="stylesheet" href="./common.css"></head><body><div id="main"></div><script src="../node_modules/echarts/dist/echarts.js"></script><script src="../node_modules/echarts/theme/dark.js"></script><script src="../dist/echarts-gl.js"></script><script src='lib/mapbox-gl.js'></script><link href='lib/mapbox-gl.css' rel='stylesheet' /><script src="lib/jquery.min.js"></script><script src="js/commonUI.js"></script><script>mapboxgl.accessToken = '你的accessToken';var chart = echarts.init(document.getElementById('main'));$.getJSON('data/lines-bus.json', function (data) {var hStep = 300 / (data.length - 1);var busLines = data.map(function (busLine, idx) {var prevPt;var points = [];for (var i = 0; i < busLine.length; i += 2) {var pt = [busLine[i], busLine[i + 1]];if (i > 0) {pt = [prevPt[0] + pt[0],prevPt[1] + pt[1]];}prevPt = pt;points.push([pt[0] / 1e4, pt[1] / 1e4]);}return {coords: points,lineStyle: {color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))}};});chart.setOption({mapbox3D: {center: [116.46, 39.92],zoom: 11,pitch: 50,bearing: -10,style: 'mapbox://styles/mapbox/dark-v9',postEffect: {enable: true}},series: [{type: 'lines3D',coordinateSystem: 'mapbox3D',effect: {show: true,constantSpeed: 10,trailWidth: 1,trailLength: 0.3,// trailColor: [1, 1, 5],trailOpacity: 1,spotIntensity: 3},blendMode: 'lighter',polyline: true,lineStyle: {width: 1,color: 'rgb(60, 150, 80)',opacity: 0.},data: busLines}]});window.onresize = chart.resize;window.addEventListener('keydown', function () {chart.dispatchAction({type: 'lines3DToggleEffect',seriesIndex: 0});});});</script></body>
</html>

3、结果图

 

这篇关于可视化例子(7)——mapbox-北京公交线路图(2.5D地图流动)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:https://blog.csdn.net/Ocean111best/article/details/103323216
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/327177

相关文章

Python中的可视化设计与UI界面实现

《Python中的可视化设计与UI界面实现》本文介绍了如何使用Python创建用户界面(UI),包括使用Tkinter、PyQt、Kivy等库进行基本窗口、动态图表和动画效果的实现,通过示例代码,展示... 目录从像素到界面:python带你玩转UI设计示例:使用Tkinter创建一个简单的窗口绘图魔法:用

最便宜的8口2.5G网管交换机! 水星SE109 Pro拆机测评

《最便宜的8口2.5G网管交换机!水星SE109Pro拆机测评》水星SE109Pro价格很便宜,水星SE109Pro,外观、接口,和SE109一样,区别Pro是网管型的,下面我们就来看看详细拆... 听说水星SE109 Pro开卖了,PDD卖 220元,于是买回来javascript拆机看看。推荐阅读:水

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题:墙体两侧特征混淆误匹配,导致建图和定位偏差,表现为过门跳变、外月台走歪等 ·解决思路:预期的根治方案IGICP需要较长时间完成上线,先使用切分地图的工程化方案,即墙体两侧切分为不同地图,在某一侧只使用该侧地图进行定位 方案思路 切分原理:切分地图基于关键帧位置,而非点云。 理论基础:光照是直线的,一帧点云必定只能照射到墙的一侧,无法同时照到两侧实践考虑:关

2024年流动式起重机司机证模拟考试题库及流动式起重机司机理论考试试题

题库来源:安全生产模拟考试一点通公众号小程序 2024年流动式起重机司机证模拟考试题库及流动式起重机司机理论考试试题是由安全生产模拟考试一点通提供,流动式起重机司机证模拟考试题库是根据流动式起重机司机最新版教材,流动式起重机司机大纲整理而成(含2024年流动式起重机司机证模拟考试题库及流动式起重机司机理论考试试题参考答案和部分工种参考解析),掌握本资料和学校方法,考试容易。流动式起重机司机考试技

MOLE 2.5 分析分子通道和孔隙

软件介绍 生物大分子通道和孔隙在生物学中发挥着重要作用,例如在分子识别和酶底物特异性方面。 我们介绍了一种名为 MOLE 2.5 的高级软件工具,该工具旨在分析分子通道和孔隙。 与其他可用软件工具的基准测试表明,MOLE 2.5 相比更快、更强大、功能更丰富。作为一项新功能,MOLE 2.5 可以估算已识别通道的物理化学性质。 软件下载 https://pan.quark.cn/s/57

Python:豆瓣电影商业数据分析-爬取全数据【附带爬虫豆瓣,数据处理过程,数据分析,可视化,以及完整PPT报告】

**爬取豆瓣电影信息,分析近年电影行业的发展情况** 本文是完整的数据分析展现,代码有完整版,包含豆瓣电影爬取的具体方式【附带爬虫豆瓣,数据处理过程,数据分析,可视化,以及完整PPT报告】   最近MBA在学习《商业数据分析》,大实训作业给了数据要进行数据分析,所以先拿豆瓣电影练练手,网络上爬取豆瓣电影TOP250较多,但对于豆瓣电影全数据的爬取教程很少,所以我自己做一版。 目

JavaFX环境的搭建和一个简单的例子

之前在网上搜了很多与javaFX相关的资料,都说要在Eclepse上要安装sdk插件什么的,反正就是乱七八糟的一大片,最后还是没搞成功,所以我在这里写下我搭建javaFX成功的环境给大家做一个参考吧。希望能帮助到你们! 1.首先要保证你的jdk版本能够支持JavaFX的开发,jdk-7u25版本以上的都能支持,最好安装jdk8吧,因为jdk8对支持JavaFX有新的特性了,比如:3D等;

javaScript日期相加减例子

当前时间加上2天 var d = new Date(“2015-7-31”); d.setDate(d.getDate()+2); var addTwo=d.getFullYear()+”年”+(d.getMonth()+1)+”月”+d.getDate()+”日”; “控制台输出===============”+”当前日期加2天:”+addTwo; 使用这种方法,月份也会给你计算.

基于SSM+Vue+MySQL的可视化高校公寓管理系统

系统展示 管理员界面 宿管界面 学生界面 系统背景   当前社会各行业领域竞争压力非常大,随着当前时代的信息化,科学化发展,让社会各行业领域都争相使用新的信息技术,对行业内的各种相关数据进行科学化,规范化管理。这样的大环境让那些止步不前,不接受信息改革带来的信息技术的企业随时面临被淘汰,被取代的风险。所以当今,各个行业领域,不管是传统的教育行业

全英文地图/天地图和谷歌瓦片地图杂交/设备分布和轨迹回放/无需翻墙离线使用

一、前言说明 随着风云局势的剧烈变化,对我们搞软件开发的人员来说,影响也是越发明显,比如之前对美对欧的软件居多,现在慢慢的变成了对大鹅和中东以及非洲的居多,这两年明显问有没有俄语或者阿拉伯语的输入法的增多,这要是放在2019年以前,一年也遇不到一个人问这种需求场景的。 地图应用这块也是,之前的应用主要在国内,现在慢慢的多了一些外国的应用场景,这就遇到一个大问题,我们平时主要开发用的都是国内的地