炫酷，SpringBoot+Echarts实现用户访问地图可视化（附源码）

SpringBoot+Echarts用户访问地图可视化

创新互联专注为客户提供全方位的互联网综合服务，包含不限于网站设计制作、成都网站设计、广水网络推广、小程序制作、广水网络营销、广水企业策划、广水品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联为所有大学生创业者提供广水建站搭建服务，24小时服务热线：028-86922220，官方网址：www.cdcxhl.com

意义

  •  在常见的电商、新闻、社交网站等，合理运用运营成本才能最大化输出自己的产品，其中最常见的功能就有针对不同访问热度的城市制定不同的运营手段，因此我们掌握用户城市分布情况至关重要。
  •  pc端与移动端不同，无法依托手机自带的gps定位到用户所在城市，只能通过ip来进行判断所在地理位置。

根据ip获取城市的方式

  •  淘宝、新浪等常年提供根据ip获取城市的接口，但是隔一段时间会出现接口地址更改的情况，也有一定的限流
  •  开源纯真ip库：不断迭代更新ip库内容，一般场景下足以使用，自主可控。（下载qqwry.dat库）

思路

首先需要获取用户请求的ip地址，我们对该方法进行简单封装： 

 
 
 
 
    
  
  
  
  
  1. public class IPUtil {  
    2. 
  
  
  
  
  2.     public static String getIpAddress(HttpServletRequest request) {  
    3. 
  
  
  
  
  3.         String ip = request.getHeader("x-forwarded-for");  
    4. 
  
  
  
  
  4.         if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {  
    5. 
  
  
  
  
  5.             ip = request.getHeader("Proxy-Client-IP");  
    6. 
  
  
  
  
  6.         }  
    7. 
  
  
  
  
  7.         if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {  
    8. 
  
  
  
  
  8.             ip = request.getHeader("WL-Proxy-Client-IP");  
    9. 
  
  
  
  
  9.         }  
    10. 
  
  
  
  
  10.         if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {  
    11. 
  
  
  
  
  11.             ip = request.getHeader("HTTP_CLIENT_IP");  
    12. 
  
  
  
  
  12.         }  
    13. 
  
  
  
  
  13.         if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {  
    14. 
  
  
  
  
  14.             ip = request.getHeader("HTTP_X_FORWARDED_FOR");  
    15. 
  
  
  
  
  15.         }  
    16. 
  
  
  
  
  16.         if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {  
    17. 
  
  
  
  
  17.             ip = request.getRemoteAddr();  
    18. 
  
  
  
  
  18.         }  
    19. 
  
  
  
  
  19.         return ip;  
    20. 
  
  
  
  
  20.     }  
    21. 
  
  
  
  
  21. } 
    22.

封装纯真ip的解析工具，根据ip获取请求地址所在城市，github有大量实现版本，我们这里不做赘述，具体代码见文末源码 

 
 
 
 
    
  
  
  
  
  1. //篇幅较长，截取的主要方法，详细在源码地址查看      
    2. 
  
  
  
  
  2. public IPZone findIP(final String ip) {  
    3. 
  
  
  
  
  3.         final long ipNum = toNumericIP(ip);  
    4. 
  
  
  
  
  4.         final QIndex idx = searchIndex(ipNum);  
    5. 
  
  
  
  
  5.         if (idx == null) {  
    6. 
  
  
  
  
  6.             return new IPZone(ip); 
    7. 
  
  
  
  
  7.          }  
    8. 
  
  
  
  
  8.         return readIP(ip, idx);  
    9. 
  
  
  
  
  9. } 
    10.

