数据可视化大屏 项目中经常会遇到需要渲染echarts地图的情况,为了方便不同城市快速实现效果,将不同城市的echarts地图效果整理出来,供大家参考,今天为大家整理的是运城市临猗县echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
临猗县,隶属于 山西省 运城市,位于山西西南部,运城盆地北沿,东南与运城市接壤,西南与永济市毗邻,西濒黄河与陕西省合阳县相望,北面孤峰拱秀与万荣县相连,总面积1339.32平方千米。截至2022年10月,临猗县下辖10个镇、4个乡、1个城市社区。截至2022年末,临猗县常住人口为47.7021万人。
echarts运城市临猗县geoJson地图地图排行榜效果
echarts地图根据数据渲染不同颜色的地图,并根据数据大小显示前10名的排序效果,属于地图map类型和柱状图bar类型混合效果
echarts运城市临猗县geoJson地图根据经纬度显示自定义html弹窗
echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.
echarts运城市临猗县geoJson地图圆形波纹状气泡图
echarts地图渲染时,会通过effectScatter实现一个圆形外加波纹扩散效果的气泡来使页面看起来更酷炫.
threejs运城市临猗县geoJson地图3d地图红色描边闪烁警报
通过threejs绘制3d地图使用outlinePass 实现发光描边闪烁效果 以实现警报功能,如果想系统的学习threejs的话,可以观看threejs视频教程 WebGL 3D可视化教程
threejs运城市临猗县geoJson地图3d地图添加旋转棱锥
通过threejs绘制3d地图并在指定经纬度上添加带波纹效果不停旋转的棱锥效果实例
threejs运城市临猗县geoJson地图3d地图CSS3D标签
通过threejs绘制的3d地图CSS3D标签实例,CSS3D不面向摄像机,跟随场景缩放,可以通过rotateY调整角度,通过scale调整大小
运城市临猗县 下辖有 牛杜镇,楚侯乡,角杯乡,卓里工贸区,闫家庄工贸区,东张镇,七级镇,嵋阳镇,临晋镇,孙吉镇,北景乡,耽子镇,猗氏镇,北辛乡,庙上乡,三管镇,牛杜镇,楚侯乡,角杯乡,卓里工贸区,闫家庄工贸区,东张镇,七级镇,嵋阳镇,临晋镇,孙吉镇,北景乡,耽子镇,猗氏镇,北辛乡,庙上乡,三管镇
运城市临猗县下辖区域坐标
{"牛杜镇":[110.77545353746507,35.07533645064007],"楚侯乡":[110.8612263081603,35.09845859256008],"角杯乡":[110.43039755689233,35.13145281467432],"卓里工贸区":[110.62245702233086,35.15662838247988],"闫家庄工贸区":[110.67309984211936,35.20969126409869],"东张镇":[110.41820270992555,35.04896686978569],"七级镇":[110.5429646327973,35.02054114166737],"嵋阳镇":[110.6824536474153,35.08783808948452],"临晋镇":[110.54291617674863,35.08848394490663],"孙吉镇":[110.45707120042664,35.23550514682775],"北景乡":[110.74163899422376,35.22855485172506],"耽子镇":[110.54978459227273,35.16504506875917],"猗氏镇":[110.7846385289002,35.14475916128599],"北辛乡":[110.58227563383369,35.22254889632967],"庙上乡":[110.64504090623333,35.03729127852105],"三管镇":[110.82933811564263,35.21919607722309]}
运城市临猗县行政划分代码
[{"name":"牛杜镇","code":"140821107000"},{"name":"楚侯乡","code":"140821200000"},{"name":"角杯乡","code":""},{"name":"卓里工贸区","code":""},{"name":"闫家庄工贸区","code":""},{"name":"东张镇","code":"140821104000"},{"name":"七级镇","code":"140821103000"},{"name":"嵋阳镇","code":"140821101000"},{"name":"临晋镇","code":"140821102000"},{"name":"孙吉镇","code":"140821105000"},{"name":"北景乡","code":"140821204000"},{"name":"耽子镇","code":"140821108000"},{"name":"猗氏镇","code":"140821100000"},{"name":"北辛乡","code":"140821203000"},{"name":"庙上乡","code":"140821201000"},{"name":"三管镇","code":"140821106000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。