echarts海口市美兰区geoJson地图tooltip自定义html代码演示

geoJson2 yekong

随着开发 数据可视化大屏 项目越来越多,对地图的需求也各不相同,除了百度地图和高德地图外还会遇到echarts和threejs的需要,对地图的效果以及城市也各不相同,今天为大家整理海口市美兰区echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。

美兰区,海南省海口市辖区,位于海口市东北部,地理坐标介于北纬19°45′15″—20°05’30″,东经110°17’52″—111°42’36″之间,总面积581平方千米。美兰区属季风性热带气候区,夏季长冬季短,四季特征不明显。截至2023年3月,美兰区下辖9个街道和4个镇,区人民政府驻美兰区群上路1号。截至2022年末,美兰区户籍人口660149人。

echarts海口市美兰区geoJson地图tooltip自定义html

echarts tooltip演示自定义,通过toolTip的formatter方法以html+css的方式实现自己想要的样式效果,鼠标移上去就可以看到我们想要的效果了,也可以通过css自定义为自己需要的样式.

echarts海口市美兰区geoJson地图tooltip自定义html

echarts海口市美兰区geoJson地图3d地图

使用的是echarts-gl结合echarts实现的3d地图效果实例

echarts海口市美兰区geoJson地图3d地图

echarts海口市美兰区geoJson地图地图排行榜效果

echarts地图根据数据渲染不同颜色的地图,并根据数据大小显示前10名的排序效果,属于地图map类型和柱状图bar类型混合效果

echarts海口市美兰区geoJson地图地图排行榜效果

threejs海口市美兰区geoJson地图3d地图添加旋转棱锥

通过threejs绘制3d地图并在指定经纬度上添加带波纹效果不停旋转的棱锥效果实例,如果想系统的学习threejs的话,可以观看threejs视频课程 WebGL 3D可视化教程

threejs海口市美兰区geoJson地图3d地图添加旋转棱锥

threejs海口市美兰区geoJson地图3d地图鼠标移入显示标签并高亮

通过threejs绘制的3d地图鼠标移入显示标签并高亮

threejs海口市美兰区geoJson地图3d地图鼠标移入显示标签并高亮

threejs海口市美兰区geoJson地图3d地图

通过threejs绘制的3d地图实例 vue3 threejs 在vue3项目中绘制3d地图效果实例

threejs海口市美兰区geoJson地图3d地图

海口市美兰区 下辖有 白沙街道,三江镇,白龙街道,博爱街道,新埠街道,海府街道,蓝天街道,人民路街道,和平南街道,罗牛山农场,国营三江农场,国营桂林洋农场,灵山镇,演丰镇,大致坡镇,海甸街道

海口市美兰区下辖区域坐标

{"白沙街道":[110.36828290789873,20.04135704253721],"三江镇":[110.58626013338062,19.88519101170754],"白龙街道":[110.36933191966011,20.02962955671652],"博爱街道":[110.3450980407406,20.04170213970835],"新埠街道":[110.35593931374993,20.08350208702868],"海府街道":[110.34175003143565,20.02846279448884],"蓝天街道":[110.3518629812642,20.02405656917814],"人民路街道":[110.3191277732131,20.06287974562019],"和平南街道":[110.3529624555535,20.0320011269189],"罗牛山农场":[110.55292078529035,19.91238072180265],"国营三江农场":[110.63566674643982,19.92058943705227],"国营桂林洋农场":[110.50588580722473,20.01908307562102],"灵山镇":[110.43027090189548,20.00824078977422],"演丰镇":[110.54400940339536,19.96197996237107],"大致坡镇":[110.63101539027191,19.8180554175905],"海甸街道":[110.34300897024076,20.06482063551988]}

海口市美兰区行政划分代码

[{"name":"白沙街道","code":"460108008000"},{"name":"三江镇","code":"460108103000"},{"name":"白龙街道","code":"460108006000"},{"name":"博爱街道","code":"460108003000"},{"name":"新埠街道","code":"460108009000"},{"name":"海府街道","code":"460108001000"},{"name":"蓝天街道","code":"460108002000"},{"name":"人民路街道","code":""},{"name":"和平南街道","code":"460108007000"},{"name":"罗牛山农场","code":"460108500000"},{"name":"国营三江农场","code":""},{"name":"国营桂林洋农场","code":""},{"name":"灵山镇","code":"460108101000"},{"name":"演丰镇","code":"460108102000"},{"name":"大致坡镇","code":"460108104000"},{"name":"海甸街道","code":"460108004000"}]

说明

1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。

2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。

3、本数据仅用于echarts threejs地图效果展示。

4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看

海口市美兰区echarts地图效果实例和threejs地图效果实例下载

相关文件下载地址
此资源需支付 ¥10 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢
echarts海口市美兰区geoJson地图tooltip自定义html代码演示