mapv
Version:
a library of geography visualization
162 lines (135 loc) • 4.64 kB
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%;
}
.panel {
position:absolute;
left: 0;
top: 0;
background:rgba(0, 0, 0, 0.5);
padding: 10px;
width: 200px;
}
</style>
</head>
<body>
<div id="map"></div>
<canvas id="canvas"></canvas>
<div class="panel">
<input type="text" id="boundaryTxt" value="北京,天津,河北"/>
<input type="button" value="添加边界" id="addBoundaryBtn"/>
</div>
<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(105.403119, 38.028658), 5); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
map.setMapStyle({
styleJson: [
{
"featureType": "all",
"elementType": "all",
"stylers": {
"lightness": 61,
"saturation": -100
}
},
{
"featureType": "road",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}
]
});
$.get('data/drive.txt', function(result) {
var options = {
zIndex: 10,
lineWidth: 3,
strokeStyle: 'red',
shadowClor: 'red',
shadowBlur: 10,
draw: 'simple'
}
result = result.split("\n");
var data = [];
for (var i = 0; i < result.length; i++) {
var item = result[i];
var lineStr = item.split(',');
var coordinates = [];
for (var j = 0; j < lineStr.length; j += 2) {
coordinates.push([lineStr[j], lineStr[j + 1]]);
}
data.push({
geometry: {
type: 'LineString',
coordinates: coordinates
}
});
}
var dataSet = new mapv.DataSet(data);
var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);
});
$('#addBoundaryBtn').bind('click', function () {
var boundaryTxt = $('#boundaryTxt').val();
if (boundaryTxt) {
boundaryTxt = boundaryTxt.split(',');
for (var i = 0; i < boundaryTxt.length; i++) {
getBoundary(boundaryTxt[i]);
}
}
});
var bdData = [];
function getBoundary(cityname){
var bdary = new BMap.Boundary();
bdary.get(cityname, function(rs){ // 异步加载
var boundary = rs.boundaries[0];
boundary = boundary.split(";");
var coordinates = [];
for (var i = 0; i < boundary.length; i++) {
boundary[i] = boundary[i].split(",");
coordinates.push(boundary[i]);
}
bdData.push({
geometry: {
type: 'LineString',
coordinates: coordinates
}
});
bdDataSet.set(bdData);
console.log(bdDataSet);
});
}
var bdOptions = {
globalAlpha: 0.9,
fillStyle: 'rgba(50, 50, 255, 0.05)',
lineWidth: 2,
bigData: 'LineString',
strokeStyle: 'rgba(1, 161, 215, 0.8)',
max: 100,
draw: 'simple'
}
var bdDataSet = new mapv.DataSet(bdData);
var mapvLayer = new mapv.baiduMapLayer(map, bdDataSet, bdOptions);
</script>
</body>
</html>