可视化数据大屏 项目中经常会遇到需要渲染echarts地图的情况，为了方便不同城市快速实现效果，将不同城市的echarts地图效果整理出来，供大家参考，今天为大家整理的是白银市白银区echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
白银区，隶属于 甘肃省 白银市，白银因矿得名，因企设区。位于甘肃中部、白银市西部，黄河上游中段，地处陇西黄土高原西北边缘，地形总趋势西北高，东南低，平均海拔1946.5米。西与兰州市皋兰县接壤；南临黄河，与榆中县青城乡及靖远县平堡乡隔河相望；东与靖远县刘川乡毗邻；北与景泰县中泉乡为界。根据第七次人口普查数据，截至2020年11月1日零时，白银区常住人口337645人。
echarts白银市白银区geoJson地图label样式自定义
echarts通过scatter实例可以配置自己想要的图标,以及label文字的样式效果
echarts白银市白银区geoJson地图地图下钻展示
地图下钻展示,点击地图后,只显示当前选中的区域,可点击返回显示全部地图.
echarts白银市白银区geoJson地图点击弹出自定义弹窗
我们可以通过scatter来设置自定义样式,但是这种自定义局限性很大,如果要求的样式很复杂的话,scatter就不能很好的实现了,所以我们可以通过鼠标点击获取横纵坐标,然后通过css来定位到对应的位置.
threejs白银市白银区geoJson地图3d地图鼠标移入显示标签并高亮
通过threejs绘制的3d地图鼠标移入显示标签并高亮,如果对threejs感兴趣，可以观看threejs教程视频 WebGL前端3D可视化教程
threejs白银市白银区geoJson地图3d地图添加描边效果
通过threejs绘制3d地图使用outlinePass 实现发光描边效果
threejs白银市白银区geoJson地图3d地图CSS3D标签
通过threejs绘制的3d地图CSS3D标签实例，CSS3D不面向摄像机，跟随场景缩放,可以通过rotateY调整角度,通过scale调整大小
白银市白银区 下辖有 四龙镇,强湾乡,武川乡,水川镇,王岘镇,四龙路街道,人民路街道,公园路街道,工农路街道
白银市白银区下辖区域坐标
{"四龙镇":[104.33552215545426,36.44506966242682],"强湾乡":[],"武川乡":[],"水川镇":[104.2321319339169,36.34742421412711],"王岘镇":[104.17697977629587,36.56935807742684],"四龙路街道":[104.20195250257532,36.56416287748809],"人民路街道":[104.16709987475376,36.53908423883715],"公园路街道":[104.20237672030694,36.52427372896365],"工农路街道":[104.1435564596397,36.56949934349819],"纺织路街道":[104.11771447152451,36.54177405075056]}
白银市白银区行政划分代码
[{"name":"四龙镇","code":"620402101000"},{"name":"强湾乡","code":"620402201000"},{"name":"武川乡","code":"620402202000"},{"name":"水川镇","code":"620402100000"},{"name":"王岘镇","code":"620402102000"},{"name":"四龙路街道","code":"620402003000"},{"name":"人民路街道","code":"620402001000"},{"name":"公园路街道","code":"620402002000"},{"name":"工农路街道","code":"620402004000"},{"name":"纺织路街道","code":"620402005000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
