mapv
Version:
a library of geography visualization
125 lines (102 loc) • 3.37 kB
HTML
<!-- 暂时下线geoson
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#map {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<canvas id="canvas"></canvas>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
<script type="text/javascript" src="../build/mapv.js"></script>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("map", {
enableMapClick: false
}); // 创建Map实例
map.centerAndZoom(new BMap.Point(113.678121,22.64869), 9); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
map.setMapStyle({
styleJson: [
{
"featureType": "all",
"elementType": "all",
"stylers": {
"lightness": 61,
"saturation": -100
}
}
]
});
$.get('data/geojson/guang_dong.geo.json', function(geojson) {
var options = {
gradient: {
0: 'yellow',
1: 'red'
},
globalAlpha: 0.8,
draw: 'intensity'
}
var dataSet = mapv.geojson.getDataSet(geojson);
var citys = {
'深圳市': 20,
'广州市': 40,
'佛山市': 60,
'江门市': 80,
'中山市': 100,
}
var data = dataSet.get({
filter: function (item) {
if (!citys[item.name]) {
return false;
}
item.count = citys[item.name];
return true;
}
});
dataSet = new mapv.DataSet(data);
var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);
var textOptions = {
draw: 'text',
font: '14px Arial',
fillStyle: 'blue',
shadowColor: 'white',
shadowBlue: 20,
zIndex: 11,
shadowBlur: 10
}
var data = [];
for (var key in citys) {
var center = mapv.utilCityCenter.getCenterByCityName(key.replace('市', ''));
data.push(
{
geometry: {
type: 'Point',
coordinates: [center.lng, center.lat]
},
text: key
}
);
}
var dataSet = new mapv.DataSet(data);
var mapvLayer = new mapv.baiduMapLayer(map, dataSet, textOptions);
});
</script>
</body>
</html>
-->