SpringBoot+Echarts用戶訪問地圖可視化

意義

•  在常見的電商、新聞、社交網站等，合理運用運營成本才能最大化輸出自己的產品，其中最常見的功能就有針對不同訪問熱度的城市制定不同的運營手段，因此我們掌握用戶城市分布情況至關重要。
•  pc端與移動端不同，無法依托手機自帶的gps定位到用戶所在城市，只能通過ip來進行判斷所在地理位置。

根據ip獲取城市的方式

•  淘寶、新浪等常年提供根據ip獲取城市的接口，但是隔一段時間會出現接口地址更改的情況，也有一定的限流
•  開源純真ip庫：不斷迭代更新ip庫內容，一般場景下足以使用，自主可控。（下載qqwry.dat庫）

思路

首先需要獲取用戶請求的ip地址，我們對該方法進行簡單封裝： 

public class IPUtil {  
    public static String getIpAddress(HttpServletRequest request) {  
        String ip = request.getHeader("x-forwarded-for");  
        if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {  
            ip = request.getHeader("Proxy-Client-IP");  
        }  
        if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {  
            ip = request.getHeader("WL-Proxy-Client-IP");  
        }  
        if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {  
            ip = request.getHeader("HTTP_CLIENT_IP");  
        }  
        if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {  
            ip = request.getHeader("HTTP_X_FORWARDED_FOR");  
        }  
        if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {  
            ip = request.getRemoteAddr();  
        }  
        return ip;  
    }  
} 

封裝純真ip的解析工具，根據ip獲取請求地址所在城市，github有大量實現版本，我們這里不做贅述，具體代碼見文末源碼 

//篇幅較長，截取的主要方法，詳細在源碼地址查看      
public IPZone findIP(final String ip) {  
        final long ipNum = toNumericIP(ip);  
        final QIndex idx = searchIndex(ipNum);  
        if (idx == null) {  
            return new IPZone(ip); 
         }  
        return readIP(ip, idx);  
} 

自定義攔截器，對用戶的登錄請求進行攔截，在此處判斷請求ip所在城市，并進行計數。我們這里只是簡單邏輯的說明，在生產上時應該用redis來存放計數，并且專門提供一個rest接口來推送當前各城市訪問數量情況，再由前端配合，隔一段時間發起一次請求，例如隔一小時請求一次該rest接口，從而進行前端數據的展示。 

/**  
 * 登錄攔截器  
 */  
@Slf4j  
public class MyLoginInterceptor implements HandlerInterceptor {  
    private static final String LOGIN_PATH = "/user/login";  
    private static Map<String, AtomicInteger> visitCount;  
    private static final QQWry qqWry;  
    static {  
        visitCount = new HashMap<>(31);  
        qqWry = new QQWry();  
    } 
    //展示訪問數量不是精確指標，如果要做到完全正確需要使用鎖，防止計數存在并發問題  
    @Override  
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {  
        log.info("【MyLoginInterceptor】調用了:{}", request.getRequestURI());  
        if (request.getRequestURI().equals(LOGIN_PATH)) {  
            String ipAddress = IPUtil.getIpAddress(request);  
            String province = qqWry.findIP(ipAddress).getMainInfo();  
            if (visitCount.containsKey(province)) {  
                visitCount.put(province,new AtomicInteger(visitCount.get(province).incrementAndGet()));  
            } else {  
                visitCount.put(province,new AtomicInteger());  
            }  
        }  
        return true;  
    }  
    @Override  
    public void postHandle(HttpServletRequest request, HttpServletResponse response,  
                           Object handler, ModelAndView modelAndView) throws Exception {}  
    @Override  
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response,  
                                Object handler, Exception ex){}  
} 

注冊自定義的攔截器 

@Configuration  
public class WebMvcConfig implements WebMvcConfigurer {  
    @Override  
    public void addInterceptors(InterceptorRegistry registry) {  
        registry.addInterceptor(new MyLoginInterceptor());  
    }  
} 

登錄controller模擬邏輯，注意：如果想看效果圖需要自己寫線程用不同的虛擬ip進行訪問url，從而達到在不同城市訪問接口的效果。 

@RestController("user") 
public class LoginController { 
    @GetMapping("login")  
    public String login() {  
        //登錄邏輯  
        return "success";  
    }  
} 

最終效果

前后端源碼

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