echarts金华市婺城区geoJson地图 tooltip轮播效果实例

geoJson2 yekong

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

echarts金华市婺城区geoJson地图 tooltip轮播

echarts地图实现类似tooltip轮播效果,通过effectScatter实现浮窗,并通过定时修改effectScatter的data来实现浮窗的移动.

echarts金华市婺城区geoJson地图 tooltip轮播

echarts金华市婺城区geoJson地图tooltip自定义html

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

echarts金华市婺城区geoJson地图tooltip自定义html

echarts金华市婺城区geoJson地图点击地图获取经纬度

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

echarts金华市婺城区geoJson地图点击地图获取经纬度

threejs金华市婺城区geoJson地图3d地图添加旋转棱锥

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

threejs金华市婺城区geoJson地图3d地图添加旋转棱锥

threejs金华市婺城区geoJson地图3d地图自定义贴图加CSS3D标签

通过threejs绘制3d地图并添加CSS3D标签和自定义贴图

threejs金华市婺城区geoJson地图3d地图自定义贴图加CSS3D标签

threejs金华市婺城区geoJson地图3d地图指定区域闪烁

通过threejs绘制3d地图并让指定区域闪烁

threejs金华市婺城区geoJson地图3d地图指定区域闪烁

金华市婺城区 下辖有 城中街道,江南街道,汤溪镇,沙畈乡,三江街道,城东街道,城北街道,城西街道,西关街道,乾西乡,岭上乡,洋埠镇,琅琊镇,竹马乡,箬阳乡,罗埠镇,罗店镇,苏孟乡,莘畈乡,蒋堂镇,长山乡,雅畈镇,秋滨街道,新狮街道,塔石乡,安地镇,白龙桥镇

金华市婺城区下辖区域坐标

{"城中街道":[119.65113102957397,29.10752832259742],"江南街道":[119.64601475138156,29.09341427491846],"汤溪镇":[119.37805267955027,29.02559803026018],"沙畈乡":[119.46619766573554,28.84933032533001],"三江街道":[119.65567140544073,29.0764427668359],"城东街道":[119.6652774896913,29.10676896806707],"城北街道":[119.63385719524506,29.11594671884182],"城西街道":[119.62742813604106,29.09696604686712],"西关街道":[119.6308482481052,29.0769913464049],"乾西乡":[119.58197233529066,29.1219011441947],"岭上乡":[119.43887471034958,28.99019165005053],"洋埠镇":[119.34813868820521,29.09679224914192],"琅琊镇":[119.48114693389726,28.96759767438547],"竹马乡":[119.58387187678147,29.16129588904239],"箬阳乡":[119.55056644719585,28.8342884027401],"罗埠镇":[119.40258709628083,29.10483572564073],"罗店镇":[119.64696297237938,29.1819986800021],"苏孟乡":[119.6271155686683,29.01593253107451],"莘畈乡":[119.35203130079651,28.91912595203356],"蒋堂镇":[119.45076192794164,29.06107232705642],"长山乡":[119.55682195531494,28.99207490036189],"雅畈镇":[119.70047649923069,29.00169912018007],"秋滨街道":[119.60278568050165,29.05524105019524],"新狮街道":[119.6523708238769,29.14914480415649],"塔石乡":[119.37832243312309,28.84748343420357],"安地镇":[119.63040619774165,28.93813057852495],"白龙桥镇":[119.5285930985209,29.07921536161815]}

金华市婺城区行政划分代码

[{"name":"城中街道","code":"330702002000"},{"name":"江南街道","code":"330702005000"},{"name":"汤溪镇","code":"330702106000"},{"name":"沙畈乡","code":"330702205000"},{"name":"三江街道","code":"330702006000"},{"name":"城东街道","code":"330702001000"},{"name":"城北街道","code":"330702004000"},{"name":"城西街道","code":"330702003000"},{"name":"西关街道","code":"330702007000"},{"name":"乾西乡","code":"330702201000"},{"name":"岭上乡","code":""},{"name":"洋埠镇","code":"330702108000"},{"name":"琅琊镇","code":"330702104000"},{"name":"竹马乡","code":"330702202000"},{"name":"箬阳乡","code":"330702204000"},{"name":"罗埠镇","code":"330702107000"},{"name":"罗店镇","code":"330702100000"},{"name":"苏孟乡","code":"330702209000"},{"name":"莘畈乡","code":"330702208000"},{"name":"蒋堂镇","code":"330702105000"},{"name":"长山乡","code":"330702203000"},{"name":"雅畈镇","code":"330702101000"},{"name":"秋滨街道","code":"330702008000"},{"name":"新狮街道","code":"330702009000"},{"name":"塔石乡","code":"330702206000"},{"name":"安地镇","code":"330702102000"},{"name":"白龙桥镇","code":"330702103000"}]

说明

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

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

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

4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看

金华市婺城区echarts地图效果实例和threejs地图效果实例下载

相关文件下载地址
此资源需支付 ¥10 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢
echarts金华市婺城区geoJson地图 tooltip轮播效果实例