大屏数据可视化 项目中会有渲染地图的需要,除了百度地图以及高德地图外，也会需要echarts或者threejs效果的地图,今天为大家整理中卫市海原县echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
海原县，隶属宁夏回族自治区中卫市。介于东经105°09′-106°10′、北纬36°06′-37°04′之间，位于宁夏回族自治区中南部，地处宁夏中部干旱带，东与固原市原州区相连，南与西吉县接壤，西临甘肃省白银市靖远县、会宁县，北濒中卫市沙坡头区、同心县。南北长95公里，东西宽80公里，县面积4989.6平方公里。下辖17个乡镇、1个甘盐池种羊场、1个街道办事处、1个自然保护区，政府驻地海城镇。根据第七次人口普查数据，截至2020年11月1日零时，海原县常住人口为333518人。
echarts中卫市海原县geoJson地图点击地图插小旗
echarts地图渲染点击地图显示自定义效果实例,效果类似点击插小旗的效果,通过scatter实现.
echarts中卫市海原县geoJson地图点击弹出自定义弹窗
我们可以通过scatter来设置自定义样式,但是这种自定义局限性很大,如果要求的样式很复杂的话,scatter就不能很好的实现了,所以我们可以通过鼠标点击获取横纵坐标,然后通过css来定位到对应的位置.
echarts中卫市海原县geoJson地图区域闪烁
echarts地图有时候为了突出某一块区域的重要性,会进行两个颜色的交替变化来告诉用户这一块需要重点关注,我们可以通过echarts的dispatchAction来实现我们想要的效果.
threejs中卫市海原县geoJson地图3d地图自定义贴图加CSS3D标签
通过threejs绘制3d地图并添加CSS3D标签和自定义贴图,如果想系统的学习threejs的话，可以观看threejs课程视频 Three.js前端3D可视化
threejs中卫市海原县geoJson地图3d地图指定区域闪烁
通过threejs绘制3d地图并让指定区域闪烁
threejs中卫市海原县geoJson地图3d地图自定义贴图加CSS2D标签
通过threejs绘制3d地图并添加CSS2D标签和自定义贴图
中卫市海原县 下辖有 高崖乡,西安镇,贾塘乡,郑旗乡,红羊乡,种羊场,七营镇,三河镇,九彩乡,关庄乡,关桥乡,史店乡,曹洼乡,李俊乡,李旺镇,树台乡,海城镇,甘城乡,涵养林总场,老城管理办公室,海原县工业物流园区
中卫市海原县下辖区域坐标
{"高崖乡":[105.95636485852188,36.84835846030997],"西安镇":[105.44738410797316,36.62965260575463],"贾塘乡":[105.85602859782384,36.57884743546768],"郑旗乡":[105.9709310707977,36.44674884267911],"红羊乡":[105.68073518419112,36.28364286122694],"种羊场":[105.27396261088899,36.62006683370059],"七营镇":[106.15897836486837,36.50827397915259],"三河镇":[106.14050407341426,36.39461786350121],"九彩乡":[105.8727451648709,36.31711029964512],"关庄乡":[105.49993002802324,36.27147018655303],"关桥乡":[105.73077234880213,36.74798141232711],"史店乡":[105.74784942026038,36.57527433047033],"曹洼乡":[105.76050711902687,36.39470128172254],"李俊乡":[105.83554589268977,36.21718111591624],"李旺镇":[106.03862111977605,36.67242364458466],"树台乡":[105.45807071112623,36.44572351779545],"海城镇":[105.62204447169005,36.56743481479255],"甘城乡":[106.33770193339234,36.52223289052966],"涵养林总场":[],"老城管理办公室":[105.63662668303671,36.55344270966106],"海原县工业物流园区":[]}
中卫市海原县行政划分代码
[{"name":"高崖乡","code":"640522206000"},{"name":"西安镇","code":"640522103000"},{"name":"贾塘乡","code":"640522208000"},{"name":"郑旗乡","code":"640522207000"},{"name":"红羊乡","code":"640522212000"},{"name":"种羊场","code":"640522400000"},{"name":"七营镇","code":"640522105000"},{"name":"三河镇","code":"640522104000"},{"name":"九彩乡","code":"640522210000"},{"name":"关庄乡","code":"640522213000"},{"name":"关桥乡","code":"640522202000"},{"name":"史店乡","code":"640522200000"},{"name":"曹洼乡","code":"640522209000"},{"name":"李俊乡","code":"640522211000"},{"name":"李旺镇","code":"640522101000"},{"name":"树台乡","code":"640522201000"},{"name":"海城镇","code":"640522100000"},{"name":"甘城乡","code":"640522214000"},{"name":"涵养林总场","code":""},{"name":"老城管理办公室","code":"640522402000"},{"name":"海原县工业物流园区","code":""}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看
