echarts开封市兰考县geoJson地图tooltip自定义html效果实例

echarts yekong

可视化大屏 项目中经常会遇到需要渲染echarts地图的情况,为了方便不同城市快速实现效果,将不同城市的echarts地图效果整理出来,供大家参考,今天为大家整理的是开封市兰考县echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。

兰考,隶属河南省开封市,河南省财政直管县。位于河南省东北部,北、东与山东省东明县、曹县接壤,东南、南与民权县、杞县相邻,西接祥符区,西北隔黄河与封丘县、长垣市相望,总面积1116.2平方公里。截至2021年10月,兰考县下辖3个街道、8个镇、6个乡。2021年,兰考县常住人口76.46万人。县政府驻中山东街36号。

echarts开封市兰考县geoJson地图tooltip自定义html

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

echarts开封市兰考县geoJson地图tooltip自定义html

echarts开封市兰考县geoJson地图点击跳转到指定页面

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

echarts开封市兰考县geoJson地图点击跳转到指定页面

echarts开封市兰考县geoJson地图指定区域高亮

echarts让指定区域变为选中高亮状态

echarts开封市兰考县geoJson地图指定区域高亮

threejs开封市兰考县geoJson地图3d地图CSS3D标签

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

threejs开封市兰考县geoJson地图3d地图CSS3D标签

threejs开封市兰考县geoJson地图3d地图鼠标移入显示标签并高亮

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

threejs开封市兰考县geoJson地图3d地图鼠标移入显示标签并高亮

开封市兰考县下辖有爪营乡,孟寨乡,城关镇,东坝头乡,葡萄架乡,小宋乡,堌阳镇,仪封乡,南彰镇,城关乡,红庙镇,许河乡,谷营乡,阎楼乡,三义寨乡,张君墓镇

开封市兰考县下辖区域坐标

{"爪营乡":[114.87953370025815,34.91493709797679],"孟寨乡":[115.07322403374403,34.97379608021114],"城关镇":[114.8130369517228,34.82998781632543],"东坝头乡":[114.79281126969732,34.92590032487185],"葡萄架乡":[115.02861168586522,34.83270721277788],"小宋乡":[115.07980643115503,34.90308000402278],"堌阳镇":[114.97115675873923,34.94989527939826],"仪封乡":[114.95237573134786,34.79640588006254],"南彰镇":[115.15008134422762,34.93334486259709],"城关乡":[114.83029610598682,34.81907261541608],"红庙镇":[114.92221569610669,34.86536951259223],"许河乡":[115.21085663657136,34.86281457956521],"谷营乡":[114.84446354489603,34.9773225828384],"阎楼乡":[115.01420604162412,34.90074187653859],"三义寨乡":[114.74608383300327,34.8258151981999],"张君墓镇":[115.13922978530871,34.8259024212676]}

说明

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

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

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

开封市兰考县echarts地图效果实例和threejs地图效果实例下载

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