数据可视化大屏 项目中经常会遇到需要渲染echarts地图的情况,为了方便不同城市快速实现效果,将不同城市的echarts地图效果整理出来,供大家参考,今天为大家整理的是合肥市蜀山区echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
echarts合肥市蜀山区geoJson地图地图下钻展示
地图下钻展示,点击地图后,只显示当前选中的区域,可点击返回显示全部地图.
echarts合肥市蜀山区geoJson地图迁徙图
echarts飞线图实例,可以根据自己的需要配置飞线的颜色大小以及方向
echarts合肥市蜀山区geoJson地图圆形波纹状气泡图
echarts地图渲染时,会通过effectScatter实现一个圆形外加波纹扩散效果的气泡来使页面看起来更酷炫.
threejs合肥市蜀山区geoJson地图3d地图css2d标签
通过threejs绘制的3d地图css2d标签实例,CSS2D面向摄像机,不随场景缩放而缩放 vue3 threejs实现在3d地图中绘制css2d地名,如果想系统的学习threejs的话,可以观看threejs视频课程 WebGL前端3D可视化教程
threejs合肥市蜀山区geoJson地图3d地图添加描边效果
通过threejs绘制3d地图使用outlinePass 实现发光描边效果
threejs合肥市蜀山区geoJson地图3d地图CSS3D标签
通过threejs绘制的3d地图CSS3D标签实例,CSS3D不面向摄像机,跟随场景缩放,可以通过rotateY调整角度,通过scale调整大小 Vue3 threejs 在3d地图中绘制css3d标签标注省份
合肥市蜀山区 下辖有 荷叶地街道,井岗镇,南岗镇,西园街道,锦绣社区,三里庵街道,笔架山街道,蜀山新产业园区,稻香村街道,琥珀街道,莲花社区,南七街道,五里墩街道,海恒社区,芙蓉社区,小庙镇,高新技术产业开发区,临湖社区管理管委会
合肥市蜀山区下辖区域坐标
{"荷叶地街道":[117.2316636594485,31.81056395771233],"井岗镇":[117.18552074756278,31.86776236801946],"南岗镇":[117.09896530180981,31.88653084232858],"西园街道":[117.23098950509683,31.84969396262619],"锦绣社区":[117.2119511749064,31.74431415406874],"三里庵街道":[117.25833357478444,31.85229222648489],"笔架山街道":[117.20797651719776,31.81269755107866],"蜀山新产业园区":[117.14415206492137,31.88336148909129],"稻香村街道":[117.25463058584563,31.82966541342218],"琥珀街道":[117.25486696581487,31.86563385133417],"莲花社区":[117.2193829794877,31.77715329319952],"南七街道":[117.23135528521902,31.83465631958499],"五里墩街道":[117.23372061093335,31.86741811082715],"海恒社区":[117.25546984727083,31.77577279368805],"芙蓉社区":[117.18753753047179,31.78420017162233],"小庙镇":[116.99329187044063,31.85573325396044],"高新技术产业开发区":[117.11907634195104,31.818058637048],"临湖社区管理管委会":[117.23727631058838,31.71663731671544]}
合肥市蜀山区行政划分代码
[{"name":"荷叶地街道","code":"340104007000"},{"name":"井岗镇","code":"340104100000"},{"name":"南岗镇","code":"340104101000"},{"name":"西园街道","code":"340104005000"},{"name":"锦绣社区","code":""},{"name":"三里庵街道","code":"340104001000"},{"name":"笔架山街道","code":"340104008000"},{"name":"蜀山新产业园区","code":"340104400000"},{"name":"稻香村街道","code":"340104002000"},{"name":"琥珀街道","code":"340104003000"},{"name":"莲花社区","code":""},{"name":"南七街道","code":"340104004000"},{"name":"五里墩街道","code":"340104006000"},{"name":"海恒社区","code":""},{"name":"芙蓉社区","code":""},{"name":"小庙镇","code":"340104102000"},{"name":"高新技术产业开发区","code":""},{"name":"临湖社区管理管委会","code":""}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看