标签:3d地图

threejs

threejs 3d地图实现省份下钻实例

threejs 3d地图实现省份下钻实例
在之前我们使用echarts绘制的可以下钻的3d地图,vue echarts-gl 3d地图从中国下钻到市级实例,但是echarts-gl绘制出来的3d地图自定义程度不够,我们想要更加灵活的自定义3d地图,所以选择使用threejs来实现3d地图,今天我们来使用threejs来实...

yekong 1年前 (2023-07-03) 喜欢

threejs

threejs 绘制地图高度不受经纬度影响凹陷问题解决

threejs 绘制地图高度不受经纬度影响凹陷问题解决
在之前的threejs 绘制地图高度不受经纬度影响,我们解决了高度问题,但是又衍生出了新的问题,就是地图出现凹陷的情况,我们需要处理一下这种情况。 这种情况可能是由于地图区域在渲染时,高度数值与其他区域相比过低。为了使地图区域不再看起来像凹下去的一块,可以对高度数值进行一定的调整...

yekong 1年前 (2023-07-03) 喜欢

threejs

threejs 绘制地图高度不受经纬度影响

threejs 绘制地图高度不受经纬度影响
在使用threejs绘制地图的时候,threejs 在vue3项目中绘制3d地图效果实例,最近想着做一个地图下钻的效果,但是地图的高度会受到经纬度的影响,进而导致绘制出来的地图高度会跟着受影响,所以我们需要处理一下。 在使用Three.js进行地理空间数据的可视化时,经纬度会影响...

yekong 1年前 (2023-07-03) 喜欢

threejs

threejs 在3d地图中鼠标移入高亮并显示地图名称

threejs 在3d地图中鼠标移入高亮并显示地图名称
在threejs 在3d地图中绘制css2d地名中,我们给地图添加了css2d标签来标注地名,今天我们在之前的基础上来实现鼠标移入地图高亮,并显示对应区域名称。 效果截图 鼠标移入高亮染效果视频 射线拾取 我们通过射线拾取来获取地图信息,并进行高亮,显示当前区域名称。 /**...

yekong 1年前 (2023-07-02) 喜欢

threejs

threejs 在3d地图中绘制css2d地名

threejs 在3d地图中绘制css2d地名
vue 数据可视化大屏 项目开发中,经常需要渲染一些3d地图效果,今天整理一下3d地图并在3d地图中标注地名代码,希望能够让代码快速应用到项目中。 CSS2D标签面向摄像机,场景缩放时,缩小放大都一样大,不被模型遮挡,通过DOM事件点击 css2d标签渲染效果视频 演示实例 ...

yekong 2年前 (2023-06-20) 喜欢

threejs

threejs 在3d地图中绘制css3d标签标注省份

threejs 在3d地图中绘制css3d标签标注省份
上一节我们通过threejs 在3d地图中绘制css2d地名,这一节我们使用css3d来渲染地图地名标签。 大部分代码和threejs 在3d地图中绘制css2d地名一致,只是把css2d标签改为css3d标签了。 CSS3D不面向摄像机,场景缩放时,缩小放大跟随着,不被模型遮挡...

yekong 2年前 (2023-06-20) 喜欢

threejs

threejs 在vue3项目中绘制3d地图效果实例

threejs 在vue3项目中绘制3d地图效果实例
vue 数据可视化大屏 项目开发中,经常需要渲染一些3d地图效果,今天整理一下3d地图的代码,希望能够让代码快速应用到项目中。 演示实例 threejs 在vue3项目中绘制3d地图效果实例 安装依赖 3d地图是使用three实现的,所以首先需要安装一下依赖,threejs不同...

yekong 2年前 (2023-06-19) 喜欢

echarts

vue echarts-gl 3d地图结合gui实现面板配色

vue echarts-gl 3d地图结合gui实现面板配色
vue 数据可视化大屏项目开发中,使用echarts-gl实现3d地图时,客户对地图的颜色不满意,需要重新调配,但是设计师那边没有3d地图的设计图,又不好设计颜色,所以就想着要不做个调色板出来,让客户按照自己的喜好配置颜色吧。 3d地图 配色版 安装依赖 pnpm i lil...

yekong 2年前 (2023-06-05) 喜欢

echarts 3D地图

vue3 echarts-gl 3d地图实例汇总

vue3 echarts-gl 3d地图实例汇总
5.vue echarts-gl 3d地图从中国下钻到市级实例 3d中国地图 3d省级地图 3d市级地图 实例代码 vue echarts-gl 3d地图从中国下钻到市级实例 4. vue echarts-gl 3d地图实现省级下钻实例 效果截图 实例代码 vue ec...

yekong 2年前 (2023-05-31) 喜欢

echarts

vue echarts-gl 3d地图设置地图大小

vue echarts-gl 3d地图设置地图大小
vue echarts-gl 渲染出来的3d地图有时候会超出显示的边界,导致显示不完整,我们希望地图加载后,能够完整的展示地图,这里我们可以通过boxWidth来控制。 关于boxWidth的描述如下: 三维地理坐标系组件在三维场景中的宽度。配合 viewControl.dist...

yekong 2年前 (2023-05-30) 喜欢