大屏数据可视化 项目中经常需要渲染echarts地图,为了不同城市快速实现,将不同城市的echarts地图效果整理出来,今天为大家整理平凉市崇信县echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
崇信县,位于甘肃省 平凉市 东部,东靠泾川、灵台两县,西与华亭接壤,北连崆峒区,南与陕西省陇县毗邻,地处北纬35°1′—35°25′,东经106°50′—107°10′之间。气候属暖温、半干旱大陆性气候区,冬春寒冷干燥,夏秋温热多雨,年平均气温10.7℃,日照2296小时,降雨量400—500毫米,无霜期190天左右。2018年2月,崇信县辖4镇2乡1个工业集中区,1个城市社区管委会,79个行政村,410个合作社,根据第七次人口普查数据,截至2020年11月1日零时,崇信县常住人口82138人。总土地面积850平方公里,有耕地30.53万亩,2020年,崇信县下辖4镇2乡1个工业集中区,79个行政村410个村民小组,6个社区。
echarts平凉市崇信县geoJson地图3d地图
使用的是echarts-gl结合echarts实现的3d地图效果实例
echarts平凉市崇信县geoJson地图水滴状气泡图
echarts地图渲染时,会通过一个水滴状小气泡来将数值渲染到地图上,我们可以可以通过scatter来实现我们想要的效果.
echarts平凉市崇信县geoJson地图地图排行榜效果
echarts地图根据数据渲染不同颜色的地图,并根据数据大小显示前10名的排序效果,属于地图map类型和柱状图bar类型混合效果
threejs平凉市崇信县geoJson地图3d地图鼠标移入显示标签并高亮
通过threejs绘制的3d地图鼠标移入显示标签并高亮,如果想系统的学习threejs的话,可以观看threejs教程视频 WebGL/Three.js前端3D可视化教程
threejs平凉市崇信县geoJson地图3d地图添加金色效果
通过threejs绘制3d地图使用outlinePass实现金色描边效果,并通过edgeStrength增加强度,让描边更清晰
threejs平凉市崇信县geoJson地图3d地图CSS3D标签
通过threejs绘制的3d地图CSS3D标签实例,CSS3D不面向摄像机,跟随场景缩放,可以通过rotateY调整角度,通过scale调整大小
平凉市崇信县 下辖有 五举农场,锦屏街道办,崇信县新窑工业园区,崇信县铜城工业园区,新窑镇,木林乡,柏树乡,锦屏镇,黄寨乡,黄花乡
平凉市崇信县下辖区域坐标
{"五举农场":[107.01697805612999,35.0628085816802],"锦屏街道办":[107.03168744646365,35.30794327311321],"崇信县新窑工业园区":[],"崇信县铜城工业园区":[106.87782136099932,35.2804646000032],"新窑镇":[106.91835128271461,35.15075100515138],"木林乡":[107.13575628650852,35.24682466892347],"柏树乡":[107.10055261532511,35.35351433733402],"锦屏镇":[],"黄寨乡":[106.9425597266983,35.3597373237633],"黄花乡":[107.01895182064169,35.21534570346749]}
平凉市崇信县行政划分代码
[{"name":"五举农场","code":""},{"name":"锦屏街道办","code":""},{"name":"崇信县新窑工业园区","code":""},{"name":"崇信县铜城工业园区","code":""},{"name":"新窑镇","code":"620823101000"},{"name":"木林乡","code":"620823203000"},{"name":"柏树乡","code":""},{"name":"锦屏镇","code":"620823100000"},{"name":"黄寨乡","code":""},{"name":"黄花乡","code":"620823202000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。