echarts辽阳市宏伟区geoJson地图点击弹出自定义弹窗效果

geoJson2 yekong

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

echarts辽阳市宏伟区geoJson地图点击弹出自定义弹窗

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

echarts辽阳市宏伟区geoJson地图点击弹出自定义弹窗

echarts辽阳市宏伟区geoJson地图添加柱状图

echarts地图渲染时,为了让地图上的数据有一个对比的效果,会在地图上标注柱状图,以便于更直观的看出各个区域的数值.

echarts辽阳市宏伟区geoJson地图添加柱状图

echarts辽阳市宏伟区geoJson地图阴影

echarts地图阴影效果实例,通过shadowColor控制阴影的颜色,通过shadowBlur控制范围,通过shadowOffsetX和shadowOffsetY控制偏移.

echarts辽阳市宏伟区geoJson地图阴影

threejs辽阳市宏伟区geoJson地图3d地图自定义贴图加CSS3D标签

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

threejs辽阳市宏伟区geoJson地图3d地图自定义贴图加CSS3D标签

threejs辽阳市宏伟区geoJson地图3d地图CSS3D标签

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

threejs辽阳市宏伟区geoJson地图3d地图CSS3D标签

threejs辽阳市宏伟区geoJson地图3d地图

通过threejs绘制的3d地图实例 vue3 threejs 在vue3项目中绘制3d地图效果实例

threejs辽阳市宏伟区geoJson地图3d地图

辽阳市宏伟区 下辖有 工农街道,新村街道,长征街道,兰家镇,曙光镇,光华街道

辽阳市宏伟区下辖区域坐标

{"工农街道":[123.18407645681103,41.20560751916369],"新村街道":[123.20526917399391,41.18662134981935],"长征街道":[123.21694635309348,41.20250174698671],"兰家镇":[123.1683301874661,41.17481754788199],"曙光镇":[123.23640443770647,41.1867559319911],"光华街道":[123.21553347510043,41.21487024628431]}

辽阳市宏伟区行政划分代码

[{"name":"工农街道","code":"211004001000"},{"name":"新村街道","code":""},{"name":"长征街道","code":"211004004000"},{"name":"兰家镇","code":"211004102000"},{"name":"曙光镇","code":"211004101000"},{"name":"光华街道","code":""}]

说明

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

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

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

辽阳市宏伟区echarts地图效果实例和threejs地图效果实例下载

相关文件下载地址
此资源需支付 ¥10 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢
echarts辽阳市宏伟区geoJson地图点击弹出自定义弹窗效果