自定义拦截器，对用户的登录请求进行拦截，在此处判断请求ip所在城市，并进行计数。我们这里只是简单逻辑的说明，在生产上时应该用redis来存放计数，并且专门提供一个rest接口来推送当前各城市访问数量情况，再由前端配合，隔一段时间发起一次请求，例如隔一小时请求一次该rest接口，从而进行前端数据的展示。 

 
 
 
 
    
  
  
  
  
  1. /**  
    2. 
  
  
  
  
  2.  * 登录拦截器  
    3. 
  
  
  
  
  3.  */  
    4. 
  
  
  
  
  4. @Slf4j  
    5. 
  
  
  
  
  5. public class MyLoginInterceptor implements HandlerInterceptor {  
    6. 
  
  
  
  
  6.     private static final String LOGIN_PATH = "/user/login";  
    7. 
  
  
  
  
  7.     private static Map visitCount;  
    8. 
  
  
  
  
  8.     private static final QQWry qqWry;  
    9. 
  
  
  
  
  9.     static {  
    10. 
  
  
  
  
  10.         visitCount = new HashMap<>(31);  
    11. 
  
  
  
  
  11.         qqWry = new QQWry();  
    12. 
  
  
  
  
  12.     } 
    13. 
  
  
  
  
  13.     //展示访问数量不是精确指标，如果要做到完全正确需要使用锁，防止计数存在并发问题  
    14. 
  
  
  
  
  14.     @Override  
    15. 
  
  
  
  
  15.     public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {  
    16. 
  
  
  
  
  16.         log.info("【MyLoginInterceptor】调用了:{}", request.getRequestURI());  
    17. 
  
  
  
  
  17.         if (request.getRequestURI().equals(LOGIN_PATH)) {  
    18. 
  
  
  
  
  18.             String ipAddress = IPUtil.getIpAddress(request);  
    19. 
  
  
  
  
  19.             String province = qqWry.findIP(ipAddress).getMainInfo();  
    20. 
  
  
  
  
  20.             if (visitCount.containsKey(province)) {  
    21. 
  
  
  
  
  21.                 visitCount.put(province,new AtomicInteger(visitCount.get(province).incrementAndGet()));  
    22. 
  
  
  
  
  22.             } else {  
    23. 
  
  
  
  
  23.                 visitCount.put(province,new AtomicInteger());  
    24. 
  
  
  
  
  24.             }  
    25. 
  
  
  
  
  25.         }  
    26. 
  
  
  
  
  26.         return true;  
    27. 
  
  
  
  
  27.     }  
    28. 
  
  
  
  
  28.     @Override  
    29. 
  
  
  
  
  29.     public void postHandle(HttpServletRequest request, HttpServletResponse response,  
    30. 
  
  
  
  
  30.                            Object handler, ModelAndView modelAndView) throws Exception {}  
    31. 
  
  
  
  
  31.     @Override  
    32. 
  
  
  
  
  32.     public void afterCompletion(HttpServletRequest request, HttpServletResponse response,  
    33. 
  
  
  
  
  33.                                 Object handler, Exception ex){}  
    34. 
  
  
  
  
  34. } 
    35.

注册自定义的拦截器 

 
 
 
 
    
  
  
  
  
  1. @Configuration  
    2. 
  
  
  
  
  2. public class WebMvcConfig implements WebMvcConfigurer {  
    3. 
  
  
  
  
  3.     @Override  
    4. 
  
  
  
  
  4.     public void addInterceptors(InterceptorRegistry registry) {  
    5. 
  
  
  
  
  5.         registry.addInterceptor(new MyLoginInterceptor());  
    6. 
  
  
  
  
  6.     }  
    7. 
  
  
  
  
  7. } 
    8.

登录controller模拟逻辑，注意：如果想看效果图需要自己写线程用不同的虚拟ip进行访问url，从而达到在不同城市访问接口的效果。 

 
 
 
 
    
  
  
  
  
  1. @RestController("user") 
    2. 
  
  
  
  
  2. public class LoginController { 
    3. 
  
  
  
  
  3.     @GetMapping("login")  
    4. 
  
  
  
  
  4.     public String login() {  
    5. 
  
  
  
  
  5.         //登录逻辑  
    6. 
  
  
  
  
  6.         return "success";  
    7. 
  
  
  
  
  7.     }  
    8. 
  
  
  
  
  8. } 
    9.

最终效果

前后端源码

 
 
 
 
    
  
  
  
  
  1. https://github.com/Motianshi/distribute-tool  
    2.

新闻名称：炫酷，SpringBoot+Echarts实现用户访问地图可视化（附源码）
文章URL：http://www.shufengxianlan.com/qtweb/news34/190634.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

响应式网站知识

分类信息网站

成都多线机房　　 　自适应网站　　 　鸿艺文化　　 　手提袋印刷制作　　 　安防网站建设方案　　 　郫县明安消防器材　　 　德昌麦琪建站　　 　成都网站设计制作公司　　 　成都活动策划　　 　品牌网站建设　　 　四川和正源　　 　成都微信开发　　 　网站营销　　 　凯亚自动化控制　　 　雅安服务器托管　　 　崇州网站建设　　 　成都网站优化　　 　鳄鱼养殖　　 　400电话申请　　 　UI设计