可视化数据大屏 项目中会有渲染地图的需要,除了百度地图以及高德地图外，也会需要echarts或者threejs效果的地图,今天为大家整理十堰市张湾区echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
1 echarts 十堰市张湾区geoJ...
2年前 (2023-10-24)
喜欢
今天学习给平面添加贴图效果
创建平面
首先创建一个平面，给平面设置一个颜色，并添加到场景中。
// 创建平面
var planeGeometry = new THREE.PlaneGeometry(1, 1);
// 给平面设置颜色
var planeMaterial = new...
2年前 (2023-10-23)
喜欢
数据可视化大屏 项目中经常会遇到需要渲染echarts地图 的情况，为了方便不同地区的数据使用，将一些地图数据整理出来，供大家参考，今天为大家整理的是echarts黄石市地区地图geoJson数据。
效果截图
echarts黄石市地区地图geoJson数据
echarts黄石市...
2年前 (2023-10-22)
喜欢
立方缓冲几何体 BoxGeometry
BoxGeometry是四边形的原始几何类，它通常使用构造函数所提供的“width”、“height”、“depth”参数来创建立方体或者不规则四边形。
实例代码
const geometry = new THREE.BoxGeometr...
2年前 (2023-10-21)
喜欢
数据可视化大屏开发中，需要一个卡片轮播的效果，这里选用的是element plus的走马灯，默认的走马灯选中的卡片长度只有50%和设计图的长度还是有差距的，需要调整一下。
实现代码
当我们单独设置了卡片长度后，卡片会出现偏移，这时候我们需要调整一下，让其向左移动一定的距离保证能...
2年前 (2023-10-21)
喜欢
threejs为每个面设置不同的材质
一个面两个材质
创建两个材质，通过addGroup对顶点进行分组，然后将两个材质传进去，就得到了我们上面的效果。
// 创建几何体
const geometry = new THREE.BufferGeometry()
// 顶点坐标 顶点...
2年前 (2023-10-20)
喜欢
数据可视化大屏项目开发中，需要开发一个宽度3200的数据大屏，大屏里左右各有两列数据中间是地图，左右两侧靠近中心的两列可以通过点击箭头进行展开和收缩。
点击箭头后展开状态下会进行收缩，收缩状态下会进行展开，完成动画后，箭头的方向会旋转180度。
演示地址
gsap实现推拉门的...
2年前 (2023-10-20)
喜欢
threejs中所有的面都是由三角形组成。
创建一个三角形
// 创建几何体
const geometry = new THREE.BufferGeometry()
// 顶点坐标 顶点有序 没三个为一个顶点 逆时针为正面
co...
2年前 (2023-10-19)
喜欢
数据大屏开发中，需要监听实时消息，消息是使用的，最新的项目中获取ws数据的方法：vue项目中请求WebSocket获取数据
公共方法
function getSocket(url, params, callback) {
let socket;
if (typeof (...
2年前 (2023-10-17)
喜欢
数据大屏开发中，需要实现一个步骤条的效果，但是步骤条的长度可能会很大超过了当前显示区域，所以我们需要一个可以鼠标横向拖动的效果。
动态拖动效果
开发环境
vue2 webpack js
使用插件
"@better-scroll/core": "^...
2年前 (2023-10-17)
喜欢
