echarts周口市鹿邑县geoJson地图tooltip自定义html效果

echarts yekong 628℃

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

鹿邑县,古称苦县、鸣鹿,隶属于河南省周口市,为河南省省直管县,位于周口市东北部,介于北纬33°43'3”至34°5'32",东经115°2'55"至115°37'50"之间,属温带季风气候,地处黄淮平原涡河中游,豫皖两省交界处,是连接中原经济区和皖江经济带、长三角的枢纽城市,总面积1238平方千米。根据第七次人口普查数据,截至2020年11月1日零时,鹿邑县共有常住人口958617人。

echarts周口市鹿邑县geoJson地图tooltip自定义html

echarts tooltip演示自定义,通过toolTip的formatter方法以html+css的方式实现自己想要的样式效果,鼠标移上去就可以看到我们想要的效果了,也可以通过css自定义为自己需要的样式.

echarts周口市鹿邑县geoJson地图tooltip自定义html

echarts周口市鹿邑县geoJson地图圆形波纹状气泡图

echarts地图渲染时,会通过effectScatter实现一个圆形外加波纹扩散效果的气泡来使页面看起来更酷炫.

echarts周口市鹿邑县geoJson地图圆形波纹状气泡图

echarts周口市鹿邑县geoJson地图点击跳转到指定页面

为图标添加点击事件,点击图标,跳转到指定页面

echarts周口市鹿邑县geoJson地图点击跳转到指定页面

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

通过threejs绘制3d地图并让指定区域闪烁,如果想系统的学习threejs的话,可以观看threejs课程视频 Three.js前端3D可视化教程

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

threejs周口市鹿邑县geoJson地图3d地图CSS3D标签

通过threejs绘制的3d地图CSS3D标签实例,CSS3D不面向摄像机,跟随场景缩放,可以通过rotateY调整角度,通过scale调整大小,如果对threejs感兴趣,可以观看threejs视频教程 Three.js视频教程3D可视化

threejs周口市鹿邑县geoJson地图3d地图CSS3D标签

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

通过threejs绘制3d地图使用outlinePass实现金色描边效果,并通过edgeStrength增加强度,让描边更清晰,如果想系统的学习threejs的话,可以观看threejs课程视频 WebGL/Three.js前端3D可视化教程

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

周口市鹿邑县下辖有涡北镇,卫真街道,任集乡,观堂镇,唐集乡,宋河镇,张店镇,玄武镇,穆店乡,试量镇,贾滩镇,谷阳街道,赵村乡,辛集镇,邱集乡,马铺镇,高集乡,太清宫镇,杨湖口镇,王皮溜镇,生铁冢镇,真源街道,郑家集乡,鸣鹿街道

周口市鹿邑县下辖区域坐标

{"涡北镇":[115.50469476509215,33.90721476650457],"卫真街道":[115.49539286045757,33.85669875913088],"任集乡":[115.14926630238679,33.81947460448281],"观堂镇":[115.43815844044545,33.7930806522548],"唐集乡":[115.11215442986483,33.93172616177343],"宋河镇":[115.59206098202037,34.05819235153221],"张店镇":[115.27958911868078,33.80440240279422],"玄武镇":[115.27281413828017,33.97890573477422],"穆店乡":[115.37224348392073,33.9146091184232],"试量镇":[115.21774837651611,33.87144941724668],"贾滩镇":[115.4735423293713,33.96577714096202],"谷阳街道":[115.44357908052953,33.84176344767121],"赵村乡":[115.33324559144873,33.86589107425971],"辛集镇":[115.1173941005577,33.8756146607234],"邱集乡":[115.28064386858989,33.90768887299674],"马铺镇":[115.54473467296393,33.97858047737947],"高集乡":[115.20275304990031,33.94023456285406],"太清宫镇":[115.56674334769781,33.84804814407143],"杨湖口镇":[115.3723027412277,33.96969967594949],"王皮溜镇":[115.52458822804653,33.77216216867546],"生铁冢镇":[115.37461186324143,33.8008729444616],"真源街道":[115.48007694509218,33.86177171289083],"郑家集乡":[115.57686408952199,33.8124427546532],"鸣鹿街道":[115.45119722318503,33.88293286548416]}

说明

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

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

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

周口市鹿邑县echarts地图效果实例和threejs地图效果实例下载

相关文件下载地址
此资源需支付 ¥10 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢 (0)
echarts周口市鹿邑县geoJson地图tooltip自定义html效果