echarts商丘市宁陵县geoJson地图点击弹出自定义弹窗代码演示

echarts yekong

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

宁陵县,隶属 河南省 商丘市,位于河南省东南部,东与商丘市交界、西和睢县毗连、南同柘城县为邻、北枕黄河故道与商丘市、民权县相连, 地理坐标为东经115°15′-115°30′,北纬34°14′-34°34′。南北长37.5公里,东西宽19.5公里,总面积798平方公里。属于暖温带半湿润季风气候,四季分明,年平均气温14.2℃,年均降水量为674.7毫米,属黄河冲积平原,以沙土和两合土为主。截至2018年,宁陵县辖14个乡镇、1个产业集聚区、1个特色商业区,364个行政村(居委会),县政府驻城关镇 。截至2018年,宁陵县总人口65万。根据第七次人口普查数据,截至2020年11月1日零时,宁陵县常住人口为562657人。

echarts商丘市宁陵县geoJson地图点击弹出自定义弹窗

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

echarts商丘市宁陵县geoJson地图点击弹出自定义弹窗

echarts商丘市宁陵县geoJson地图3d地图实例旋转动画

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

echarts商丘市宁陵县geoJson地图3d地图实例旋转动画

echarts商丘市宁陵县geoJson地图热力图

echarts通过heatmap实现热力图效果

echarts商丘市宁陵县geoJson地图热力图

threejs商丘市宁陵县geoJson地图3d地图添加描边效果

通过threejs绘制3d地图使用outlinePass 实现发光描边效果,如果想系统的学习threejs的话,可以观看threejs视频教程 Three.js前端3D可视化

threejs商丘市宁陵县geoJson地图3d地图添加描边效果

threejs商丘市宁陵县geoJson地图3d地图鼠标移入显示标签并高亮

通过threejs绘制的3d地图鼠标移入显示标签并高亮,如果对threejs感兴趣,可以观看threejs视频 WebGL 3D可视化教程

threejs商丘市宁陵县geoJson地图3d地图鼠标移入显示标签并高亮

threejs商丘市宁陵县geoJson地图3d地图

通过threejs绘制的3d地图实例,如果对threejs感兴趣,可以观看threejs教程视频 Three.js前端3D可视化

threejs商丘市宁陵县geoJson地图3d地图

商丘市宁陵县下辖有刘楼乡,张弓镇,石桥镇,程楼乡,乔楼乡,华堡镇,城关镇,城郊乡,孔集乡,柳河镇,赵村乡,黄岗镇,产业集聚区,逻岗镇,阳驿乡

商丘市宁陵县下辖区域坐标

{"刘楼乡":[115.23720138814716,34.3889154972844],"张弓镇":[115.22811117755059,34.33924914699845],"石桥镇":[115.29486818545898,34.51892176922199],"程楼乡":[115.31519622281738,34.36629846045486],"乔楼乡":[115.37246999940248,34.41737850181198],"华堡镇":[115.28885843991253,34.29276963239795],"城关镇":[115.32006081962243,34.44568173304191],"城郊乡":[115.30400285196782,34.44296851828396],"孔集乡":[115.39694244201937,34.55600497661049],"柳河镇":[115.31070340540191,34.57432299157937],"赵村乡":[115.39746440570252,34.49000113882578],"黄岗镇":[115.19390808422168,34.2929865902508],"产业集聚区":[115.31411112081258,34.47264932688053],"逻岗镇":[115.19375875019128,34.55353785901914],"阳驿乡":[115.23259236172706,34.45216276462732]}

说明

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

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

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

商丘市宁陵县echarts地图效果实例和threejs地图效果实例下载

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