大屏数据可视化 项目中经常会遇到需要渲染echarts地图的情况,为了方便不同城市快速实现效果,将不同城市的echarts地图效果整理出来,供大家参考,今天为大家整理的是郑州市二七区echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
二七区是 河南省 郑州市 的中心城区之一,其位于东经113°30′ ~113°41′,北纬34°36′~34°46′之间,地处郑州市主城区中心偏西南,辖区总面积156.2平方公里,建成区面积36.25平方公里。 二七区属暖温带大陆性季风气候,并具有过渡性气候特征,温暖气团交替频繁。截至2019年,二七区辖15个街道和1个镇,区政府驻地淮河路街道。根据第七次人口普查数据,截至2020年11月1日零时,二七区常住人口为1061263人。
echarts郑州市二七区geoJson地图 tooltip轮播
echarts地图实现类似tooltip轮播效果,通过effectScatter实现浮窗,并通过定时修改effectScatter的data来实现浮窗的移动.
echarts郑州市二七区geoJson地图点击跳转到指定页面
为图标添加点击事件,点击图标,跳转到指定页面
echarts郑州市二七区geoJson地图3d地图实例旋转动画
使用的是echarts-gl结合echarts实现的3d地图效果实例
threejs郑州市二七区geoJson地图3d地图
通过threejs绘制的3d地图实例,如果想系统的学习threejs的话,可以观看threejs视频 WebGL/Three.js前端高薪3D可视化
threejs郑州市二七区geoJson地图3d地图CSS2D外加旋转棱锥
通过threejs绘制3d地图CSS2D外加旋转棱锥效果,如果对threejs感兴趣,可以观看threejs视频教程 Three.js视频教程3D可视化
threejs郑州市二七区geoJson地图3d地图自定义贴图加CSS2D标签
通过threejs绘制3d地图并添加CSS2D标签和自定义贴图,如果对threejs感兴趣,可以观看threejs视频课程 Three.js 3D可视化
郑州市二七区下辖有福华街街道,解放路街道,大学路街道,建中街街道,淮河路街道,嵩山路街道,蜜蜂张街道,铭功路街道,长江路街道,德化街街道,侯寨乡,马寨镇,一马路街道,五里堡街道,京广路街道
郑州市二七区下辖区域坐标
{"福华街街道":[113.6530448572675,34.73180504145279],"解放路街道":[113.65812908922489,34.75536265084967],"大学路街道":[113.63151020981681,34.74373698390826],"建中街街道":[113.64060816223,34.73489641909325],"淮河路街道":[113.62793944147481,34.72847184958304],"嵩山路街道":[113.63577064443496,34.69423804791744],"蜜蜂张街道":[113.6493262898518,34.74992197754199],"铭功路街道":[113.65231098051333,34.75772022099301],"长江路街道":[113.64415949677199,34.71155595416731],"德化街街道":[113.66050297842483,34.7509864416728],"侯寨乡":[113.59045875799016,34.66111410819568],"马寨镇":[113.53460926733256,34.67856037854099],"一马路街道":[113.65643248444081,34.74447954883767],"五里堡街道":[113.62300956302852,34.75169479761885],"京广路街道":[113.66380017474162,34.70318858873847]}
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。