您的位置：首页 > Web前端 > JavaScript

[javascript]中国地图之热点图

2013-11-13 13:03 736 查看

热点图的实现方法：

1.Google Map ：

适合大数据量，单条记录的热点分布：

成功案例：http://www.sightsmap.com/
官方 Google Map API 文档地址： https://developers.google.com/maps/documentation/javascript/layers?hl=zh-cn#JSHeatMaps
一个例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Heatmaps</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization"></script>
<script>
// Adding 500 Data Points
var map, pointarray, heatmap;

var taxiData = [
{location: new google.maps.LatLng(31.236,121.470), weight: 250},
{location: new google.maps.LatLng(30.2769,120.1549), weight: 130}
];

function initialize() {
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(30.2769,120.1549),
mapTypeId: google.maps.MapTypeId.SATELLITE
};

map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);

var pointArray = new google.maps.MVCArray(taxiData);

heatmap = new google.maps.visualization.HeatmapLayer({
data: pointArray
});

heatmap.setMap(map);
}

function toggleHeatmap() {
heatmap.setMap(heatmap.getMap() ? null : map);
}

function changeGradient() {
var gradient = [
'rgba(0, 255, 255, 0)',
'rgba(0, 255, 255, 1)',
'rgba(0, 191, 255, 1)',
'rgba(0, 127, 255, 1)',
'rgba(0, 63, 255, 1)',
'rgba(0, 0, 255, 1)',
'rgba(0, 0, 223, 1)',
'rgba(0, 0, 191, 1)',
'rgba(0, 0, 159, 1)',
'rgba(0, 0, 127, 1)',
'rgba(63, 0, 91, 1)',
'rgba(127, 0, 63, 1)',
'rgba(191, 0, 31, 1)',
'rgba(255, 0, 0, 1)'
]
heatmap.setOptions({
gradient: heatmap.get('gradient') ? null : gradient
});
}

function changeRadius() {
heatmap.setOptions({radius: heatmap.get('radius') ? null : 20});
}

function changeOpacity() {
heatmap.setOptions({opacity: heatmap.get('opacity') ? null : 0.2});
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>

<body>
<div id="panel">
<button onclick="toggleHeatmap()">Toggle Heatmap</button>
<button onclick="changeGradient()">Change gradient</button>
<button onclick="changeRadius()">Change radius</button>
<button onclick="changeOpacity()">Change opacity</button>
</div>
<div id="map-canvas"></div>
</body>
</html>

效果:

优缺点：

Goolge出品，良好的支持。
过分详细的地图，这个在某些需求上很优秀，某些就无法支撑了。
定制化不够，比如需要按省份统计数据。

2.Raphael JS + D3.js

参考博文：/article/2810772.html
我并没有去仔细看，但这种方法肯定能实现

3.Jvectormap

官方网站中国地图：http://jvectormap.com/maps/countries/china/
官方网站热点地图：http://jvectormap.com/examples/usa-unemployment/
官方网站热点地图源码：https://github.com/bjornd/jvectormap-examples/tree/master/us-unemployment
例子：

<!DOCTYPE html>
<html>
<head>
<title>jVectorMap demo</title>
<link rel="stylesheet" href="jquery-jvectormap-1.2.2.css" type="text/css" media="screen"/>
<script src="jquery.js"></script>
<script src="jquery-jvectormap-1.2.2.min.js"></script>
<script src="cn_mill_en.js"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
<script>
var gdpData = {
"CN-35": 16.63,
"CN-54": 11.58,
"CN-33": 158.97
};
$(function(){
$('#map').vectorMap({map: 'cn_mill_en',
series: {
regions: [{
values: gdpData,
scale: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial'
}]
},
onLabelShow: function(e, el, code){
el.html(el.html()+' (GDP - '+gdpData[code]+')');
}

});
});
</script>

</body>
</html>

其中jquery-jvectormap-1.2.2.min.js ，cn_mill_en.js 需要到官网下载
效果图

优缺点：
比较符合省市区域图。可以自定义，但是某些地方做的不够，需要大量的2次开发。

其他相关：

4.SVG 地图制作：

下载世界地理信息：http://www.naturalearthdata.com/downloads/ （比较全面的地理信息文件，如果需要城市河流，需要下载附加包）
用工具转换成SVG：windows是 arcgis linux 也有不少
图：

自己写Java提取（使用开源工具Geotools）：

public static void main(String[] args) throws Exception {
//admin
chinaCodeMap = ChinaCode.getMap();
System.out.println("ssss:"+chinaCodeMap.size());
readSHP("/home/jiangww/spy/110mi/ne_10m_admin_1_states_provinces.shp",new a());
System.out.println("ssss:"+province.size());
province.add("Ningxia Huizu Zizhiqu");
province.add("Xinjiang Uygur Zizhiqu");
province.add("Nei Mongol Zizhiqu");
//callExceP();
readSHP("/home/jiangww/spy/110mi/ne_10m_populated_places.shp",new b());
System.out.println("ssss:"+all.size());

}

public static  void readSHP(String path ,abc ob) throws CQLException {
ShapefileDataStore shpDataStore = null;
try {
shpDataStore = new ShapefileDataStore(new File(path).toURI()
.toURL());
Filter f = CQL.toFilter("NAME = 'Zhejiang' ");

String typeName = shpDataStore.getTypeNames()[0];
FeatureSource<SimpleFeatureType, SimpleFeature> featureSource = null;
featureSource = (FeatureSource<SimpleFeatureType, SimpleFeature>) shpDataStore
.getFeatureSource(typeName);
FeatureCollection<SimpleFeatureType, SimpleFeature> result = featureSource
.getFeatures();
FeatureIterator<SimpleFeature> itertor = result.features();
/*
* 或者使用 FeatureReader FeatureReader reader =
* DataUtilities.reader(result); while(reader.hasNext()){
* SimpleFeature feature = (SimpleFeature) reader.next(); }
*/
while (itertor.hasNext()) {
SimpleFeature feature = itertor.next();
ob.rum(feature);
}
} catch (MalformedURLException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}

static class b implements abc{

/* (non-Javadoc)
* @see org.geotools.tutorial.quickstart.FilterExam.abc#rum()
*/
@Override
public void rum(SimpleFeature feature) {
String name =  feature.getAttribute("ADM1NAME").toString();
String a = feature.getAttribute("NAME").toString();
if("Guide".equals(a)){
name = "Qinghai";
}
if(province.contains(name)){
String latitude =  feature.getAttribute("LATITUDE").toString();
String longitude = feature.getAttribute("LONGITUDE").toString();
String name2 = feature.getAttribute("NAME").toString();
System.out.println(name2 + " : " +latitude + "-" + longitude);
City c = new City(name2, name, latitude, longitude);
List<City> cs = all.get(name);
if(cs == null)
cs = new ArrayList<City>();
cs.add(c);
all.put(name, cs);
}

}

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航