大屏数据可视化 项目中经常需要渲染echarts地图，为了不同城市快速实现，将不同城市的echarts地图效果整理出来，今天为大家整理南阳市淅川县echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
淅川县，隶属河南省南阳市。位于豫西南边陲，豫、鄂、陕三省交界的黄金地带，因淅水纵贯境内形成百里冲积平川而得名。淅川地势险要，古战乱时期易守难攻，有“中原未战，淅境兵动”之称。全县总面积2820平方公里，辖17个乡镇（街道），499个村（社区）。根据第七次人口普查数据，截至2020年11月1日零时，淅川县常住人口538569人。
echarts南阳市淅川县geoJson地图 visualMap控制地图颜色
echarts地图使用visualMap通过一组颜色及一组数据来实现地图不同区域根据不同数据进行颜色变化
echarts南阳市淅川县geoJson地图点击弹出自定义弹窗
我们可以通过scatter来设置自定义样式,但是这种自定义局限性很大,如果要求的样式很复杂的话,scatter就不能很好的实现了,所以我们可以通过鼠标点击获取横纵坐标,然后通过css来定位到对应的位置.
echarts南阳市淅川县geoJson地图根据经纬度显示自定义html弹窗
echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.
threejs南阳市淅川县geoJson地图3d地图css2d标签
通过threejs绘制的3d地图css2d标签实例，CSS2D面向摄像机,不随场景缩放而缩放,如果对threejs感兴趣，可以观看threejs课程视频 WebGL/Three.js前端高薪3D可视化
threejs南阳市淅川县geoJson地图3d地图指定区域闪烁
通过threejs绘制3d地图并让指定区域闪烁,如果想系统的学习threejs的话，可以观看threejs视频课程 WebGL/Three.js前端3D可视化教程
threejs南阳市淅川县geoJson地图3d地图添加描边效果
通过threejs绘制3d地图使用outlinePass 实现发光描边效果,如果想系统的学习threejs的话，可以观看threejs视频 WebGL/Three.js前端3D可视化教程
南阳市淅川县下辖有盛湾镇,老城镇,西簧乡,金河镇,香花镇,龙城街道,商圣街道,寺湾镇,滔河乡,丹阳镇,仓房镇,大石桥乡,厚坡镇,毛堂乡,马蹬镇,荆紫关镇,上集镇
南阳市淅川县下辖区域坐标
{"盛湾镇":[111.41353533585615,32.8956179090363],"老城镇":[111.41629940021724,33.00911297135555],"西簧乡":[111.18389900688352,33.2684529088742],"金河镇":[111.40246257665095,33.08473903727902],"香花镇":[111.62402226063357,32.73482197489154],"龙城街道":[111.47895860627912,33.14480049776584],"商圣街道":[111.48335543151347,33.12905152531789],"寺湾镇":[111.17318904407244,33.17535778562739],"滔河乡":[111.25452565731467,33.00133119838523],"丹阳镇":[111.76666287988726,32.69698120850295],"仓房镇":[111.48105662905584,32.74690242625729],"大石桥乡":[111.28164751207277,33.0849097542102],"厚坡镇":[111.77351367518068,32.81315608807299],"毛堂乡":[111.37540245306349,33.20978070553885],"马蹬镇":[111.57014447491422,32.91687524123122],"荆紫关镇":[111.0211252549972,33.1823210560326],"上集镇":[111.52921621701384,33.1042052662935]}
