使用echarts的3D地图中的map3D与scatter3D混合使用时出现坐标位移的情况

前段时间同事用echarts的geo3D去做个3D地图，大约是这个效果：

然后设置了地图的的viewControl：(默认是100)

viewControl: {        distance: 125 //地图视角 控制初始大小
},

然后就出现问题了，使用scatter3D生成的这个白点的坐标漂移了，标点标到地图外面去了。

然后去官方查看API，发现scatter3D里也没有distance这个属性呀，百思不得解，然后逐个去看属性，发现了这个：

解释的很简单，于是就怀疑代码里的scatter3D生成的坐标系的坐标轴可能不是展示的3D的地图的坐标轴，往上翻代码，果然发现了问题。

同事设置了一个不显示的geo3D,然后又在series里设置了一个map3D去做展示，但是在map3D中进行了视角的设置，而没有在geo3D中设置，就导致实际上还生成了一个默认不展示的使用默认属性的geo3D图层，造成了scatter3D生成的点使用的是隐藏的这个地图的坐标系，造成了坐标偏移。

改造：将map3D的属性写到geo3D中，将geo3D设置为show，将map3D删除，这样就不会出现坐标偏移了。

mark一下。

使用echarts的3D地图中的map3D与scatter3D混合使用时出现坐标位移的情况相关推荐

使用echarts实现3D地图和需要注意的点
echarts实现3d地图有两种方法一种是map3D 一种是geo3D + series中的内容(比如bar3D.scatter3D) 具体配置Documentation - Apache ECha ...
echarts 渲染3d地图
与渲染2d地图类似 echarts 渲染3d地图要先安装依赖 echarts-gl npm install echarts-gl 但是常常依赖安装失败,这往往是因为安装的这个依赖的版本太高造成的可 ...
echarts——实现3D地图+3D柱状图效果——粗糙代码记录——技能提升
最近看到同事在弄下面的这个图,这个图是从网上看到的,是某个网站的收费项目: 收费模板:￥29.9元购买,且必须是高级版+尊享版才能够购买这个... 死贵!!! 所以,最后的决定是通过echarts中的 ...
Echarts实现3d 地图实现飞线效果
Echarts实现3d 地图实现飞线效果注意:重点关注data中的数据格式在lines3D中symbol不能设置指定样式,echarts官网也没有这个参数,所以对于lines3D飞线如何实现飞机航 ...
echarts实现3D地图，轮播功能、背景图片、鼠标悬浮展示数据，附源码！
echarts实现3D地图,轮播功能.背景图片.鼠标悬浮展示数据,附源码! 一.图片效果二. 代码一.图片效果由于本地图片上传失败,无法展示完整的,不过是在此图的基础上加了轮播和底纹二. 代码 ...
html引入echart地图点击,基于echarts实现3D地图的定时高亮和点击事件
技术选型文章所选技术栈:vue.echarts.echarts-gl 安装Vue和echarts 1.安装echarts和echarts-alnpm i echarts --save npm i e ...
echarts使用3d地图,解决塌陷
echarts使用3d地图打点先上图 1.要提前准备好茂名市.json文件,在使用的时候使用axios异步加载,如果是加载3d省级或者省以上可以参考这篇的引入方式 2.还要安装一些依赖包 1.依赖 ...
简单聊聊Echarts伪3D地图实现的相关配置
知识和技能真的是用进废退,还是得多实践,才不至于遗忘. 目录前言二.实现原理三.从0开始实现 1.目录结构 2.地图JSON数据获取 3.具体实现,重头戏 3.一些常见问题的解决方法总结前言 ...
echarts绘制3D地图
使用echarts和echarts-gl绘制3D地图,下面是一个demo演示,echarts版本4.6.0,echarts-gl版本1.1.2,demo启动前先自行安装,至于背景嘛,大家就自行放个背景 ...

使用echarts的3D地图中的map3D与scatter3D混合使用时出现坐标位移的情况

使用echarts的3D地图中的map3D与scatter3D混合使用时出现坐标位移的情况相关推荐

最新文章

热门文章