可视化大屏 项目中会有渲染地图的需要,除了百度地图以及高德地图外，也会需要echarts或者threejs效果的地图,今天为大家整理黄冈市团风县echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
团风县位于湖北省东部，隶属于黄冈市，地处大别山南翼，东临巴河，西傍举水、沙河。全县版图面积838平方公里，辖8镇2乡、296个行政村（社区），总人口38万。团风县与鄂州市、武汉市新洲区、黄冈市黄州区、浠水县、罗田县、麻城市相邻。该县有多个旅游景点，包括黄冈大崎山森林公园、团风渡江战役纪念公园、熊十力故居、黄冈革命烈士陵园等。此外，县内还有丰富的人文历史，如革命烈士纪念馆等。
动态效果
echarts黄冈市团风县geoJson地图tooltip自定义html
echarts tooltip演示自定义,通过toolTip的formatter方法以html+css的方式实现自己想要的样式效果,鼠标移上去就可以看到我们想要的效果了,也可以通过css自定义为自己需要的样式.
echarts黄冈市团风县geoJson地图点击地图插小旗
echarts地图渲染点击地图显示自定义效果实例,效果类似点击插小旗的效果,通过scatter实现.
echarts黄冈市团风县geoJson地图定义颜色
echarts地图通过visualMap来事先设置好数据区间,根据区间来来显示地图的颜色,这里的visualMap数据是随机生成的,可以通过实例代码根据自己的需要配置颜色和数据区间.
threejs黄冈市团风县geoJson地图3d地图添加旋转棱锥
通过threejs绘制3d地图并在指定经纬度上添加带波纹效果不停旋转的棱锥效果实例,如果想系统的学习threejs的话，可以观看threejs课程视频 Three.js前端3D可视化
threejs黄冈市团风县geoJson地图3d地图CSS3D标签
通过threejs绘制的3d地图CSS3D标签实例，CSS3D不面向摄像机，跟随场景缩放,可以通过rotateY调整角度,通过scale调整大小 Vue3 threejs 在3d地图中绘制css3d标签标注省份
threejs黄冈市团风县geoJson地图3d地图添加金色效果
通过threejs绘制3d地图使用outlinePass实现金色描边效果,并通过edgeStrength增加强度,让描边更清晰
黄冈市团风县 下辖有 总路咀镇,方高坪镇,淋山河镇,马曹庙镇,金锣港农场,但店镇,团风镇,杜皮乡,上巴河镇,回龙山镇,黄湖农场,贾庙乡
黄冈市团风县下辖区域坐标
{"总路咀镇":[115.04749914348056,30.71387835456427],"方高坪镇":[114.93004843251846,30.676188777725],"淋山河镇":[114.91380171440467,30.74590350778512],"马曹庙镇":[114.99607310907291,30.66961617544393],"金锣港农场":[114.8512321268861,30.66243154644456],"但店镇":[115.15240520802502,30.75378789291211],"团风镇":[114.85871587418364,30.65399622306205],"杜皮乡":[115.01133324305691,30.80326409701663],"上巴河镇":[115.08718060549413,30.65615372681124],"回龙山镇":[114.9640387891829,30.61009037311315],"黄湖农场":[114.83496327303075,30.69085996470154],"贾庙乡":[115.07709726346705,30.80813154804432]}
黄冈市团风县行政划分代码
[{"name":"总路咀镇","code":"421121106000"},{"name":"方高坪镇","code":"421121102000"},{"name":"淋山河镇","code":"421121101000"},{"name":"马曹庙镇","code":"421121104000"},{"name":"金锣港农场","code":""},{"name":"但店镇","code":"421121107000"},{"name":"团风镇","code":"421121100000"},{"name":"杜皮乡","code":"421121201000"},{"name":"上巴河镇","code":"421121105000"},{"name":"回龙山镇","code":"421121103000"},{"name":"黄湖农场","code":"421121400000"},{"name":"贾庙乡","code":"421121200000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
