mapv
Version:
a library of geography visualization
916 lines (850 loc) • 31.4 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%;
}
#dragzone {
position: absolute;
left: 5px;
top: 40px;
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;
font-size: 12px;
}
#legend {
position: absolute;
right: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="dragzone">数据csv文件拖放到此</div>
<div id="legend">
</div>
<div id="panel">
<input type="text" id="keyword" value="北京市,河北省,天津市" />
<input type="button" value="查看边界" id="boundaryBtn" />
<input type="button" value="切换底图" id="switchMap" />
级别:<span id="zoom"></span>
<div><a href="data/editor.csv">示例csv下载</a></div>
</div>
<script type="text/javascript" src="//cdn.bootcss.com/jquery/3.0.0/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">
// 百度地图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 setSubwayStyle() {
map.setMapStyle({
styleJson: [
{
"featureType": "all",
"elementType": "all",
"stylers": {
"lightness": 61,
"saturation": -100
}
},
{
"featureType": "all",
"elementType": "labels",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "subway",
"elementType": "all",
"stylers": {
"color": "#666666",
"weight": "0.6",
"lightness": 18,
"saturation": -9,
"visibility": "on"
}
},
{
"featureType": "subway",
"elementType": "labels.text.fill",
"stylers": {
"color": "#0000ff",
"weight": "4.2",
"lightness": -3,
"saturation": 100,
"visibility": "on"
}
},
{
"featureType": "subway",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#ffffff",
"visibility": "on"
}
}
]
});
}
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"
}
}
]
});
}
function setDarkBlueStyle() {
map.setMapStyle({
styleJson: [
{
"featureType": "water",
"elementType": "all",
"stylers": {
"color": "#044161"
}
},
{
"featureType": "land",
"elementType": "all",
"stylers": {
"color": "#004981"
}
},
{
"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": "off"
}
},
{
"featureType": "arterial",
"elementType": "geometry",
"stylers": {
"color": "#004981"
}
},
{
"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": {
"color": "#115d97",
"visibility": "on"
}
},
{
"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": "local",
"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 mapvLayers = [];
function finished() {
if (mapvLayers.length > 0) {
if (options.splitListText) {
options.splitList = JSON.parse(options.splitListText);
}
var mapvLayer = mapvLayers[mapvLayers.length - 1];
mapvLayers[mapvLayers.length - 1].update({
options: options
});
var legend = mapvLayer.getLegend();
$('#legend').html('');
$('#legend').append(legend);
}
};
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;
var options = {
draw: 'simple',
max: 100,
coordType: 'bd09ll',
size: 7,
symbol: 'circle',
zIndex: 1,
maxSize: 50,
maxOpacity: 0.8,
globalAlpha: 0.9,
lineWidth: 0,
unit: 'px',
//color: ['#f70000', '#299663', '#4053db', '#a2408d', 'blue'],
color: ['red', 'yellow', 'rgb(0, 250, 0)', 'rgb(0, 255, 255)', 'rgb(0, 50, 255)'],
splitListText: '{"1": "red", "2": "yellow", "3": "rgb(0, 250, 0)"}',
splitList: {
1: 'rgb(0, 250, 0)',
2: 'yellow',
3: 'red'
},
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(256, 50, 50, 0.8)',
strokeStyle: 'rgba(55, 50, 250, 0.6)',
// shadowColor: 'rgba(55, 50, 250, 0.5)',
// shadowBlur: 10
}
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);
}
gui.add(options, 'coordType', {
'经纬度': 'bd09ll',
'墨卡托': 'bd09mc',
}).onFinishChange(function () {
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 'category':
gui.add(options, 'splitListText').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;
var data = [];
var dataSet = new mapv.DataSet(data);
var mapvLayer = new mapv.baiduMapLayer(map, dataSet, $.extend({}, options));
mapvLayers.push(mapvLayer);
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 if (/city1|city2|lng1|lng2|lat1|lat2/.exec(rs)) {
var newDataSet = mapv.csv.getDataSet(rs);
var pointData = [];
newDataSet.initGeometry(function (a) {
if (a.city1) {
var cityCenter = mapv.utilCityCenter.getCenterByCityName(a.city1);
if (cityCenter) {
a.lng1 = cityCenter.lng;
a.lat1 = cityCenter.lat;
}
}
if (a.city2) {
var cityCenter = mapv.utilCityCenter.getCenterByCityName(a.city2);
if (cityCenter) {
a.lng2 = cityCenter.lng;
a.lat2 = cityCenter.lat;
}
}
if (!(a.lng1 && a.lat1 && a.lng2 && a.lat2)) {
return;
}
pointData.push({
text: a.city1,
geometry: {
type: 'Point',
coordinates: [a.lng1, a.lat1]
}
});
pointData.push({
text: a.city2,
geometry: {
type: 'Point',
coordinates: [a.lng2, a.lat2]
}
});
return {
type: 'LineString',
coordinates: [[a.lng1, a.lat1], [a.lng2, a.lat2]]
}
});
var intensity = new mapv.utilDataRangeIntensity({
maxSize: 20,
minSize: 1,
max: newDataSet.getMax('count'),
min: newDataSet.getMin('count'),
});
dataSet.set(newDataSet.get().filter(function(item) {
item.lineWidth = intensity.getSize(item.count);
return item.geometry;
}));
console.log(dataSet.get());
var option = {
fillStyle: 'rgba(252, 53, 58, 1)',
zIndex: 2,
size: 3,
draw: 'simple'
}
new mapv.baiduMapLayer(map, new mapv.DataSet(pointData), option);
var option = {
fillStyle: 'rgba(252, 53, 58, 1)',
font: '12px Arial',
avoid: true,
zIndex: 2,
size: 12,
draw: 'text'
}
new mapv.baiduMapLayer(map, new mapv.DataSet(pointData), option);
} else if (/path/.exec(rs)) {
var newDataSet = mapv.csv.getDataSet(rs);
newDataSet.initGeometry(function(item) {
var coordinates = [];
var path = item.path.split(',');
for (var i = 0; i < path.length; i += 2) {
coordinates.push([path[i], path[i + 1]]);
}
return {
type: 'Polygon',
coordinates: [coordinates]
}
});
dataSet.set(newDataSet.get());
} 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 > 4) {
isChina = 1;
}
if (isChina == 1) {
setNullStyle();
chinaLayer.show();
} else if (isChina == 2) {
setSubwayStyle();
chinaLayer.hide();
} else if (isChina == 3) {
setDarkBlueStyle();
chinaLayer.hide();
} else if (isChina == 4) {
setGrayStyle();
chinaLayer.hide();
} else {
setDarkStyle();
chinaLayer.hide();
}
});
map.addEventListener('zoomend', showZoom);
function showZoom() {
$('#zoom').html(map.getZoom());
}
showZoom();
</script>
</body>
</html>