echarts安阳市内黄县geoJson地图点击弹出自定义弹窗代码演示

echarts yekong

随着开发 数据可视化大屏 项目越来越多,对地图的需求也各不相同,除了百度地图和高德地图外还会遇到echarts和threejs的需要,对地图的效果以及城市也各不相同,今天为大家整理安阳市内黄县echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。

内黄县位于河南省北部,隶属 河南省 安阳市 。北邻河北省魏县,东接濮阳、清丰,南接滑县、鹤壁浚县,西连安阳、汤阴。全县总面积 1161平方千米。根据第七次全国人口普查数据,截至2020年11月1日零时,内黄县常住人口为682070人。

echarts安阳市内黄县geoJson地图点击弹出自定义弹窗

我们可以通过scatter来设置自定义样式,但是这种自定义局限性很大,如果要求的样式很复杂的话,scatter就不能很好的实现了,所以我们可以通过鼠标点击获取横纵坐标,然后通过css来定位到对应的位置.

echarts安阳市内黄县geoJson地图点击弹出自定义弹窗

echarts安阳市内黄县geoJson地图3d地图实例旋转动画

使用的是echarts-gl结合echarts实现的3d地图效果实例

echarts安阳市内黄县geoJson地图3d地图实例旋转动画

echarts安阳市内黄县geoJson地图区域闪烁

echarts地图有时候为了突出某一块区域的重要性,会进行两个颜色的交替变化来告诉用户这一块需要重点关注,我们可以通过echarts的dispatchAction来实现我们想要的效果.

echarts安阳市内黄县geoJson地图区域闪烁

threejs安阳市内黄县geoJson地图3d地图添加旋转棱锥

通过threejs绘制3d地图并在指定经纬度上添加带波纹效果不停旋转的棱锥效果实例,如果对threejs感兴趣,可以观看threejs视频 WebGL前端3D可视化教程

threejs安阳市内黄县geoJson地图3d地图添加旋转棱锥

threejs安阳市内黄县geoJson地图3d地图自定义贴图加CSS3D标签

通过threejs绘制3d地图并添加CSS3D标签和自定义贴图,如果对threejs感兴趣,可以观看threejs视频教程 3D可视化Three.js视频教程

threejs安阳市内黄县geoJson地图3d地图自定义贴图加CSS3D标签

threejs安阳市内黄县geoJson地图3d地图自定义贴图加CSS2D标签

通过threejs绘制3d地图并添加CSS2D标签和自定义贴图,如果对threejs感兴趣,可以观看threejs视频 Three.js视频教程3D可视化

threejs安阳市内黄县geoJson地图3d地图自定义贴图加CSS2D标签

安阳市内黄县下辖有东庄镇,亳城乡,六村乡,石盘屯乡,中召乡,二安乡,井店镇,后河镇,城关镇,宋村乡,张龙乡,田氏镇,梁庄镇,楚旺镇,豆公乡,马上乡,高堤乡

安阳市内黄县下辖区域坐标

{"东庄镇":[114.78765793763785,35.93983083665495],"亳城乡":[114.76321536134043,35.88904981618141],"六村乡":[114.76820435529643,35.8078733824286],"石盘屯乡":[114.7931018294929,36.03029061252837],"中召乡":[114.87924166586106,35.71048773130892],"二安乡":[114.63612030591801,35.82442679153669],"井店镇":[114.71438881695317,35.82653414938677],"后河镇":[114.8639883743794,35.82179945874013],"城关镇":[114.91302611508829,35.91320259654024],"宋村乡":[114.86207848844862,36.11949538353731],"张龙乡":[114.83562298827741,36.00399009588628],"田氏镇":[114.77229816584195,36.0838310797217],"梁庄镇":[114.78876772991485,35.71334317216884],"楚旺镇":[114.86401822206395,36.07274442928595],"豆公乡":[114.73280244337467,36.00067965115011],"马上乡":[114.92023379545506,36.01827426377268],"高堤乡":[114.68178119209186,35.91581172069945]}

说明

1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。

2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。

3、本数据仅用于echarts threejs地图效果展示。

安阳市内黄县echarts地图效果实例和threejs地图效果实例下载

相关文件下载地址
此资源需支付 ¥10 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢
echarts安阳市内黄县geoJson地图点击弹出自定义弹窗代码演示