数据可视化大屏 项目中经常会遇到需要渲染echarts地图的情况,为了方便不同城市快速实现效果,将不同城市的echarts地图效果整理出来,供大家参考,今天为大家整理的是塔城地区裕民县echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
裕民县隶属于新疆维吾尔自治区塔城地区,位于新疆维吾尔自治区西北部塔额盆地南缘、准噶尔盆地西缘。地处东经82°12′~83°30′,北纬45°24′~46°3′之间,边境地线长146.5公里,县城所在地哈拉布拉镇距乌鲁木齐425公里。全县东西最宽65公里,南北最长120公里,辖2个镇、4个乡。行政区域面积6220平方千米,截至2019年末,裕民县户籍人口为51595人。
echarts塔城地区裕民县geoJson地图点击跳转到指定页面
为图标添加点击事件,点击图标,跳转到指定页面
echarts塔城地区裕民县geoJson地图添加柱状图
echarts地图渲染时,为了让地图上的数据有一个对比的效果,会在地图上标注柱状图,以便于更直观的看出各个区域的数值.
echarts塔城地区裕民县geoJson地图点击地图获取经纬度
echarts地图渲染后,有时候会需要点击后获取到经纬度信息,通过经纬度信息来查询一些内容,这里我们可以通过convertFromPixel来获取经纬度.
threejs塔城地区裕民县geoJson地图3d地图css2d标签
通过threejs绘制的3d地图css2d标签实例,CSS2D面向摄像机,不随场景缩放而缩放 vue3 threejs实现在3d地图中绘制css2d地名,如果想系统的学习threejs的话,可以观看threejs视频 WebGL/Three.js前端3D可视化教程
threejs塔城地区裕民县geoJson地图3d地图红色描边闪烁警报
通过threejs绘制3d地图使用outlinePass 实现发光描边闪烁效果 以实现警报功能
threejs塔城地区裕民县geoJson地图3d地图自定义贴图加CSS3D标签
通过threejs绘制3d地图并添加CSS3D标签和自定义贴图
塔城地区裕民县 下辖有 阿勒腾也木勒乡,新地乡,哈拉布拉乡,哈拉布拉镇,兵团农九师一六一团,吉也克镇,江格斯乡,察汗托海牧场
塔城地区裕民县下辖区域坐标
{"阿勒腾也木勒乡":[83.23448166205515,46.1131973391961],"新地乡":[83.10840321221224,46.11432047625925],"哈拉布拉乡":[],"哈拉布拉镇":[],"兵团农九师一六一团":[],"吉也克镇":[83.01216811901335,46.37438720772357],"江格斯乡":[],"察汗托海牧场":[]}
塔城地区裕民县行政划分代码
[{"name":"阿勒腾也木勒乡","code":"654225202000"},{"name":"新地乡","code":"654225201000"},{"name":"哈拉布拉乡","code":"654225200000"},{"name":"哈拉布拉镇","code":"654225100000"},{"name":"兵团农九师一六一团","code":"654225501000"},{"name":"吉也克镇","code":"654225101000"},{"name":"江格斯乡","code":"654225204000"},{"name":"察汗托海牧场","code":""}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。