php开发地图导航,php开发Echatrs全国地图

原标题:php开发Echatrs全国地图

最近有个挺好玩的需求:需要将分布在全国各地的系统用户数量统计出来,以地图的形式展示出每个地域的用户数量,区域下面又分用户群。

此前我一直用的是highcharts,怎奈highcharts不支持地图报表,于是转而使用百度的Echarts,Echarts本身的功能没的说,很赞,API也很详细,但是网上貌似玩的人不多,于是自己动手参照官方demo耍耍。

先展示下最终实现效果,如果诸位看官感觉效果还不错,欢迎继续向下看,如果感觉效果很逊

950a237a932da7f70e426bcf6da0c3f1.png

简单的描述下:上述地图中,左侧是展示全国地图(默认选择的是全国 ),右侧是展示的重庆各地市的用户数量,点击左侧的不同省份,右侧地图会随之变化,从而显示不同省市的用户数量。

下面说下具体的实现:

Echarts 官网:http://echarts.baidu.com/

先说下思路:Echarts的样式是很容易在前台jsp定制的,最重要的数据源(如图中的各区域的用户数量)是需要在geojson拼装,然后解析显示的。

难点:

该地图也就是需要用户群区域,也就是4级或5级地图,比如全国是一级,重庆市是二级,重庆市下面的沙坪坝是三级,沙坪坝上的用户群是4级

ae3144e6365abb30acca7f290a12f736.png

地图采取的geojson,全国三级地图可在Echatrs官方读取,http://ecomfe.github.io/echarts-map-tool/,剩下的数据可在http://geojson.io/自定义抓取

0adac9ed99e2d879c94b712fc78bb146.png

代码部分,下载Echatrs

定义地区编码,配对

24c74eeb2fb5629ca5d4e382eae595b4.png

然后配对geojson 数据

bc8780b0cbb90abd58333d28aa74998b.png

这个demo是死数据,后续将更改动态数据。

我一直认为写文章是最好的思考方式,不光在分享,也在沉淀自己。张德Talk上的文章主要是分享技术、产品、创业和生活的相关有趣故事和经历。

欢迎关注我的微信公众号[zhangdeTalk],我最近在开一个学习小程序的班,加入我们,我们一起转玩微信小程序~。返回搜狐,查看更多

责任编辑:

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值