大屏数据可视化 项目中会有渲染地图的需要,除了百度地图以及高德地图外，也会需要echarts或者threejs效果的地图,今天为大家整理南阳市方城县echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
方城县，隶属河南省南阳市。位于河南省西南部。南阳盆地东北出境之要冲，南依南阳市宛城区，北邻平顶山市，被称为南阳的北大门。
截至2021年5月，方城县辖14个镇、1个民族乡、4街道，另有1个林场。根据第七次人口普查数据，截至2020年11月1日零时，方城县常住人口873731人。
echarts南阳市方城县geoJson地图局部颜色渐变
echarts地图渲染,通过echarts.graphic.LinearGradient线性渐变来实现地图区域颜色的渐变效果
echarts南阳市方城县geoJson地图根据经纬度显示自定义html弹窗
echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.
echarts南阳市方城县geoJson地图3d地图自定义图标
echarts 3d地图添加自定义图标实例
threejs南阳市方城县geoJson地图3d地图添加描边效果
通过threejs绘制3d地图使用outlinePass 实现发光描边效果,如果想系统的学习threejs的话，可以观看threejs视频课程 WebGL前端3D可视化教程
threejs南阳市方城县geoJson地图3d地图CSS2D外加旋转棱锥
通过threejs绘制3d地图CSS2D外加旋转棱锥效果,如果对threejs感兴趣，可以观看threejs视频课程 WebGL前端3D可视化教程
threejs南阳市方城县geoJson地图3d地图自定义贴图加CSS3D标签
通过threejs绘制3d地图并添加CSS3D标签和自定义贴图,如果对threejs感兴趣，可以观看threejs视频教程 Three.js前端3D可视化
南阳市方城县下辖有释之街道,袁店回族乡,凤瑞街道,杨集乡,方城大寺林场,券桥乡,河南中南机械厂,博望镇,广阳镇,拐河镇,杨楼乡,柳河乡,清河乡,独树镇,赵河镇,古庄店乡,二郎庙乡,四里店乡,小史店镇
南阳市方城县下辖区域坐标
{"释之街道":[112.97366874636921,33.25670299075715],"袁店回族乡":[112.84440098123949,33.27758243422497],"凤瑞街道":[113.02007482160434,33.24801273109131],"杨集乡":[112.99262606961273,33.33989456115327],"方城大寺林场":[113.15965234559903,33.13883163863797],"券桥乡":[112.96033447013198,33.17778684473689],"河南中南机械厂":[112.71691171053828,33.33899816952125],"博望镇":[112.71416979966854,33.17295208854922],"广阳镇":[112.71155245786377,33.29503965256654],"拐河镇":[113.01938682968257,33.48011798221533],"杨楼乡":[113.29755610121954,33.28927514431359],"柳河乡":[112.80000756685936,33.34102116745603],"清河乡":[112.89773849146124,33.29054198976563],"独树镇":[113.12413362468436,33.36369883823863],"赵河镇":[112.84021489187802,33.19149529507082],"古庄店乡":[113.13675493484595,33.23088446486731],"二郎庙乡":[113.06489914829487,33.18108710110694],"四里店乡":[112.8876408007828,33.48767474952071],"小史店镇":[113.29349135814937,33.17074019176793]}
