大屏数据可视化 项目中会有渲染地图的需要,除了百度地图以及高德地图外,也会需要echarts或者threejs效果的地图,今天为大家整理萍乡市安源区echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
echarts萍乡市安源区geoJson地图局部颜色渐变
echarts地图渲染,通过echarts.graphic.LinearGradient线性渐变来实现地图区域颜色的渐变效果
echarts萍乡市安源区geoJson地图水滴状气泡图
echarts地图渲染时,会通过一个水滴状小气泡来将数值渲染到地图上,我们可以可以通过scatter来实现我们想要的效果.
echarts萍乡市安源区geoJson地图热力图
echarts通过heatmap实现热力图效果
threejs萍乡市安源区geoJson地图3d地图CSS3D标签
通过threejs绘制的3d地图CSS3D标签实例,CSS3D不面向摄像机,跟随场景缩放,可以通过rotateY调整角度,通过scale调整大小 Vue3 threejs 在3d地图中绘制css3d标签标注省份,如果对threejs感兴趣,可以观看threejs视频教程 WebGL/Three.js前端高薪3D可视化
threejs萍乡市安源区geoJson地图3d地图添加金色效果
通过threejs绘制3d地图使用outlinePass实现金色描边效果,并通过edgeStrength增加强度,让描边更清晰
threejs萍乡市安源区geoJson地图3d地图
通过threejs绘制的3d地图实例 vue3 threejs 在vue3项目中绘制3d地图效果实例
萍乡市安源区 下辖有 八一街街道,五陂镇,东大街街道,安源镇,丹江街街道,后埠街街道,凤凰街街道,白源街街道,五陂下垦殖场,青山镇,高坑镇,城郊管委会
萍乡市安源区下辖区域坐标
{"八一街街道":[113.84002191437682,27.62556286790173],"五陂镇":[113.8508242486235,27.57584077018408],"东大街街道":[113.85413129161141,27.62221113976355],"安源镇":[113.89134717704248,27.61138086154946],"丹江街街道":[113.8558838958057,27.60461967401096],"后埠街街道":[113.84171699453962,27.64244880474627],"凤凰街街道":[113.86946049545382,27.64703776825812],"白源街街道":[113.90294328530945,27.65664559256245],"五陂下垦殖场":[113.87084152361976,27.56120607602421],"青山镇":[113.79567260688896,27.67179318953544],"高坑镇":[113.94953754618027,27.64414146261927],"城郊管委会":[113.83107095234809,27.62577589907131]}
萍乡市安源区行政划分代码
[{"name":"八一街街道","code":"360302003000"},{"name":"五陂镇","code":"360302102000"},{"name":"东大街街道","code":"360302001000"},{"name":"安源镇","code":"360302100000"},{"name":"丹江街街道","code":"360302005000"},{"name":"后埠街街道","code":"360302004000"},{"name":"凤凰街街道","code":"360302002000"},{"name":"白源街街道","code":"360302006000"},{"name":"五陂下垦殖场","code":"360302400000"},{"name":"青山镇","code":"360302103000"},{"name":"高坑镇","code":"360302101000"},{"name":"城郊管委会","code":"360302401000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看