可视化大屏 项目中经常需要渲染echarts地图，为了不同城市快速实现，将不同城市的echarts地图效果整理出来，今天为大家整理清远市英德市echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
英德市，广东省 辖县级市，由 清远市 代管，位于南岭山脉东南部，广东省中北部，北江中游。南宋庆元元年（1195年），升英州为英德府，自始得英德之名。元至元十五年（1278年），改英德府为英德路总管府；至大元年（1308年）复降为州。明初洪武二年（1369年），改英德州为英德县。1994年1月，英德撤县设市（县级市），由清远市代管。英德市面积5634平方千米，是广东省面积最大的县级行政区。1996年，英德被评为广东省第二批历史文化名城。截至2020年10月，英德市下辖1个街道、23个镇。 [24] 2021年末户籍总人口1206690人；全市常住人口94.35万人。
echarts清远市英德市geoJson地图根据经纬度显示自定义html弹窗
echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.
echarts清远市英德市geoJson地图地图排行榜效果
echarts地图根据数据渲染不同颜色的地图,并根据数据大小显示前10名的排序效果,属于地图map类型和柱状图bar类型混合效果
echarts清远市英德市geoJson地图 tooltip轮播
echarts地图实现类似tooltip轮播效果,通过effectScatter实现浮窗,并通过定时修改effectScatter的data来实现浮窗的移动.
threejs清远市英德市geoJson地图3d地图css2d标签
通过threejs绘制的3d地图css2d标签实例，CSS2D面向摄像机,不随场景缩放而缩放,如果对threejs感兴趣，可以观看threejs教程视频 Three.js前端3D可视化
threejs清远市英德市geoJson地图3d地图自定义贴图加CSS3D标签
通过threejs绘制3d地图并添加CSS3D标签和自定义贴图
threejs清远市英德市geoJson地图3d地图添加金色效果
通过threejs绘制3d地图使用outlinePass实现金色描边效果,并通过edgeStrength增加强度,让描边更清晰
清远市英德市下辖有桥头镇,水边镇,西牛镇,沙口镇,下太镇,东华镇,九龙镇,含光镇,大洞镇,大湾镇,大站镇,望埠镇,波罗镇,白沙镇,英红镇,青塘镇,石牯塘镇,黄花镇,英城街道,黎溪镇,横石塘镇,横石水镇,石灰铺镇,连江口镇
清远市英德市下辖区域坐标
{"桥头镇":[113.77776176367175,24.25865850936943],"水边镇":[113.16010437083847,24.05083270176021],"西牛镇":[113.09481640978568,24.14380265888897],"沙口镇":[113.54330868020844,24.41847616973277],"下太镇":[113.44428247389777,24.00522465298295],"东华镇":[113.64776838014592,24.24885646056024],"九龙镇":[112.91989277446771,24.10688206713632],"含光镇":[113.06974568422591,24.2786752693771],"大洞镇":[113.07032884733286,23.9988475262667],"大湾镇":[112.94443592908456,24.36900533519695],"大站镇":[113.45413880852388,24.12938223714698],"望埠镇":[113.49069022216278,24.272816903445],"波罗镇":[113.04529982634739,24.46697231431855],"白沙镇":[113.74985833736196,24.10635018443097],"英红镇":[113.18100917786911,24.26964826188116],"青塘镇":[113.84565886214062,24.18303529851971],"石牯塘镇":[113.17678053354771,24.40747237338365],"黄花镇":[112.88467024884474,24.26109576512227],"英城街道":[113.37556843444766,24.16505758848493],"黎溪镇":[113.22076780152418,23.92490304472942],"横石塘镇":[113.33335267538922,24.33705610912103],"横石水镇":[113.74915665054147,24.37918009473411],"石灰铺镇":[113.2409116661014,24.26066965308863],"连江口镇":[113.29934396596107,24.0617292107969]}
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
