mapv
Version:
a library of geography visualization
590 lines (540 loc) • 19.6 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%;
}
#dragzone {
position: absolute;
left: 5px;
top: 30px;
padding: 10px;
width: 120px;
font-size: 12px;
height: 30px;
line-height: 30px;
background: rgba(255, 255, 55, 0.8);
border: 1px dashed #999;
}
#panel {
position: absolute;
left: 5px;
top: 5px;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="dragzone">数据csv文件拖放到此</div>
<div id="panel">
<input type="text" id="keyword" value="北京市,河北省,天津市"/>
<input type="button" value="查看边界" id="boundaryBtn"/>
<input type="button" value="切换底图" id="switchMap"/>
</div>
<script type="text/javascript" src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript" src="//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">
// 百度地图API功能
var map = new BMap.Map("map", {
enableMapClick: false
}); // 创建Map实例
map.centerAndZoom(new BMap.Point(105.403119, 38.028658), 5); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
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);
function setNullStyle() {
map.setMapStyle({
styleJson: [
{
"featureType": "all",
"elementType": "all",
"stylers": {
"visibility": "off"
}
}
]
});
map.getContainer().style.background = '#fff';
}
function setGrayStyle() {
map.setMapStyle({
styleJson: [
{
"featureType": "all",
"elementType": "all",
"stylers": {
"lightness": 61,
"saturation": -100
}
},
{
"featureType": "all",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}
]
});
}
function setDarkStyle() {
map.setMapStyle({
styleJson: [{
featureType: 'water',
elementType: 'all',
stylers: {
color: '#044161'
}
}, {
featureType: 'land',
elementType: 'all',
stylers: {
color: '#091934'
}
}, {
featureType: 'boundary',
elementType: 'geometry',
stylers: {
color: '#064f85'
}
}, {
featureType: 'railway',
elementType: 'all',
stylers: {
visibility: 'off'
}
}, {
featureType: 'highway',
elementType: 'geometry',
stylers: {
color: '#004981'
}
}, {
featureType: 'highway',
elementType: 'geometry.fill',
stylers: {
color: '#005b96',
lightness: 1
}
}, {
featureType: 'highway',
elementType: 'labels',
stylers: {
visibility: 'on'
}
}, {
featureType: 'arterial',
elementType: 'geometry',
stylers: {
color: '#004981',
lightness: -39
}
}, {
featureType: 'arterial',
elementType: 'geometry.fill',
stylers: {
color: '#00508b'
}
}, {
featureType: 'poi',
elementType: 'all',
stylers: {
visibility: 'off'
}
}, {
featureType: 'green',
elementType: 'all',
stylers: {
color: '#056197',
visibility: 'off'
}
}, {
featureType: 'subway',
elementType: 'all',
stylers: {
visibility: 'off'
}
}, {
featureType: 'manmade',
elementType: 'all',
stylers: {
visibility: 'off'
}
}, {
featureType: 'local',
elementType: 'all',
stylers: {
visibility: 'off'
}
}, {
featureType: 'arterial',
elementType: 'labels',
stylers: {
visibility: 'off'
}
}, {
featureType: 'boundary',
elementType: 'geometry.fill',
stylers: {
color: '#029fd4'
}
}, {
featureType: 'building',
elementType: 'all',
stylers: {
color: '#1a5787'
}
}, {
featureType: 'label',
elementType: 'all',
stylers: {
visibility: 'off'
}
}, {
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: {
color: '#ffffff'
}
}, {
featureType: 'poi',
elementType: 'labels.text.stroke',
stylers: {
color: '#1e1c1c'
}
},
{
"featureType": "all",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
}
]
});
}
setNullStyle();
var chinaLayer = null;
$.get('data/china.json', function(geojson) {
var dataSet = mapv.geojson.getDataSet(geojson);
var options = {
fillStyle: 'rgba(218, 218, 218, 1)',
//fillStyle: '#1495ff',
//fillStyle: 'lightblue',
//fillStyle: 'rgba(50, 50, 50, 0.5)',
//strokeStyle: '#999',
strokeStyle: 'rgba(255, 255, 255, 1)',
lineWidth: 1,
zIndex: -2,
paneName: 'mapPane',
draw: 'simple'
}
chinaLayer = new mapv.baiduMapLayer(map, dataSet, options);
});
var randomCount = 300;
var data = [];
var citys = ["北京","天津","上海","重庆","石家庄","太原","呼和浩特","哈尔滨","长春","沈阳","济南","南京","合肥","杭州","南昌","福州","郑州","武汉","长沙","广州","南宁","西安","银川","兰州","西宁","乌鲁木齐","成都","贵阳","昆明","拉萨","海口"];
// 构造数据
while (randomCount--) {
var cityCenter = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);
data.push({
geometry: {
type: 'Point',
coordinates: [cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4]
},
count: 100 * Math.random()
});
}
var dataSet = new mapv.DataSet(data);
var options = {
draw: 'heatmap',
max: 100,
coordType: 'bd09mc',
size: 5,
symbol: 'circle',
zIndex: 1,
maxSize: 50,
maxOpacity: 0.8,
globalAlpha: 1,
lineWidth: 0,
unit: 'px',
gradient: {
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)"
},
fillStyle: 'rgba(55, 50, 250, 0.6)',
strokeStyle: 'rgba(55, 50, 250, 0.6)',
// shadowColor: 'rgba(55, 50, 250, 0.5)',
// shadowBlur: 10
}
var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);
function finished() {
mapvLayer.update({
options: options
});
};
window.onload = function() {
initGui();
};
var gradientOptions = [
{
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.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)"
}
];
var gui;
function initGui() {
gui && gui.destroy();
gui = new dat.GUI({
nameMap: {
draw: '绘制方法',
unit: '单位',
size: '大小',
fillStyle: '颜色',
symbol: '形状',
globalAlpha: '图层透明度',
maxOpacity: '图层透明度',
// shadowColor: '阴影颜色',
// shadowBlur: '阴影大小',
gradient: '渐变色',
lineWidth: '线宽',
strokeStyle: '线颜色',
maxSize: '最大半径值',
max: '最大阈值',
}
});
gui.add(options, 'draw', {
'普通': 'simple',
'热力图': 'heatmap',
'气泡': 'bubble',
'颜色分类': 'category',
'蜂窝状聚类': 'honeycomb',
'网格聚类': 'grid',
'值区间分类': 'choropleth',
'颜色渐变': 'intensity'
}).onFinishChange(function () {
initGui();
finished();
});
gui.add(options, 'unit', {
'像素': 'px',
'米': 'm'
}).onFinishChange(function () {
initGui();
finished();
});
if (options.draw !== 'bubble') {
if (options.unit == 'm') {
gui.add(options, 'size', 0.1, 200000).onFinishChange(finished);
} else {
gui.add(options, 'size', 0.1, 100).onFinishChange(finished);
}
}
if (options.draw !== 'heatmap') {
gui.add(options, 'globalAlpha', 0, 1).onFinishChange(finished);
}
switch (options.draw) {
case 'simple':
gui.addColor(options, 'fillStyle').onChange(finished);
// gui.addColor(options, 'shadowColor').onChange(finished);
// gui.add(options, 'shadowBlur', 1, 100).onFinishChange(finished);
gui.add(options, 'lineWidth', 1, 10).onFinishChange(finished);
gui.addColor(options, 'strokeStyle').onChange(finished);
gui.add(options, 'symbol', {
'圆形': 'circle',
'矩形': 'rect',
}).onFinishChange(finished);
break;
case 'bubble':
gui.addColor(options, 'fillStyle').onChange(finished);
// gui.addColor(options, 'shadowColor').onChange(finished);
// gui.add(options, 'shadowBlur', 1, 100).onFinishChange(finished);
gui.add(options, 'lineWidth', 1, 10).onFinishChange(finished);
gui.addColor(options, 'strokeStyle').onChange(finished);
gui.add(options, 'max', 1, 1000).onFinishChange(finished);
gui.add(options, 'maxSize', 35, 100).onFinishChange(finished);
break;
case 'heatmap':
// gui.add(options, 'shadowBlur', 1, 100).onFinishChange(finished);
gui.add(options, 'max', 1, 1000).onFinishChange(finished);
gui.add(options, 'maxOpacity', 0, 1).onFinishChange(finished);
gui.addGradient(options, 'gradient', gradientOptions).onFinishChange(finished);
break;
case 'grid':
case 'intensity':
case 'honeycomb':
gui.add(options, 'max', 1, 1000).onFinishChange(finished);
gui.add(options, 'lineWidth', 1, 10).onFinishChange(finished);
gui.addColor(options, 'strokeStyle').onChange(finished);
gui.addGradient(options, 'gradient', gradientOptions).onFinishChange(finished);
break;
}
}
function dragHandle(event) {
var info = "",
files, i, len;
event.preventDefault();
if(event.type == "drop") {
files = event.dataTransfer.files;
var fr = new FileReader() ;
fr.readAsText(files[0]);
fr.onload = function() {
var rs = this.result;
if (rs[0] == '[' && rs[rs.length - 1] == ']') {
rs = JSON.parse(rs);
rs = rs.map(function (item) {
return {
geometry: {
type: 'Point',
coordinates: [item.x, item.y]
}
}
});
dataSet.set(rs);
} else {
var newDataSet = mapv.csv.getDataSet(rs);
newDataSet.initGeometry();
dataSet.set(newDataSet.get());
}
}
}
}
var dropTargetEle = document.getElementById("dragzone");
dropTargetEle.addEventListener("dragenter", dragHandle, false);
dropTargetEle.addEventListener("dragover", dragHandle, false);
dropTargetEle.addEventListener("drop", dragHandle, false);
$('#boundaryBtn').bind('click', function () {
var val = $("#keyword").val().split(',');
for (var i= 0; i < val.length; i++) {
getBoundary(val[i]);
}
});
function getBoundary(city){
var bdary = new BMap.Boundary();
bdary.get(city, function(rs){ //获取行政区域
var count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
alert('未能获取当前输入行政区域');
return ;
}
var pointArray = [];
for (var i = 0; i < count; i++) {
var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 0, strokeStyle: 'dashed', strokeOpacity: '0', fillOpacity: '0.5', fillColor: 'red', strokeColor: "yellow"}); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
pointArray = pointArray.concat(ply.getPath());
}
});
}
var isChina = 1;
$('#switchMap').bind('click', function() {
isChina++;
if (isChina > 3) {
isChina = 1;
}
if (isChina == 1) {
setNullStyle();
chinaLayer.show();
} else if (isChina == 2) {
setGrayStyle();
chinaLayer.hide();
} else {
setDarkStyle();
chinaLayer.hide();
}
});
</script>
</body>
</html>