可视化数据大屏 项目中经常会遇到需要渲染echarts地图的情况,为了方便不同城市快速实现效果,将不同城市的echarts地图效果整理出来,供大家参考,今天为大家整理的是甘孜藏族自治州理塘县echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
echarts甘孜藏族自治州理塘县geoJson地图圆形波纹状气泡图
echarts地图渲染时,会通过effectScatter实现一个圆形外加波纹扩散效果的气泡来使页面看起来更酷炫.
echarts甘孜藏族自治州理塘县geoJson地图地图排行榜效果
echarts地图根据数据渲染不同颜色的地图,并根据数据大小显示前10名的排序效果,属于地图map类型和柱状图bar类型混合效果
echarts甘孜藏族自治州理塘县geoJson地图点击弹出自定义弹窗
我们可以通过scatter来设置自定义样式,但是这种自定义局限性很大,如果要求的样式很复杂的话,scatter就不能很好的实现了,所以我们可以通过鼠标点击获取横纵坐标,然后通过css来定位到对应的位置.
threejs甘孜藏族自治州理塘县geoJson地图3d地图添加描边效果
通过threejs绘制3d地图使用outlinePass 实现发光描边效果,如果想系统的学习threejs的话,可以观看threejs教程视频 Three.js 3D可视化
threejs甘孜藏族自治州理塘县geoJson地图3d地图鼠标移入显示标签并高亮
通过threejs绘制的3d地图鼠标移入显示标签并高亮
threejs甘孜藏族自治州理塘县geoJson地图3d地图添加旋转棱锥
通过threejs绘制3d地图并在指定经纬度上添加带波纹效果不停旋转的棱锥效果实例
甘孜藏族自治州理塘县 下辖有 呷柯乡,上木拉乡,藏坝乡,雄坝乡,高城镇,哈依乡,喇嘛垭乡,章纳乡,绒坝乡,下木拉乡,中木拉乡,莫坝乡,亚火乡,君坝乡,奔戈乡,觉吾乡,德巫乡,拉波乡,曲登乡,村戈乡,格木乡,甲洼乡,禾尼乡,麦洼乡
甘孜藏族自治州理塘县下辖区域坐标
{"呷柯乡":[100.71358302913916,30.16174941820076],"上木拉乡":[100.51831887080017,29.75316909088126],"藏坝乡":[100.46980101843931,29.60261708243697],"雄坝乡":[100.26097953571217,29.66511660702597],"高城镇":[100.31568782143066,30.00861986118873],"哈依乡":[100.40443581708443,30.41736924311344],"喇嘛垭乡":[99.85116493628887,29.86944821958374],"章纳乡":[99.78425613153539,29.7198036700245],"绒坝乡":[100.57875849669277,30.36931898010708],"下木拉乡":[100.78826007646168,29.48076823944945],"中木拉乡":[100.61324557370261,29.65001137046912],"莫坝乡":[99.96683717570323,30.54861689599546],"亚火乡":[100.09099920215604,30.57782550073243],"君坝乡":[100.2633273779843,30.4084354992081],"奔戈乡":[100.29269690234423,29.95896970575041],"觉吾乡":[100.09898276428157,30.4172763390652],"德巫乡":[100.7008654017105,29.34021277848822],"拉波乡":[100.58480144259809,29.19970396243107],"曲登乡":[99.8642284980244,30.41773165096255],"村戈乡":[100.26695724698706,30.24423695030101],"格木乡":[100.34072996146118,29.39439018157229],"甲洼乡":[100.38424930361145,29.82364767302334],"禾尼乡":[99.86830135811218,30.09506947467566],"麦洼乡":[100.68547980751032,29.10402764747305]}
甘孜藏族自治州理塘县行政划分代码
[{"name":"呷柯乡","code":""},{"name":"上木拉乡","code":"513334213000"},{"name":"藏坝乡","code":"513334218000"},{"name":"雄坝乡","code":""},{"name":"高城镇","code":"513334100000"},{"name":"哈依乡","code":"513334201000"},{"name":"喇嘛垭乡","code":""},{"name":"章纳乡","code":""},{"name":"绒坝乡","code":"513334205000"},{"name":"下木拉乡","code":""},{"name":"中木拉乡","code":""},{"name":"莫坝乡","code":"513334203000"},{"name":"亚火乡","code":"513334204000"},{"name":"君坝乡","code":""},{"name":"奔戈乡","code":"513334207000"},{"name":"觉吾乡","code":""},{"name":"德巫乡","code":"513334222000"},{"name":"拉波乡","code":""},{"name":"曲登乡","code":"513334210000"},{"name":"村戈乡","code":"513334208000"},{"name":"格木乡","code":"513334219000"},{"name":"甲洼乡","code":""},{"name":"禾尼乡","code":"513334209000"},{"name":"麦洼乡","code":"513334221000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看