可视化数据大屏 项目中会有渲染地图的需要,除了百度地图以及高德地图外，也会需要echarts或者threejs效果的地图,今天为大家整理大同市云冈区echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
云冈区，隶属于 山西省 大同市，位于山西省北部，大同市西南部，总面积737.81平方千米。云冈区属典型的温带大陆性季风气候 。截至2020年11月1日零时，云冈区常住人口为684753人。截至2021年10月，云冈区下辖21个街道、2个镇、4个乡。区人民政府驻口泉乡。
echarts大同市云冈区geoJson地图点击弹出自定义弹窗
我们可以通过scatter来设置自定义样式,但是这种自定义局限性很大,如果要求的样式很复杂的话,scatter就不能很好的实现了,所以我们可以通过鼠标点击获取横纵坐标,然后通过css来定位到对应的位置.
echarts大同市云冈区geoJson地图添加柱状图
echarts地图渲染时,为了让地图上的数据有一个对比的效果,会在地图上标注柱状图,以便于更直观的看出各个区域的数值.
echarts大同市云冈区geoJson地图局部颜色渐变
echarts地图渲染,通过echarts.graphic.LinearGradient线性渐变来实现地图区域颜色的渐变效果
threejs大同市云冈区geoJson地图3d地图自定义贴图加CSS3D标签
通过threejs绘制3d地图并添加CSS3D标签和自定义贴图,如果对threejs感兴趣，可以观看threejs教程视频 Three.js前端3D可视化
threejs大同市云冈区geoJson地图3d地图
通过threejs绘制的3d地图实例
threejs大同市云冈区geoJson地图3d地图添加金色效果
通过threejs绘制3d地图使用outlinePass实现金色描边效果,并通过edgeStrength增加强度,让描边更清晰
大同市云冈区 下辖有 清泉街街道,煤峪口街道,新平旺街道,新胜街道,民胜街道,平泉路街道,平盛路街道,和瑞街道,忻州窑街道,鸦儿崖乡,云冈镇,口泉乡,高山镇,西韩岭乡,清泉街街道,煤峪口街道,新平旺街道,新胜街道,民胜街道,平泉路街道,平盛路街道,和瑞街道,忻州窑街道,鸦儿崖乡,云冈镇,口泉乡,高山镇,西韩岭乡
大同市云冈区下辖区域坐标
{"清泉街街道":[113.22702648176332,40.03446094027707],"煤峪口街道":[113.14886803507653,40.02663516604754],"新平旺街道":[113.18910786237105,40.05988794310967],"新胜街道":[113.17914166087041,40.03512583567797],"民胜街道":[],"平泉路街道":[113.15378127376047,40.02204321065685],"平盛路街道":[113.21802479262828,40.0157981958546],"和瑞街道":[113.21116476818733,40.04327961438424],"忻州窑街道":[113.12080497134255,40.04887730462872],"鸦儿崖乡":[112.96952130514106,39.94572981004657],"云冈镇":[113.11911463319294,40.11523284088546],"口泉乡":[113.11278564455712,39.98265359255936],"高山镇":[112.98870400871968,40.07416057637509],"西韩岭乡":[113.29225318087211,39.96565352954013]}
大同市云冈区行政划分代码
[{"name":"清泉街街道","code":"140214028000"},{"name":"煤峪口街道","code":""},{"name":"新平旺街道","code":"140214002000"},{"name":"新胜街道","code":"140214001000"},{"name":"民胜街道","code":"140214017000"},{"name":"平泉路街道","code":"140214023000"},{"name":"平盛路街道","code":"140214027000"},{"name":"和瑞街道","code":"140214026000"},{"name":"忻州窑街道","code":""},{"name":"鸦儿崖乡","code":"140214210000"},{"name":"云冈镇","code":"140214102000"},{"name":"口泉乡","code":"140214200000"},{"name":"高山镇","code":"140214101000"},{"name":"西韩岭乡","code":"140214206000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
