可视化数据大屏 项目中经常会遇到需要渲染echarts地图的情况,为了方便不同城市快速实现效果,将不同城市的echarts地图效果整理出来,供大家参考,今天为大家整理的是商丘市梁园区echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
梁园区,隶属 河南省 商丘市,地处华北平原,位于河南省东部,商丘市区北部,地理坐标为北纬34°25′~34°45′、东经115°20′~115°63′之间。总面积692平方千米。截至2020年11月1日零时,梁园区常住人口为631325人。梁园区属暖温带季风气候。截至2021年10月,粱园区共辖9个街道、5个镇、3个乡。区人民政府驻平原街道。
echarts商丘市梁园区geoJson地图3d地图自定义图标
echarts 3d地图添加自定义图标实例
echarts商丘市梁园区geoJson地图添加柱状图
echarts地图渲染时,为了让地图上的数据有一个对比的效果,会在地图上标注柱状图,以便于更直观的看出各个区域的数值.
echarts商丘市梁园区geoJson地图阴影
echarts地图阴影效果实例,通过shadowColor控制阴影的颜色,通过shadowBlur控制范围,通过shadowOffsetX和shadowOffsetY控制偏移.
threejs商丘市梁园区geoJson地图3d地图
通过threejs绘制的3d地图实例,如果想系统的学习threejs的话,可以观看threejs视频 WebGL前端3D可视化教程
threejs商丘市梁园区geoJson地图3d地图添加描边效果
通过threejs绘制3d地图使用outlinePass 实现发光描边效果,如果想系统的学习threejs的话,可以观看threejs教程视频 3D可视化Three.js视频教程
threejs商丘市梁园区geoJson地图3d地图CSS2D外加旋转棱锥
通过threejs绘制3d地图CSS2D外加旋转棱锥效果,如果想系统的学习threejs的话,可以观看threejs视频教程 WebGL 3D可视化教程
商丘市梁园区下辖有前进街道,白云街道,长征街道,建设街道,王楼乡,中州街道,八八街道,平安街道,水池铺乡,刘口乡,周集乡,双八镇,张阁镇,李庄乡,观堂乡,谢集镇,东风街道,孙福集乡,平原街道,平台街道
商丘市梁园区下辖区域坐标
{"前进街道":[115.64580181464802,34.43672284926645],"白云街道":[115.67340566170583,34.43754360189079],"长征街道":[115.63617710602205,34.44045508488829],"建设街道":[115.63126731910424,34.47209861852345],"王楼乡":[115.5291400997175,34.4611831906032],"中州街道":[115.68102263343334,34.46647010836443],"八八街道":[115.64635002018755,34.4544673362645],"平安街道":[115.69506695157335,34.42667334705662],"水池铺乡":[115.5167459586528,34.39998378864696],"刘口乡":[115.710337161842,34.56443091459958],"周集乡":[115.75626269814427,34.35306686172677],"双八镇":[115.67689749675284,34.50687062576459],"张阁镇":[115.75275745347338,34.4301387557949],"李庄乡":[115.58243549168529,34.52113426013658],"观堂乡":[115.44240704042988,34.43577506093458],"谢集镇":[115.48259755341913,34.52101096959305],"东风街道":[115.65851960138532,34.4526432271679],"孙福集乡":[115.47364237088775,34.58949470920753],"平原街道":[115.59831658337282,34.45201340872281],"平台街道":[115.71223239655828,34.37846203972605]}
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。