可视化大屏 项目中经常会遇到需要渲染echarts地图的情况,为了方便不同城市快速实现效果,将不同城市的echarts地图效果整理出来,供大家参考,今天为大家整理的是广州市天河区echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
天河区,隶属于广东省广州市,位于广州市东部,1985年由广州郊区分出组建,东与黄埔区相连,南与海珠区隔珠江相望,西到广州大道与越秀区相接,北与白云区相邻,行政区域总面积137.38平方公里,下辖21个街道。根据第七次人口普查数据,截至2020年11月1日零时,天河区常住人口2241826人。
echarts广州市天河区geoJson地图全局颜色渐变
echarts地图渲染时,除了局部区域渐变外也会遇到整个地图的颜色渐变效果,我们可以通过areaColor的linear-gradient来实现我们想要的效果
echarts广州市天河区geoJson地图圆形波纹状气泡图
echarts地图渲染时,会通过effectScatter实现一个圆形外加波纹扩散效果的气泡来使页面看起来更酷炫.
echarts广州市天河区geoJson地图水滴状气泡图
echarts地图渲染时,会通过一个水滴状小气泡来将数值渲染到地图上,我们可以可以通过scatter来实现我们想要的效果.
threejs广州市天河区geoJson地图3d地图自定义贴图加CSS2D标签
通过threejs绘制3d地图并添加CSS2D标签和自定义贴图,如果想系统的学习threejs的话,可以观看threejs教程视频 WebGL/Three.js前端高薪3D可视化
threejs广州市天河区geoJson地图3d地图CSS2D外加旋转棱锥
通过threejs绘制3d地图CSS2D外加旋转棱锥效果
threejs广州市天河区geoJson地图3d地图自定义贴图加CSS3D标签
通过threejs绘制3d地图并添加CSS3D标签和自定义贴图
广州市天河区下辖有前进街道,林和街道,沙河街道,黄村街道,猎德街道,石牌街道,车陂街道,长兴街道,元岗街道,凤凰街道,五山街道,兴华街道,珠吉街道,冼村街道,员村街道,新塘街道,棠下街道,沙东街道,龙洞街道,天河南街道,天园街道
广州市天河区下辖区域坐标
{"前进街道":[113.40646070633781,23.11260959303115],"林和街道":[113.31955991112196,23.14786576857642],"沙河街道":[113.30249243791584,23.14921338167721],"黄村街道":[113.40701138596624,23.13920255817425],"猎德街道":[113.32822914361552,23.11622118572075],"石牌街道":[113.34063678581097,23.13879898274829],"车陂街道":[113.38985896206,23.13086163148168],"长兴街道":[113.36353787235062,23.17257010864486],"元岗街道":[113.33947912738157,23.18375412936984],"凤凰街道":[113.38727862596829,23.21379824797843],"五山街道":[113.34913310982125,23.1576502887003],"兴华街道":[113.3191946913571,23.16743591729135],"珠吉街道":[113.42689225487237,23.13628738609636],"冼村街道":[113.32828039309074,23.12589787624661],"员村街道":[113.36436690081155,23.1185728051444],"新塘街道":[113.40425689690626,23.1664086323391],"棠下街道":[113.36898034352093,23.14163404561494],"沙东街道":[113.30726511082474,23.16241665480736],"龙洞街道":[113.36195454729204,23.2087532525525],"天河南街道":[113.31996375425328,23.1366675403766],"天园街道":[113.36626610130384,23.12796184375053]}
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。