数据可视化大屏 项目中经常会遇到需要渲染echarts地图的情况,为了方便不同城市快速实现效果,将不同城市的echarts地图效果整理出来,供大家参考,今天为大家整理的是安庆市桐城市echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
echarts安庆市桐城市geoJson地图自定义引导线
echarts地图渲染中,会遇到多个地名凑到一块导致名称重叠的情况,这时候我们可以通过一条线指向对应的位置并通过label来进行标注的效果.
echarts安庆市桐城市geoJson地图飞线图
echarts飞线图实例,可以根据自己的需要配置飞线的颜色大小以及方向
echarts安庆市桐城市geoJson地图阴影
echarts地图阴影效果实例,通过shadowColor控制阴影的颜色,通过shadowBlur控制范围,通过shadowOffsetX和shadowOffsetY控制偏移.
threejs安庆市桐城市geoJson地图3d地图CSS2D外加旋转棱锥
通过threejs绘制3d地图CSS2D外加旋转棱锥效果,如果想系统的学习threejs的话,可以观看threejs教程视频 Three.js前端3D可视化
threejs安庆市桐城市geoJson地图3d地图添加金色效果
通过threejs绘制3d地图使用outlinePass实现金色描边效果,并通过edgeStrength增加强度,让描边更清晰
threejs安庆市桐城市geoJson地图3d地图指定区域闪烁
通过threejs绘制3d地图并让指定区域闪烁
安庆市桐城市 下辖有 新渡镇,龙眠街道,范岗镇,金神镇,青草镇,唐湾镇,双港镇,桐城双新经济开发区,吕亭镇,大关镇,鲟鱼镇,黄甲镇,嬉子湖镇,文昌街道,龙腾街道,孔城镇
安庆市桐城市下辖区域坐标
{"新渡镇":[116.86895714790776,30.87109118953583],"龙眠街道":[116.92457446963249,31.04883144796454],"范岗镇":[116.8777407097564,30.96391045272946],"金神镇":[116.9706444003387,30.90499068030874],"青草镇":[116.76461524669406,30.89493752902644],"唐湾镇":[116.74998986246463,31.01124724882555],"双港镇":[116.96830405754967,30.79252993773825],"桐城双新经济开发区":[116.89872783950557,30.83091533097995],"吕亭镇":[117.00213809518897,31.13442510077512],"大关镇":[117.01698133616121,31.19257704436485],"鲟鱼镇":[117.21731042859896,30.68987801753645],"黄甲镇":[116.83144195309102,31.05481566788666],"嬉子湖镇":[117.04906301002171,30.85694190787063],"文昌街道":[116.90986078726371,31.04172171818087],"龙腾街道":[117.0027430903641,31.03144025180447],"孔城镇":[117.06996541495457,31.02347675064506]}
安庆市桐城市行政划分代码
[{"name":"新渡镇","code":"340881103000"},{"name":"龙眠街道","code":"340881003000"},{"name":"范岗镇","code":"340881102000"},{"name":"金神镇","code":"340881107000"},{"name":"青草镇","code":"340881106000"},{"name":"唐湾镇","code":"340881109000"},{"name":"双港镇","code":"340881104000"},{"name":"桐城双新经济开发区","code":"340881401000"},{"name":"吕亭镇","code":"340881101000"},{"name":"大关镇","code":"340881105000"},{"name":"鲟鱼镇","code":"340881111000"},{"name":"黄甲镇","code":"340881110000"},{"name":"嬉子湖镇","code":"340881108000"},{"name":"文昌街道","code":"340881002000"},{"name":"龙腾街道","code":"340881001000"},{"name":"孔城镇","code":"340881100000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看