可视化数据大屏 项目中经常会遇到需要渲染echarts地图的情况，为了方便不同城市快速实现效果，将不同城市的echarts地图效果整理出来，供大家参考，今天为大家整理的是南阳市宛城区echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
宛城区，隶属河南省南阳市，位于河南省西南部，南阳盆地腹心，中心位置约在东经112°52'，北纬32°89'，总面积683平方千米。截至2020年11月1日零时，宛城区常住人口633563人。宛城区属亚热带大陆性季风气候。截至2021年10月，宛城区辖6个街道、6个镇、3个乡。区人民政府驻东关街道。
echarts南阳市宛城区geoJson地图根据经纬度显示自定义html弹窗
echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.
threejs南阳市宛城区geoJson地图3d地图自定义贴图加CSS2D标签
通过threejs绘制3d地图并添加CSS2D标签和自定义贴图,如果对threejs感兴趣，可以观看threejs视频课程 Three.js 3D可视化
南阳市宛城区下辖有白河街道,枣林街道,汉冶街道,汉冢乡,官庄镇,茶庵乡,新店乡,溧河乡,仲景街道,金华乡,瓦店镇,高庙乡,东关街道,红泥湾镇,赤虎街道,黄台岗镇,高新区产业集聚工业园,新华街道
南阳市宛城区下辖区域坐标
{"白河街道":[112.622458215293,32.9892858426238],"枣林街道":[112.52830587241908,32.90630005426037],"汉冶街道":[112.53930049698835,33.01945046843242],"汉冢乡":[112.66150577905239,32.87437974286591],"官庄镇":[112.607828241692,32.68454853393708],"茶庵乡":[112.67435972562959,32.93572491926625],"新店乡":[112.66798491258197,33.08605594796208],"溧河乡":[112.59367009692912,32.91629552612302],"仲景街道":[112.577776240226,33.00212751445984],"金华乡":[112.60873017982806,32.79147418059657],"瓦店镇":[112.51881660273702,32.74421704193954],"高庙乡":[112.77165288347672,32.96458507388134],"东关街道":[112.54265867840533,33.00300867843028],"红泥湾镇":[112.71922479998719,33.04288419211311],"赤虎街道":[112.60985579931472,32.68537624848688],"黄台岗镇":[112.5461960280162,32.84471016795666],"高新区产业集聚工业园":[112.57901784084603,32.94584883373898],"新华街道":[112.53540877542014,32.99523904498842]}
