数据大屏 项目中经常需要渲染echarts地图，为了不同城市快速实现，将不同城市的echarts地图效果整理出来，今天为大家整理南阳市桐柏县echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
桐柏县，是河南省南阳市下辖县，位于河南省南部，南阳盆地东缘，桐柏山腹地，豫、鄂两省交界处。桐柏县素有“宛东咽喉”、“信西屏障”之称。总面积1915平方公里，辖13个镇、3个乡、2个产业集聚区。根据第七次人口普查数据，截至2020年11月1日零时，桐柏县常住人口375206人。
echarts南阳市桐柏县geoJson地图根据经纬度显示自定义html弹窗
echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.
echarts南阳市桐柏县geoJson地图阴影
echarts地图阴影效果实例,通过shadowColor控制阴影的颜色,通过shadowBlur控制范围,通过shadowOffsetX和shadowOffsetY控制偏移.
echarts南阳市桐柏县geoJson地图3d地图
使用的是echarts-gl结合echarts实现的3d地图效果实例
threejs南阳市桐柏县geoJson地图3d地图指定区域闪烁
通过threejs绘制3d地图并让指定区域闪烁,如果对threejs感兴趣，可以观看threejs视频 Three.js前端3D可视化教程
threejs南阳市桐柏县geoJson地图3d地图添加旋转棱锥
通过threejs绘制3d地图并在指定经纬度上添加带波纹效果不停旋转的棱锥效果实例，如果想系统的学习threejs的话，可以观看threejs视频 3D可视化Three.js视频教程
threejs南阳市桐柏县geoJson地图3d地图CSS3D标签
通过threejs绘制的3d地图CSS3D标签实例，CSS3D不面向摄像机，跟随场景缩放,可以通过rotateY调整角度,通过scale调整大小,如果对threejs感兴趣，可以观看threejs视频课程 WebGL前端3D可视化教程
南阳市桐柏县下辖有吴城镇,新集乡,城关镇,淮源镇,城郊乡,回龙乡,固县镇,埠江镇,大河镇,平氏镇,安棚镇,月河镇,程湾镇,朱庄镇,毛集镇,黄岗镇
南阳市桐柏县下辖区域坐标
{"吴城镇":[113.51252650337054,32.44824256576567],"新集乡":[113.15607597708657,32.50259098932147],"城关镇":[113.36930905397634,32.36361051223818],"淮源镇":[113.25923250254556,32.4522626502371],"城郊乡":[113.38221344803475,32.38358570471108],"回龙乡":[113.70763539107537,32.63733507248399],"固县镇":[113.6400043062212,32.44348625390941],"埠江镇":[113.04914972365975,32.57778814918011],"大河镇":[113.33803282044238,32.52104166619944],"平氏镇":[113.06514165221576,32.52797663924787],"安棚镇":[113.16982667511542,32.56475053001937],"月河镇":[113.5041604410041,32.34758161767571],"程湾镇":[113.11074542208789,32.44184153927765],"朱庄镇":[113.45462173033619,32.5452872072473],"毛集镇":[113.68668043753672,32.52622843607109],"黄岗镇":[113.5864371289117,32.58758500462071]}
