可视化数据大屏 项目中经常会遇到需要渲染echarts地图的情况，为了方便不同城市快速实现效果，将不同城市的echarts地图效果整理出来，供大家参考，今天为大家整理的是信阳市潢川县echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
潢川县，古称光州，是黄氏和浮光陈氏发源地，位于河南省东南部，信阳市中东部。总面积1666.1平方公里。民国二年（1913年）3月1日，国务院批准改光州为潢川县。根据第七次人口普查数据，截至2020年11月1日零时，潢川县常住人口为63.67万人。
echarts信阳市潢川县geoJson地图水滴状气泡图
echarts地图渲染时,会通过一个水滴状小气泡来将数值渲染到地图上,我们可以可以通过scatter来实现我们想要的效果.
echarts信阳市潢川县geoJson地图根据经纬度显示自定义html弹窗
echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.
echarts信阳市潢川县geoJson地图添加柱状图
echarts地图渲染时,为了让地图上的数据有一个对比的效果,会在地图上标注柱状图,以便于更直观的看出各个区域的数值.
threejs信阳市潢川县geoJson地图3d地图CSS2D外加旋转棱锥
通过threejs绘制3d地图CSS2D外加旋转棱锥效果,如果想系统的学习threejs的话，可以观看threejs视频教程 3D可视化Three.js视频教程
threejs信阳市潢川县geoJson地图3d地图鼠标移入显示标签并高亮
通过threejs绘制的3d地图鼠标移入显示标签并高亮，如果对threejs感兴趣，可以观看threejs视频教程 Three.js前端3D可视化
threejs信阳市潢川县geoJson地图3d地图css2d标签
通过threejs绘制的3d地图css2d标签实例，CSS2D面向摄像机,不随场景缩放而缩放,如果想系统的学习threejs的话，可以观看threejs课程视频 WebGL前端3D可视化教程
信阳市潢川县下辖有河南省潢川经济技术开发区,老城街道,踅孜镇,来龙乡,卜塔集镇,仁和镇,伞陂镇,谈店乡,隆古乡,定城街道,魏岗乡,春申街道,上油岗乡,传流店乡,双柳树镇,弋阳街道,桃林铺镇,江家集镇,黄寺岗镇,白店乡,付店镇,张集乡,黄湖农场
信阳市潢川县下辖区域坐标
{"河南省潢川经济技术开发区":[115.09933408648637,32.12327925454537],"老城街道":[115.03762694221672,32.10174891965836],"踅孜镇":[115.19922100908335,32.31957001136171],"来龙乡":[115.13352882575983,32.31699876138804],"卜塔集镇":[115.01752614707699,32.04561295025665],"仁和镇":[115.11863312373461,31.94560412314187],"伞陂镇":[115.14417021138044,32.1327594777749],"谈店乡":[115.17600741646856,32.21456806690688],"隆古乡":[114.98000560661325,32.1989337728139],"定城街道":[115.05069038077492,32.1650136352897],"魏岗乡":[115.07226785188396,32.24289492010455],"春申街道":[115.0047964040633,32.1292822725511],"上油岗乡":[115.25679307064544,32.30479367495624],"传流店乡":[115.16302037264857,32.02783837337007],"双柳树镇":[115.20105558941248,31.92959315340279],"弋阳街道":[115.09404482285512,32.12848948479179],"桃林铺镇":[115.31127413091684,32.18702683748993],"江家集镇":[115.24312114340138,31.98893021932764],"黄寺岗镇":[115.24106512764723,32.14634331443565],"白店乡":[115.04951953944173,32.00522440805884],"付店镇":[114.95470367999314,32.13645540623155],"张集乡":[115.30817079970294,32.08625518370273],"黄湖农场":[115.34338181370282,32.23619835466529]}
