数据大屏可视化 项目中经常会遇到需要渲染echarts地图的情况，为了方便不同城市快速实现效果，将不同城市的echarts地图效果整理出来，供大家参考，今天为大家整理的是白沙黎族自治县echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
白沙黎族自治县，海南省下辖自治县，位于海南岛中部偏西，介于北纬18°56'—19°29'，东经109°02'—109°42'之间，东邻琼中黎族苗族自治县、南接乐东黎族自治县、西连昌江黎族自治县、北抵儋州市。总面积2117.2平方千米。白沙黎族自治县属热带季风性气候，日照长，光热充足，具有热带山区气候特征。 截至2020年11月，白沙黎族自治县辖11个乡镇，县政府驻牙叉镇。根据第七次人口普查数据，截至2020年11月1日零时，白沙黎族自治县常住人口为164699人。
echarts白沙黎族自治县geoJson地图根据经纬度显示自定义html弹窗
echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.
echarts白沙黎族自治县geoJson地图3d地图实例旋转动画
使用的是echarts-gl结合echarts实现的3d地图效果实例
echarts白沙黎族自治县geoJson地图指定区域高亮
echarts让指定区域变为选中高亮状态
threejs白沙黎族自治县geoJson地图3d地图添加描边效果
通过threejs绘制3d地图使用outlinePass 实现发光描边效果,如果想系统的学习threejs的话，可以观看threejs视频 3D可视化Three.js视频教程
threejs白沙黎族自治县geoJson地图3d地图添加金色效果
通过threejs绘制3d地图使用outlinePass实现金色描边效果,并通过edgeStrength增加强度,让描边更清晰
threejs白沙黎族自治县geoJson地图3d地图
通过threejs绘制的3d地图实例 vue3 threejs 在vue3项目中绘制3d地图效果实例
白沙黎族自治县 下辖有 邦溪镇,金波乡,荣邦乡,七坊镇,阜龙乡,元门乡,南开乡,打安镇,牙叉镇,细水乡,青松乡,国营白沙农场,国营邦溪农场,国营龙江农场
白沙黎族自治县下辖区域坐标
{"邦溪镇":[109.0995178476505,19.35824171551294],"金波乡":[109.1507970851105,19.20445261359614],"荣邦乡":[],"七坊镇":[],"阜龙乡":[109.46141485529176,19.3479479579353],"元门乡":[109.5249051725841,19.09860316052744],"南开乡":[109.36658984771849,19.0419349032583],"打安镇":[],"牙叉镇":[],"细水乡":[109.60281964176258,19.2007678612304],"青松乡":[109.24908811318525,19.15473402677429],"国营白沙农场":[],"国营邦溪农场":[109.11417888353066,19.40585330740038],"国营龙江农场":[]}
白沙黎族自治县行政划分代码
[{"name":"邦溪镇","code":"469025102000"},{"name":"金波乡","code":"469025205000"},{"name":"荣邦乡","code":"469025206000"},{"name":"七坊镇","code":"469025101000"},{"name":"阜龙乡","code":"469025203000"},{"name":"元门乡","code":"469025201000"},{"name":"南开乡","code":"469025202000"},{"name":"打安镇","code":"469025103000"},{"name":"牙叉镇","code":"469025100000"},{"name":"细水乡","code":"469025200000"},{"name":"青松乡","code":"469025204000"},{"name":"国营白沙农场","code":""},{"name":"国营邦溪农场","code":""},{"name":"国营龙江农场","code":""}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看
