- 博客(17)
- 收藏
- 关注
RSS订阅
原创 记录开发基于百度地图API实现在地图上绘制轨迹并拾取轨迹对应经纬度的工具说明
**前言：**最近一直在做数据可视化方面的工作，其中平面可视化没什么难度，毕竟已经有很多成熟的可供使用的框架，比如百度的echart.js，highcharts.js等。还有就是3D可视化了，整体来说难度也还好，通过WEBGL技术一般的可视化效果还是很好实现，如果对于WEBGL光线渲染力不从心的话直接通过three.js来做也是很方便。其实真正困扰我开发的是可视化项目中一般会存在很多基于地...
2019-09-10 21:35:24
2202
2
原创 canvas模拟中国铁路运行图
原理说明1、在知道canvas画布尺寸的情况下，需要将地理经纬度信息转换为canvas画布x，y坐标，因为中国地图地理经纬度坐标取值范围为73.33-135.05（经度）37-50（维度），所以第一步需要确认的就是画布的中心位置，这里命名为centerX和centerY，同样的确认中国地图经纬度对应的中心位置，这里命名为positionX，positionY。2、人为定义一个放大值range，...
2019-10-29 23:00:31
1410
原创 基于canvas实现钟表
原理说明1、通过arc方法实现钟表外环；2、通过line实现钟表时针，分针，秒针和刻度标志的绘制，基于save和restore方法旋转画布绘制不同角度的指针；3、通过font方法实现在画布上绘制文字，基于save和restore方法旋转绘制的文字，使文字正向显示。实例效果图如下绘制钟表圆形边框方法，centerX表示圆中心点x坐标，centerY表示圆中心店y坐标function d...
2019-10-24 21:59:42
1001
原创 canvas实现平面迁徙图
**前言**最近在做自己维护的一个可视化工具的时候，在添加基于echart的雷达图的时候，按照echart官网案例写完发现在自己项目中无法正常运行，排查了一番发现是我项目中echart的版本太低。找到问题原因之后就升级echart，但是升级echart之后发现原本正常运行的echart地图组件又无法使用，百度了一番发现echart在最新的版本中地图数据进行了切换，原先的数据由于不符合规范被砍...
2019-10-15 22:26:27
707
原创 深入理解Three.js中线条Line，LinLoop，LineSegments
在可视化开发中，无论是2d（canvas）开发还是3d开发，线条的绘制应用都是比较普遍的。比如绘制城市之间的迁徙图，运行轨迹图等。本文主要讲解的是Three.js中三种线条Line，LineLoop，LineSegments之间的区别，每种线条的原理和对应参数的含义，以及如何选择使用场景等问题。Three.js中提供了两种线条材质，分别是LineBasicMaterial和LineDashedMaterial，本文中讲解到的示例都使用LineBasicMaterial材质，后续也会专门总结相关材质的文章为读
2019-09-27 09:35:56
5548
2
原创 深入理解Three.js中透视投影照相机PerspectiveCamera
在开始正式讲解透视摄像机前,我们先来理理three.js建模的流程。我们在开始创建一个模型的时候，首先需要创建我们模型需要的物体，这个物体可以是three.js中已经为我们封装好的，比如正方体，球体，平面等，当然我们也可以通过导入的方式导入模型文件。然后我们需要根据项目的需求为创建好的物体添加不同类型的材质，材质可以是纹理，颜色或者是贴图。物体和材质通过new Mesh（）方法就会组合成一个网格mesh，这个时候我们会通过three.js提供的渲染方法将创建好的网格mesh渲染到场景scene中。这个时候你
2019-09-27 09:06:14
2580
原创 深入理解three.js中平面光光源RectAreaLight
前言之前有深入讲解过Three.js中光源，在那篇文章的最后也说了由于平面光光源的特殊性，所以会单独拿出来讲解，这篇文章会详细的讲解平面光光源的特性和实际应用该如何使用。首先，平面光光源从一个矩形平面上均匀地发射光线，这种光源的主要应用场景是模拟明亮的窗户或者条状灯光光源，实际在开发家具建模项目中会有广泛应用。平面光光源的最大特点事不支持阴影，我们无法通过设置RectAreaLight.cas...
2019-09-18 22:52:30
1260
原创 深入理解three.js中光源
前言：Three.js 是一个封装了 WebGL 接口的非常好的库，简化了 WebGL 很多细节，降低了学习成本，是当前前端开发者完成3D绘图的得力工具，那么今天我就给大家详细讲解下 Three.js 中各种光源的区别和引用场景。为了更加直观的展示不同光源的特性，我特意做了一个 demo 通过动画来区别不同类型光源的特性，demo 中会展示点光源，环境光源，平行光源，半球光源，聚光灯光源五中光...
2019-09-17 22:09:49
586
原创 使用vue-cli创建工程的时候提示vue-cli Failed to download repo vuejs-templates/webpack-simple:self signed certifi
最近在使用 vue-cli 脚手架创建项目的时候，遇到 webpack-simple 模板下载不成功的情况，提示 vue-cli Failed to download repo vuejs-templates/webpack-simple:self signed certificate in certificate chain 的原因是因为无法连接外网或者连接超时，这中情况下可以通过手动下载 we...
2019-09-17 10:00:35
1616
原创 three.js实现土星绕太阳自转体系
概况如下：1、SphereGeometry实现自转的太阳，土星；2、RingGeometry实现土星公转轨道；3、ImageUtils加载球体贴图；4、canvas中createRadialGradient实现太阳发光效果；5、THREE.RingGeometry实现土星公转轨道。效果图如下：预览地址：three.js实现土星绕太阳自转体系初始化场景、相机、渲染器，设置相机位置，...
2019-09-16 22:31:32
762
原创 js实现格式化JSON数据方法
最近做的项目中遇到个需要在前端页面中将某个设备需要的数据格式展示出来，方便用户配置。一开始单纯的将数据格式写入到pre标签中， 但是通过pre标签写入的数据格式在代码可视化上不是很优雅。由于上述原因，所以就创建了一个全局的数据格式配置文件，通过es6 中的模板字符串来实现，这样就解决了代码可视化不优雅的问题。但是后面又增加了一个动态数据格式的需求，这样一来就不能通过模板字符串来 解决了，所以就有了这篇文章中讲述的通过js格式画JSON数据的方案，这篇文章旨在记录方案实现的方法，方便自己 以后遇到同样的需求直
2019-09-14 06:56:29
8745
2
原创 获取中国各省市区县经纬度的方法
前言:最近在做基于 node-express 的个人站点 朵朵视野 ,在站点发布之后自己在访问测试的过程中发现站点是没有缓存机制的,这样就导致每次访问站点都需要重新去加载资源,很消耗资源以及用户体验也不是很好.因为站点有上述问题,所以就着手去解决这个问题，解决方法就是通过浏览器缓存来实现。解决过程也是一波三折，最开始想的是通过设置最大过期时间 maxage 来实现，但是做完测试过程中发现通过这...
2019-09-12 14:03:36
4761
1
原创 three.js通过canvas实现球体世界平面地图
概况如下：1、SphereGeometry实现自转的地球；2、THREE.CatmullRomCurve3实现球体线条地图点确定；3、THREE.Math.degToRad，Math.sin，Math.cos实现地图经纬度与三位坐标x，y，z之间的转换；4、MeshLine用于绘制线条；5、canvas用于绘制球体世界地图贴图，通过THREE.CanvasTexture引入。效果图如下...
2019-09-05 23:11:56
3670
3
原创 three.js实现世界地图城市迁徙图
概况如下：1、THREE.CylinderGeometry，THREE.SphereGeometry绘制地图上的标记；2、THREE.CanvasTexture用于加载canvas绘制的字体；3、THREE.Shape，MeshLine用于实现平面地图；4、THREE.ExtrudeGeometry用于将绘制的平面地图沿Z轴拉伸，出现3d效果；5、THREE.CubicBezierCur...
2019-09-04 23:23:38
2491
原创 three.js实现世界3d地图
概况如下：1、THREE.Shape绘制世界地图平面地图；2、THREE.ExtrudeGeometry将绘制的平面沿着Z轴拉伸，实现3d效果；效果图如下：预览地址：three.js实现世界3d地图初始化场景、相机、渲染器，设置相机位置，初始化光源，光源采用HemisphereLight，设置光源位置为场景中心位置，并将光源加入场景中。// 初始化场景var scene = new...
2019-09-03 22:20:42
2852
原创 three.js实现球体地球2018年全球GDP前十国家标记
three.js实现球体地球2018年全球GDP前十国家标记概况如下：1、SphereGeometry实现自转的地球；2、THREE.Math.degToRad，Math.sin，Math.cos实现地图经纬度与三位坐标x，y，z之间的转换；3、ImageUtils加载球体贴图；4、THREE.CubicBezierCurve3 创建标记立体轨迹，调用getPoints将轨迹分成需要的段...
2019-08-31 15:29:09
480
原创 three.js实现球体地球城市模拟迁徙
1、SphereGeometry实现自转的地球；2、THREE.ImageUtils.loadTexture加载地图贴图材质；3、THREE.Math.degToRad，Math.sin，Math.cos实现地图经纬度与三位坐标x，y，z之间的转换；4、轨迹中根据分段数与相应国家gdp值来实现城市标记。
2019-08-28 22:32:25
1411
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人