echarts周口市太康县geoJson地图点击地图获取经纬度实例

echarts yekong 1年前 (2023-04-20) 579℃

数据可视化大屏 项目中经常需要渲染 echarts地图，为了不同城市快速实现，将不同城市的echarts地图效果整理出来，今天为大家整理周口市太康县echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。

太康县，隶属河南省 周口市，位于河南省东部、黄淮平原西北部、淮河支流涡河上游。东临柘城县、鹿邑县，南接淮阳区、西华县，西连扶沟县，北靠通许县、杞县、睢县，总面积1759平方千米。截至2016年，太康县总人口146.5万人。截至2021年10月，太康县下辖15个镇、8个乡。
秦始皇二十三年（前224年），置阳夏县，属颍川郡。隋开皇七年（587年），改阳夏县为太康县，属陈州。2000年，撤销周口地区，设立地级周口市，太康县隶属周口市。2019年5月9日，太康县正式退出贫困县序列。

echarts周口市太康县geoJson地图点击地图获取经纬度

echarts地图渲染后,有时候会需要点击后获取到经纬度信息,通过经纬度信息来查询一些内容,这里我们可以通过convertFromPixel来获取经纬度.

echarts周口市太康县geoJson地图点击地图插小旗

echarts地图渲染点击地图显示自定义效果实例,效果类似点击插小旗的效果,通过scatter实现.

echarts周口市太康县geoJson地图点击弹出自定义弹窗

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

threejs周口市太康县geoJson地图3d地图自定义贴图加CSS3D标签

通过threejs绘制3d地图并添加CSS3D标签和自定义贴图,如果想系统的学习threejs的话，可以观看 threejs课程视频 3D可视化Three.js视频教程

threejs周口市太康县geoJson地图3d地图添加金色效果

通过threejs绘制3d地图使用outlinePass实现金色描边效果,并通过edgeStrength增加强度,让描边更清晰,如果对threejs感兴趣，可以观看 threejs视频课程 Three.js 3D可视化

threejs周口市太康县geoJson地图3d地图指定区域闪烁

通过threejs绘制3d地图并让指定区域闪烁,如果对threejs感兴趣，可以观看threejs视频教程 Three.js 3D可视化

周口市太康县下辖有杨庙乡,城郊乡,独塘乡,逊母口镇,城关回族镇,王集乡,清集镇,大许寨乡,常营镇,张集镇,朱口镇,板桥镇,毛庄镇,老冢镇,转楼乡,马厂镇,马头镇,高朗乡,高贤乡,龙曲镇,五里口乡,符草楼镇,芝麻洼乡

周口市太康县下辖区域坐标

{"杨庙乡":[114.92731403054472,34.17823010369588],"城郊乡":[114.87332630351816,34.08222930755321],"独塘乡":[114.77737753814523,34.0985826179307],"逊母口镇":[114.712780068816,34.02534643109071],"城关回族镇":[114.8535716567838,34.06608126420418],"王集乡":[114.8221263907636,34.16479310753066],"清集镇":[114.70196126274553,34.12282327163385],"大许寨乡":[114.80030280890762,34.00431352957703],"常营镇":[114.59740175997317,34.12401014009386],"张集镇":[115.01633646626175,33.9640278740894],"朱口镇":[115.06904282006644,34.08611152501666],"板桥镇":[114.62519742562723,34.02846488463399],"毛庄镇":[114.86758044629582,34.03378275546194],"老冢镇":[114.86589061434023,33.94487142730519],"转楼乡":[114.95862176674329,34.23399370815166],"马厂镇":[115.00231151541351,34.03478285110992],"马头镇":[115.05196011611207,34.18528604559093],"高朗乡":[114.94988681429513,34.11470365632364],"高贤乡":[114.74044270781161,34.2001229802498],"龙曲镇":[114.81950681120836,34.24580102141447],"五里口乡":[114.74713701623654,33.93739388217917],"符草楼镇":[114.93972900744899,33.96560449692973],"芝麻洼乡":[114.66549050464519,34.20998385260029]}

说明

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

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

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

周口市太康县echarts地图效果实例和threejs地图效果实例下载