mapv
Version:
a library of geography visualization
469 lines (410 loc) • 14 kB
HTML
<!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" src="js/dat.gui.min.js"></script>
<script type="text/javascript">
var gui;
var options = {
gradient: {
0: 'yellow',
1: 'red',
}
};
initGui();
function initGui() {
gui && gui.destroy();
gui = new dat.GUI({
nameMap: {
draw: '绘制方法',
}
});
var gradientOptions = [
{
0: "#3fcd3c",
0.5: "#f8bf34",
1.0: "#f65e5c"
},
{
0: "#8ed46a",
0.5: "#e9fb8a",
1.0: "#ed996d"
},
{
0: "#8ed46a",
0.25: "#c9d868",
0.5: "#f1b658",
0.75: "#e9684c",
1: "#e3626d",
},
{
0.25: "rgba(0, 0, 255, 1)",
0.55: "rgba(0, 255, 0, 1)",
0.85: "rgba(255, 255, 0, 1)",
1.0: "rgba(255, 0, 0, 1)"
},
{
'0': 'Black',
'0.5': 'Aqua',
'1': 'White'
},
{
'0.0': 'blue',
'1': 'red'
},
{
'0.0': 'rgb(0, 0, 0)',
'0.6': 'rgb(24, 53, 103)',
'0.75': 'rgb(46, 100, 158)',
'0.9': 'rgb(23, 173, 203)',
'1.0': 'rgb(0, 250, 250)'
},
{
'0': 'Navy',
'0.25': 'Blue',
'0.5': 'Green',
'0.75': 'Yellow',
'1': 'Red'
},
{
'0': 'Black',
'0.33': 'DarkRed',
'0.66': 'Yellow',
'1': 'White'
},
{
'0': 'Black',
'0.4': 'Purple',
'0.6': 'Red',
'0.8': 'Yellow',
'1': 'White'
},
{
'0': 'Red',
'0.66': 'Yellow',
'1': 'White'
},
{
'0': 'Navy', '0.25': 'Navy',
'0.26': 'Green',
'0.5': 'Green',
'0.51': 'Yellow',
'0.75': 'Yellow',
'0.76': 'Red',
'1': 'Red'
},
{
'0': 'rgba(55, 55, 255, 0.6)',
'0.3': 'rgba(55, 55, 255, 0.6)',
'0.31': 'rgba(55, 255, 50, 0.6)',
'0.7': 'rgba(55, 255, 50, 0.6)',
'0.71': 'rgba(255, 50, 50, 0.6)',
'1': 'rgba(255, 50, 50, 0.6)'
},
{
'0.00': 'rgb(255,0,255)',
'0.25': 'rgb(0,0,255)',
'0.50': 'rgb(0,255,0)',
'0.75': 'rgb(255,255,0)',
'1.00': 'rgb(255,0,0)'
},
{
0: "yellow",
1.0: "red"
},
{
0: "white",
1.0: "blue"
},
{
0: "green",
1.0: "rgb(0, 255, 255)"
},
{
0: "green",
0.5: "yellow",
1.0: "red"
},
{
0: "lightgreen",
1.0: "darkgreen"
},
{
0: "lightgreen",
1.0: "darkgreen"
}
];
gui.addGradient(options, 'gradient', gradientOptions).onFinishChange(finished);
}
function finished() {
mapvLayer.update({
options: {
gradient: options.gradient
}
});
}
// 百度地图API功能
var map = new BMap.Map("map", {
enableMapClick: false
}); // 创建Map实例
map.centerAndZoom(new BMap.Point(105.403119, 38.028658), 5); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
map.setMapStyle({
styleJson: [
{
"featureType": "all",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "background",
"elementType": "all",
"stylers": {
"color": "#ffffff",
"visibility": "on"
}
}
]
});
map.getContainer().style.background = '#fff';
var pt = new BMap.Point(127.733142,21.226515);
var jiuduanwidth = 408;
var jiuduanheight = 563;
var scale = 4.5;
var myIcon = new BMap.Icon("./images/nanhai.png", new BMap.Size(jiuduanwidth / scale, jiuduanheight / scale), {
imageSize: new BMap.Size(jiuduanwidth / scale, jiuduanheight / scale)
});
var marker2 = new BMap.Marker(pt,{icon:myIcon}); // 创建标注
map.addOverlay(marker2);
marker2.enableDragging();
var mapvLayer = null;
$.get('data/china.json', function(geojson) {
var geojsonOptions = {
zIndex: 3,
max: 3,
draw: 'simple'
}
var geojsonDataSet = mapv.geojson.getDataSet(geojson);
var to = '甘肃';
// 如是迁出，则填写迁出
var showType = '迁入';
var isShowTo = true;
var qianxi = new mapv.DataSet([
{
from: '上海',
to: '苏州',
count: 3,
},
{
from: '保定',
to: '北京',
count: 3,
},
{
from: '廊坊',
to: '北京',
count: 3,
},
{
from: '北京',
to: '天津',
count: 2,
},
{
from: '重庆',
to: '成都',
count: 2,
},
{
from: '张家口',
to: '北京',
count: 2,
},
{
from: '上海',
to: '杭州',
count: 2,
},
{
from: '南通',
to: '上海',
count: 1,
},
{
from: '承德',
to: '北京',
count: 1,
},
{
from: '上海',
to: '嘉兴',
count: 1,
},
]);
var qianxiData = qianxi.get();
var lineData = [];
var pointData = [];
var textData = [];
var timeData = [];
var citys = {}
for (var i = 0; i < qianxiData.length; i++) {
var fromColumn = showType == '迁入' ? 'from' : 'to';
var toColumn = showType == '迁入' ? 'to' : 'from';
var fromCenter = mapv.utilCityCenter.getCenterByCityName(qianxiData[i][fromColumn]);
var toCenter = mapv.utilCityCenter.getCenterByCityName(qianxiData[i][toColumn]);
if (!fromCenter || !toCenter) {
continue;
}
var point =
citys[qianxiData[i].from] = qianxiData[i].count;
var point = showType == '迁入' ? fromCenter : toCenter;
pointData.push(
{
geometry: {
type: 'Point',
coordinates: [point.lng, point.lat]
},
text: i + 1
}
);
textData.push(
{
geometry: {
type: 'Point',
coordinates: [point.lng, point.lat]
},
text: qianxiData[i].from
}
);
textData.push(
{
geometry: {
type: 'Point',
coordinates: [toCenter.lng, toCenter.lat]
},
text: qianxiData[i].to
}
);
var curve = mapv.utilCurve.getPoints([fromCenter, toCenter]);
for (j = 0; j < curve.length; j++) {
timeData.push({
geometry: {
type: 'Point',
coordinates: curve[j]
},
count: 1,
time: j
});
}
lineData.push({
geometry: {
type: 'LineString',
coordinates: curve
//coordinates: [[fromCenter.lng, fromCenter.lat], [toCenter.lng, toCenter.lat]]
},
count: 30 * Math.random()
});
}
/*
var data = geojsonDataSet.get({
filter: function (item) {
for (var i = 0; i < qianxiData.length; i++) {
if (item.name == qianxiData[i].from || item.name == qianxiData[i].to) {
item.fillStyle = 'rgba(255, 65, 256, 1)';
return true;
}
}
return false;
}
});
var layerDataSet = new mapv.DataSet(data);
mapvLayer = new mapv.baiduMapLayer(map, layerDataSet, geojsonOptions);
*/
var chinaLayer = new mapv.baiduMapLayer(map, geojsonDataSet, {
draw: 'simple',
lineWidth: 0.8,
strokeStyle: 'rgba(255, 255, 255, 1)',
fillStyle: 'rgba(218, 218, 218, 1)'
});
var textDataSet = new mapv.DataSet(textData);
var textOptions = {
draw: 'text',
font: 'bold 14px Arial',
avoid: true,
fillStyle: 'black',
zIndex: 200,
shadowBlur: 10
}
var textMapvLayer = new mapv.baiduMapLayer(map, textDataSet, textOptions);
var lineDataSet = new mapv.DataSet(lineData);
var lineOptions = {
strokeStyle: 'rgba(255, 50, 50, 0.8)',
shadowColor: 'rgba(255, 250, 50, 1)',
shadowBlur: 20,
lineWidth: 2,
zIndex: 100,
draw: 'simple'
}
var lineLayer = new mapv.baiduMapLayer(map, lineDataSet, lineOptions);
var pointOptions = {
fillStyle: 'rgba(255, 250, 250, 0.5)',
strokeStyle: 'rgba(255, 250, 250, 1)',
lineWidth: 1,
size: 10,
zIndex: 300,
draw: 'simple'
}
var pointDataSet = new mapv.DataSet(pointData);
//var pointLayer = new mapv.baiduMapLayer(map, pointDataSet, pointOptions);
/*
var numberLayer = new mapv.baiduMapLayer(map, pointDataSet, {
fillStyle: 'black',
zIndex: 300,
draw: 'text'
});
*/
var timeDataSet = new mapv.DataSet(timeData);
console.log(timeData);
var timeOptions = {
fillStyle: 'rgba(255, 250, 250, 0.5)',
zIndex: 150,
size: 2.5,
animation: {
type: 'time',
stepsRange: {
start: 0,
end: 50
},
trails: 10,
duration: 2,
},
draw: 'simple'
}
var timeMapvLayer = new mapv.baiduMapLayer(map, timeDataSet, timeOptions);
});
</script>
</body>
</html>