数据大屏 项目中经常会遇到需要渲染echarts地图的情况，为了方便不同城市快速实现效果，将不同城市的echarts地图效果整理出来，供大家参考，今天为大家整理的是文昌市echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
文昌市，海南省直辖县级市，位于海南岛的东北部，地理坐标介于北纬19°21'—20°1'，东经110°28'—111°03'之间，陆地总面积2488平方千米，海域面积5245平方千米。文昌市地势由西南内陆向东北沿海倾斜，境内有文教河、珠溪河、文昌河、石壁河和北水溪等河流，属热带季风海洋性气候，雨量充沛，阳光充足，气候暖和，终年无霜，四季不分明，夏无酷热，冬无严寒。据2023年4月文昌市人民政府网显示，文昌市下辖17个镇、2个农场。市人民政府驻文城镇。2022年末，文昌市常住人口56.87万人。
echarts文昌市geoJson地图指定区域高亮
echarts让指定区域变为选中高亮状态
echarts文昌市geoJson地图水滴状气泡图
echarts地图渲染时,会通过一个水滴状小气泡来将数值渲染到地图上,我们可以可以通过scatter来实现我们想要的效果.
echarts文昌市geoJson地图根据经纬度显示自定义html弹窗
echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.
threejs文昌市geoJson地图3d地图
通过threejs绘制的3d地图实例 vue3 threejs 在vue3项目中绘制3d地图效果实例,如果想系统的学习threejs的话，可以观看threejs视频 WebGL/Three.js前端3D可视化教程
threejs文昌市geoJson地图3d地图自定义贴图加CSS2D标签
通过threejs绘制3d地图并添加CSS2D标签和自定义贴图
threejs文昌市geoJson地图3d地图添加描边效果
通过threejs绘制3d地图使用outlinePass 实现发光描边效果
文昌市 下辖有 文城镇,东阁镇,会文镇,冯坡镇,抱罗镇,翁田镇,文教镇,重兴镇,昌洒镇,潭牛镇,蓬莱镇,铺前镇,国营东路农场,龙楼镇,锦山镇,国营罗豆农场,公坡镇,东路镇,东郊镇,国营南阳农场
文昌市下辖区域坐标
{"文城镇":[110.74692259689174,19.5730184496],"东阁镇":[110.82515701756972,19.68598661971639],"会文镇":[110.750718241373,19.44788536568242],"冯坡镇":[110.78258074682489,19.95860291620222],"抱罗镇":[110.77074134793713,19.83425098033074],"翁田镇":[110.899329061804,19.92992507049217],"文教镇":[110.89716550541846,19.67964706265612],"重兴镇":[110.61262232388823,19.42418349160391],"昌洒镇":[],"潭牛镇":[],"蓬莱镇":[110.56435005239248,19.50824201272809],"铺前镇":[110.63056501432577,20.08992137387366],"国营东路农场":[],"龙楼镇":[110.99456879671206,19.66416778352702],"锦山镇":[110.72034487327191,19.96913603644886],"国营罗豆农场":[110.62578336937231,19.98103101750247],"公坡镇":[110.79990357471371,19.80490230382579],"东路镇":[110.6703643886375,19.75790466593812],"东郊镇":[110.88932077652976,19.56840353091361],"国营南阳农场":[]}
文昌市行政划分代码
[{"name":"文城镇","code":"469005100000"},{"name":"东阁镇","code":"469005106000"},{"name":"会文镇","code":"469005103000"},{"name":"冯坡镇","code":"469005113000"},{"name":"抱罗镇","code":"469005112000"},{"name":"翁田镇","code":"469005111000"},{"name":"文教镇","code":"469005107000"},{"name":"重兴镇","code":"469005101000"},{"name":"昌洒镇","code":"469005110000"},{"name":"潭牛镇","code":"469005105000"},{"name":"蓬莱镇","code":"469005102000"},{"name":"铺前镇","code":"469005115000"},{"name":"国营东路农场","code":""},{"name":"龙楼镇","code":"469005109000"},{"name":"锦山镇","code":"469005114000"},{"name":"国营罗豆农场","code":""},{"name":"公坡镇","code":"469005116000"},{"name":"东路镇","code":"469005104000"},{"name":"东郊镇","code":"469005108000"},{"name":"国营南阳农场","code":""}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看
