随着开发 数据可视化大屏 项目越来越多,对地图的需求也各不相同,除了百度地图和高德地图外还会遇到echarts和threejs的需要,对地图的效果以及城市也各不相同,今天为大家整理六安市舒城县echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
echarts六安市舒城县geoJson地图根据经纬度显示自定义html弹窗
echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.
echarts六安市舒城县geoJson地图区域闪烁
echarts地图有时候为了突出某一块区域的重要性,会进行两个颜色的交替变化来告诉用户这一块需要重点关注,我们可以通过echarts的dispatchAction来实现我们想要的效果.
echarts六安市舒城县geoJson地图全局颜色渐变
echarts地图渲染时,除了局部区域渐变外也会遇到整个地图的颜色渐变效果,我们可以通过areaColor的linear-gradient来实现我们想要的效果
threejs六安市舒城县geoJson地图3d地图鼠标移入显示标签并高亮
通过threejs绘制的3d地图鼠标移入显示标签并高亮,如果想系统的学习threejs的话，可以观看threejs课程视频 3D可视化Three.js视频教程
threejs六安市舒城县geoJson地图3d地图
通过threejs绘制的3d地图实例 vue3 threejs 在vue3项目中绘制3d地图效果实例
threejs六安市舒城县geoJson地图3d地图自定义贴图加CSS3D标签
通过threejs绘制3d地图并添加CSS3D标签和自定义贴图
六安市舒城县 下辖有 舒茶镇,山七镇,杭埠镇,桃溪镇,春秋乡,阙店乡,万佛湖镇,高峰乡,河棚镇,庐镇乡,五显镇,南港镇,城关镇,晓天镇,柏林乡,棠树乡,汤池镇,千人桥镇,百神庙镇,干汊河镇,张母桥镇,舒城县经济开发区
六安市舒城县下辖区域坐标
{"舒茶镇":[117.02411244569208,31.32287501983519],"山七镇":[116.65968754642225,31.21261204079848],"杭埠镇":[117.1768176185025,31.5172631760733],"桃溪镇":[116.99442935754061,31.51931727314848],"春秋乡":[116.89651902657839,31.31884872923305],"阙店乡":[116.83083758785088,31.31243179326607],"万佛湖镇":[116.73604685304076,31.3410245104776],"高峰乡":[116.73445599172749,31.24979163020496],"河棚镇":[116.78313482232463,31.19318960040073],"庐镇乡":[116.75229390216771,31.10926641601582],"五显镇":[116.62702948730458,31.32415889598673],"南港镇":[116.98088307296767,31.32134351851879],"城关镇":[116.96369881553082,31.4268168029577],"晓天镇":[116.560884406996,31.15381945304856],"柏林乡":[116.88709603024802,31.48898511815069],"棠树乡":[116.80430043802968,31.43021254996756],"汤池镇":[116.8730427431033,31.20767025105073],"千人桥镇":[117.0702283927173,31.50049681800614],"百神庙镇":[117.06769077376379,31.4350681070163],"干汊河镇":[116.86809635975428,31.39679640487605],"张母桥镇":[116.70444009806286,31.40997666468004],"舒城县经济开发区":[116.94304629509354,31.47605374459345]}
六安市舒城县行政划分代码
[{"name":"舒茶镇","code":"341523107000"},{"name":"山七镇","code":"341523112000"},{"name":"杭埠镇","code":"341523106000"},{"name":"桃溪镇","code":"341523102000"},{"name":"春秋乡","code":"341523200000"},{"name":"阙店乡","code":"341523203000"},{"name":"万佛湖镇","code":"341523103000"},{"name":"高峰乡","code":"341523204000"},{"name":"河棚镇","code":"341523113000"},{"name":"庐镇乡","code":"341523205000"},{"name":"五显镇","code":"341523111000"},{"name":"南港镇","code":"341523108000"},{"name":"城关镇","code":"341523100000"},{"name":"晓天镇","code":"341523101000"},{"name":"柏林乡","code":"341523201000"},{"name":"棠树乡","code":"341523202000"},{"name":"汤池镇","code":"341523114000"},{"name":"千人桥镇","code":"341523104000"},{"name":"百神庙镇","code":"341523105000"},{"name":"干汊河镇","code":"341523109000"},{"name":"张母桥镇","code":"341523110000"},{"name":"舒城县经济开发区","code":"341523400000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看
