echarts南充市高坪区geoJson地图3d地图实例旋转动画效果

geoJson2 yekong

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

echarts南充市高坪区geoJson地图3d地图实例旋转动画

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

echarts南充市高坪区geoJson地图3d地图实例旋转动画

echarts南充市高坪区geoJson地图全局颜色渐变

echarts地图渲染时,除了局部区域渐变外也会遇到整个地图的颜色渐变效果,我们可以通过areaColor的linear-gradient来实现我们想要的效果

echarts南充市高坪区geoJson地图全局颜色渐变

echarts南充市高坪区geoJson地图地图下钻展示

地图下钻展示,点击地图后,只显示当前选中的区域,可点击返回显示全部地图.

echarts南充市高坪区geoJson地图地图下钻展示

threejs南充市高坪区geoJson地图3d地图鼠标移入显示标签并高亮

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

threejs南充市高坪区geoJson地图3d地图鼠标移入显示标签并高亮

threejs南充市高坪区geoJson地图3d地图自定义贴图加CSS2D标签

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

threejs南充市高坪区geoJson地图3d地图自定义贴图加CSS2D标签

threejs南充市高坪区geoJson地图3d地图CSS3D标签

通过threejs绘制的3d地图CSS3D标签实例,CSS3D不面向摄像机,跟随场景缩放,可以通过rotateY调整角度,通过scale调整大小 Vue3 threejs 在3d地图中绘制css3d标签标注省份

threejs南充市高坪区geoJson地图3d地图CSS3D标签

南充市高坪区 下辖有 长乐镇,老君镇,胜观镇,螺溪镇,鄢家乡,走马乡,小龙街道,清溪街道,万家乡,喻家乡,凤凰乡,南江乡,东观镇,会龙镇,御史乡,佛门乡,擦耳镇,斑竹乡,永安镇,江陵镇,青松街道,溪头乡,青莲街道,石圭镇,阙家镇,隆兴乡,青居镇,马家乡,黄溪乡,白塔街道,都京街道,龙门街道

南充市高坪区下辖区域坐标

{"长乐镇":[106.36402337728215,30.80272885447405],"老君镇":[106.21980004301999,30.78040905913043],"胜观镇":[106.41084906808652,30.75019482606565],"螺溪镇":[106.1931648858382,30.82666205939528],"鄢家乡":[106.38710231048671,30.71335055260997],"走马乡":[106.24060903445967,30.81158930881156],"小龙街道":[106.15033488527939,30.83740445133049],"清溪街道":[106.12669514381969,30.75777811155785],"万家乡":[106.241591453654,30.73028817402086],"喻家乡":[106.26680522557578,30.84232704818059],"凤凰乡":[106.22479354559394,30.84967715197578],"南江乡":[106.32067441049895,30.77089790234726],"东观镇":[106.28213794696775,30.7785510233991],"会龙镇":[106.34943215911991,30.84769549877362],"御史乡":[106.29930104191419,30.85868729391623],"佛门乡":[106.1887842210671,30.71797987774524],"擦耳镇":[106.27797686700914,30.89761915695147],"斑竹乡":[106.35843186252491,30.75496556418803],"永安镇":[106.12847820395814,30.70703173037975],"江陵镇":[106.25100502846271,30.9362592767088],"青松街道":[106.16576575937896,30.79404962683881],"溪头乡":[106.13946135478682,30.62726446930883],"青莲街道":[106.17920293234708,30.77140939279217],"石圭镇":[106.14305954546006,30.59521048572786],"阙家镇":[106.15700121979134,30.67075810528379],"隆兴乡":[106.43698865419029,30.7946672425321],"青居镇":[106.09273103592614,30.68211971499805],"马家乡":[106.30776887148468,30.81553837442788],"黄溪乡":[106.29961353332602,30.72020793425725],"白塔街道":[106.12031449068746,30.79917417284273],"都京街道":[106.09518658450716,30.74944206742151],"龙门街道":[106.19937111427194,30.89842496715013]}

南充市高坪区行政划分代码

[{"name":"长乐镇","code":"511303107000"},{"name":"老君镇","code":""},{"name":"胜观镇","code":"511303108000"},{"name":"螺溪镇","code":""},{"name":"鄢家乡","code":""},{"name":"走马乡","code":""},{"name":"小龙街道","code":"511303003000"},{"name":"清溪街道","code":"511303002000"},{"name":"万家乡","code":""},{"name":"喻家乡","code":""},{"name":"凤凰乡","code":""},{"name":"南江乡","code":""},{"name":"东观镇","code":"511303106000"},{"name":"会龙镇","code":"511303115000"},{"name":"御史乡","code":""},{"name":"佛门乡","code":"511303211000"},{"name":"擦耳镇","code":"511303104000"},{"name":"斑竹乡","code":""},{"name":"永安镇","code":""},{"name":"江陵镇","code":"511303103000"},{"name":"青松街道","code":""},{"name":"溪头乡","code":""},{"name":"青莲街道","code":"511303005000"},{"name":"石圭镇","code":"511303111000"},{"name":"阙家镇","code":"511303110000"},{"name":"隆兴乡","code":""},{"name":"青居镇","code":"511303112000"},{"name":"马家乡","code":""},{"name":"黄溪乡","code":""},{"name":"白塔街道","code":"511303001000"},{"name":"都京街道","code":"511303006000"},{"name":"龙门街道","code":"511303004000"}]

说明

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

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

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

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

南充市高坪区echarts地图效果实例和threejs地图效果实例下载

相关文件下载地址
此资源需支付 ¥10 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢
echarts南充市高坪区geoJson地图3d地图实例旋转动画效果