可视化大屏 项目中经常会遇到需要渲染echarts地图的情况，为了方便不同城市快速实现效果，将不同城市的echarts地图效果整理出来，供大家参考，今天为大家整理的是宿州市泗县echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
echarts宿州市泗县geoJson地图地图下钻展示
地图下钻展示,点击地图后,只显示当前选中的区域,可点击返回显示全部地图.
echarts宿州市泗县geoJson地图指定区域高亮
echarts让指定区域变为选中高亮状态
echarts宿州市泗县geoJson地图根据经纬度显示自定义html弹窗
echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.
threejs宿州市泗县geoJson地图3d地图自定义贴图加CSS2D标签
通过threejs绘制3d地图并添加CSS2D标签和自定义贴图,如果对threejs感兴趣，可以观看threejs课程视频 WebGL/Three.js前端3D可视化教程
threejs宿州市泗县geoJson地图3d地图
通过threejs绘制的3d地图实例 vue3 threejs 在vue3项目中绘制3d地图效果实例
threejs宿州市泗县geoJson地图3d地图添加旋转棱锥
通过threejs绘制3d地图并在指定经纬度上添加带波纹效果不停旋转的棱锥效果实例
宿州市泗县 下辖有 丁湖镇,刘圩镇,墩集镇,大庄镇,大杨乡,屏山镇,长沟镇,山头镇,泗城镇,泗县开发区,瓦坊乡,草庙镇,草沟镇,黄圩镇,黑塔镇,大路口乡
宿州市泗县下辖区域坐标
{"丁湖镇":[117.80233104198399,33.37760217580389],"刘圩镇":[118.06367387016431,33.66542788949089],"墩集镇":[117.96710427183038,33.39074075805632],"大庄镇":[117.87296938614827,33.67793645274159],"大杨乡":[117.76053297662068,33.62609855350694],"屏山镇":[117.88464157358482,33.57224519589975],"长沟镇":[117.72204897778144,33.54440178543685],"山头镇":[118.07699979609329,33.71578884753298],"泗城镇":[117.82922983284493,33.49446350846533],"泗县开发区":[117.92526002942897,33.48502513217971],"瓦坊乡":[117.94440319214301,33.68169508967694],"草庙镇":[117.97728098573867,33.48248916758961],"草沟镇":[117.7066148468958,33.39433725263618],"黄圩镇":[117.7595028384221,33.69070001599152],"黑塔镇":[118.03863817560232,33.56356661375593],"大路口乡":[117.88689942141198,33.39380504308583]}
宿州市泗县行政划分代码
[{"name":"丁湖镇","code":"341324102000"},{"name":"刘圩镇","code":"341324108000"},{"name":"墩集镇","code":"341324101000"},{"name":"大庄镇","code":"341324106000"},{"name":"大杨乡","code":""},{"name":"屏山镇","code":"341324111000"},{"name":"长沟镇","code":"341324104000"},{"name":"山头镇","code":"341324107000"},{"name":"泗城镇","code":"341324100000"},{"name":"泗县开发区","code":""},{"name":"瓦坊乡","code":""},{"name":"草庙镇","code":"341324110000"},{"name":"草沟镇","code":"341324103000"},{"name":"黄圩镇","code":"341324105000"},{"name":"黑塔镇","code":"341324109000"},{"name":"大路口乡","code":""}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看
