hightmaps 按地图显示统计量

来源：互联网发布：影像测量仪软件编辑：程序博客网时间：2024/06/07 02:09

从extjs 到 easyui 到html5到hightchars 再到hightmaps。Exjts和easyui很相似，extjs是重量级的，easyui轻量级的，比extjs容易上手，照着demo改就可以开发了，easyui入门demo见：easyui-demo，或者到官网http://www.jeasyui.com/；会了easyui开发，上手html5界面开发也非常的快，大多类似的，到html5-demo界面开发下载demo 然后把demo放到自己的web项目中或者访问http://www.rgraph.net/docs/line.html；进一步使用hightchar也非常容易，下载demo体验一下hightchar非常方便地例子，理解hightchar，官网http://www.highcharts.com/或见hightchars-demo

下面介绍hightmap开发中国地图分布量，效果截图。

前台代码

China-map.jsp

引入包，初始化组件

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>    <script src="js/highmaps.js"></script><script src="js/modules/exporting.js"></script><script src="js/china-data.js"></script>        <title>My JSP 'index.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><style type="text/css">#container {    height: 700px;     min-width: 310px;     max-width: 800px;     margin: 0 auto; }.loading {    margin-top: 10em;    text-align: center;    color: gray;}</style><script type="text/javascript">$(function () {    var data = [        ${data}    ];    $('#container').highcharts('Map', {        title : {            text : 'xxx量统计'        },        subtitle : {            text : '地区分布'        },        mapNavigation: {            enabled: true,            buttonOptions: {                verticalAlign: 'bottom'            }        },        colorAxis: {            min: 0        },        series : [{            data : data,            mapData: Highcharts.maps['countries/china'],            joinBy: 'hc-key',            name: 'xxx分布',            states: {                hover: {                    color: '#BADA55'                }            },            dataLabels: {                enabled: true,                format: '{point.name}'            }        }]    });});</script>  </head>    <body>  <div id="container"></div>  </body></html>

Action代码

package com.li72.action;import com.li72.dao.MapDao;import com.opensymphony.xwork2.ActionSupport;/** * @author 一个简单的前后台交换 地图展示 * */public class MapAction extends ActionSupport{private static final long serialVersionUID = -5452039838295753607L;MapDao map= new MapDao();private String data;public String  chinaMap(){data = map.mkData();return SUCCESS;}public String getData() {return data;}public void setData(String data) {this.data = data;}}

dao层，产生模拟数据，建议把地图做成通用的，只要把数据源改变，就可以产生不同的按地区分布图。

package com.li72.dao;import java.util.HashMap;import java.util.Map;import java.util.Random;public class MapDao {/** * @return  按照地图的设定，对这些省市进行设值 */public String  mkData(){StringBuffer sb = new StringBuffer("");Map<String,String> myMap= new HashMap<String,String>(40);myMap.put("吉林省","cn-jl");        myMap.put("天津市","cn-tj");        myMap.put("安徽省","cn-ah");        myMap.put("山东省","cn-sd");        myMap.put("山西省","cn-sx");        myMap.put("新疆维吾尔自治区","cn-xj");myMap.put("河北省","cn-hb");        myMap.put("河南省","cn-he");        myMap.put("湖南省","cn-hn");        myMap.put("甘肃省","cn-gs");        myMap.put("福建省","cn-fj");        myMap.put("贵州省","cn-gz");        myMap.put("重庆市","cn-cq");        myMap.put("江苏省","cn-js");        myMap.put("湖北省","cn-hu");        myMap.put("内蒙古自治区","cn-nm");  myMap.put("广西壮族自治区","cn-gx"); myMap.put("黑龙江省","cn-hl");      myMap.put("云南省","cn-yn");        myMap.put("辽宁省","cn-ln");        myMap.put("香港特别行政区","cn-6668"); myMap.put("浙江省","cn-zj");        myMap.put("上海市","cn-sh");        myMap.put("北京市","cn-bj");        myMap.put("广东省","cn-gd");        myMap.put("澳门特别行政区","cn-3681"); myMap.put("西藏自治区","cn-xz");    myMap.put("陕西省","cn-sa");        myMap.put("四川省","cn-sc");        myMap.put("海南省","cn-ha");        myMap.put("宁夏回族自治区","cn-nx"); myMap.put("青海省","cn-qh");        myMap.put("江西省","cn-jx");        myMap.put("台湾省","tw-tw");        //  {"hc-key": "cn-sh","value": 0},Random random = new Random();String value="";for (Object o : myMap.keySet()) { value= random.nextInt(100)+1+"" ;sb.append("{'hc-key':'").append(myMap.get(o)).append("','value':").append(value).append("},").append("\n");;}return  sb.deleteCharAt(sb.length()-1)+"";}

Struts2配置

<package name="li72" extends="struts-default"><action name="chinaMap" class="com.li72.action.MapAction" method="chinaMap"><result name="success">/china-map.jsp</result></action></package>

下载地图开发实例，包括地图数据，包括其他的example

地图开发代码

3 1