Skip to content

Commit 40a2292

Browse files
author
caoxinke
committed
添加OpenrLayers Mapv大数据、蜂巢图
1 parent 61a0813 commit 40a2292

File tree

11 files changed

+1224
-425
lines changed

11 files changed

+1224
-425
lines changed

‎build/deps.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -355,7 +355,12 @@ var deps = {
355355
"./src/openlayers/overlay/theme/graph.js",
356356
"./src/openlayers/overlay/theme/rankSymbol.js",
357357
"./src/openlayers/overlay/theme/themeFeature.js"
358-
358+
]
359+
},
360+
"Mapv": {
361+
"name": "Mapv",
362+
"src": [
363+
"./src/openlayers/overlay/mapv/source/mapv.js",
359364
]
360365
}
361366
}

‎build/webpack.config.openlayers.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ module.exports = {
1414
},
1515
externals: {
1616
'echarts': 'echarts',
17-
'openlayers': 'ol'
17+
'openlayers': 'ol',
18+
'mapv': 'mapv'
1819
},
1920

2021
module: {

‎dist/iclient9-openlayers.js‎

Lines changed: 741 additions & 423 deletions
Large diffs are not rendered by default.

‎examples/openlayers/config.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -365,6 +365,18 @@ var exampleConfig = {
365365
]
366366

367367
},
368+
"Mapv": {
369+
name: "Mapv",
370+
content: [{
371+
name: "蜂巢图",
372+
thumbnail: "mapvHoneycomb.png",
373+
fileName: "mapvHoneycomb"
374+
}, {
375+
name: "纽约出租车上车点",
376+
thumbnail: "mapNycTaxi.png",
377+
fileName: "mapNycTaxi"
378+
}]
379+
},
368380
"VectorTileLayer": {
369381
name: "矢量瓦片",
370382
content: [

‎examples/openlayers/img/mapNycTaxi.png‎

206 KB
Loading

‎examples/openlayers/img/mapvHoneycomb.png‎

79.8 KB
Loading

‎examples/openlayers/mapNycTaxi.html‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
6+
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
7+
<link href="http://cdn.bootcss.com/openlayers/4.0.1/ol.css" rel="stylesheet">
8+
<title>纽约出租车上车点</title>
9+
10+
<style type="text/css">
11+
#loading {
12+
position: absolute;
13+
top: 50%;
14+
left: 50%;
15+
margin-left: -130px;
16+
text-align: center;
17+
margin-top: -50px;
18+
width: 260px;
19+
padding: 20px;
20+
background: rgba(0, 0, 0, 0.5);
21+
color: yellow;
22+
font-size: 12pt;
23+
}
24+
25+
.ol-popup {
26+
position: absolute;
27+
top: 10px;
28+
right: 10px;
29+
}
30+
</style>
31+
</head>
32+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%">
33+
<div id="popup" class="ol-popup" style='width:20%'>
34+
</div>
35+
<div id="map" style="width: 100%;height:100%;border: 1px solid #dddddd"></div>
36+
<div id="loading">纽约出租车145万上车点数据加载中...</div>
37+
<script src="http://cdn.bootcss.com/openlayers/4.0.1/ol-debug.js"></script>
38+
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
39+
<script src="http://mapv.baidu.com/build/mapv.js"></script>
40+
<script type="text/javascript" src="http://cdn.bootcss.com/dat-gui/0.6.5/dat.gui.js"></script>
41+
<script type="text/javascript" src="../../dist/iclient9-openlayers.js"></script>
42+
<script type="text/javascript">
43+
var token = "pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw",
44+
mbUrl = 'https://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token=' + token;
45+
var map = new ol.Map({
46+
target: 'map',
47+
view: new ol.View({
48+
center: [-73.931577, 40.745654],
49+
zoom: 12,
50+
projection: 'EPSG:4326'
51+
})
52+
});
53+
map.addLayer(new ol.layer.Tile({
54+
source: new ol.source.XYZ({
55+
url: mbUrl,
56+
attributions: [
57+
new ol.Attribution({
58+
html: ' 数据来源 <a href="http://www.nyc.gov/html/tlc/html/about/trip_record_data.shtml/">NYCTaxi(纽约出租车上车点)</a>'
59+
})]
60+
})
61+
}));
62+
$.get('../data/nyc-taxi.csv', function (csvstr) {
63+
var dataSet = mapv.csv.getDataSet(csvstr);
64+
dataSet.initGeometry();
65+
var mapvOptions = {
66+
size: 1.5,
67+
context: 'webgl',
68+
fillStyle: 'rgba(250, 50, 50, 0.8)',
69+
draw: 'simple'
70+
};
71+
var options = {map: map, dataSet: dataSet, mapvOptions: mapvOptions};
72+
var layer = new ol.layer.Image({
73+
source: new ol.source.Mapv(options)
74+
});
75+
$('#loading').hide();
76+
initDatGUI(layer, mapvOptions);
77+
map.addLayer(layer);
78+
});
79+
80+
//设置菜单
81+
function initDatGUI(layer, options) {
82+
var gui = new dat.GUI();
83+
var popup = document.getElementById('popup');
84+
popup.appendChild(gui.domElement);
85+
gui.add(options, 'size', 0.1, 10).onFinishChange(finished);
86+
gui.addColor(options, 'fillStyle').onChange(finished);
87+
88+
function finished() {
89+
layer.getSource().update(options);
90+
}
91+
92+
var control = new ol.control.Control({element: popup});
93+
control.setMap(map);
94+
map.addControl(control);
95+
96+
}
97+
</script>
98+
</body>
99+
</html>

‎examples/openlayers/mapvHoneycomb.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
6+
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
7+
<link href="http://cdn.bootcss.com/openlayers/4.0.1/ol.css" rel="stylesheet">
8+
<title>mapv蜂巢图</title>
9+
</head>
10+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%">
11+
<div id="map" style="width: 100%;height:100%;border: 1px solid #dddddd"></div>
12+
<script src="http://mapv.baidu.com/build/mapv.min.js"></script>
13+
<script src="http://cdn.bootcss.com/openlayers/4.0.1/ol-debug.js"></script>
14+
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
15+
<script type="text/javascript" src="../../dist/iclient9-openlayers.js"></script>
16+
<script type="text/javascript">
17+
var token = "pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw",
18+
mbUrl = 'https://api.tiles.mapbox.com/v4/mapbox.dark/{z}/{x}/{y}.png?access_token=' + token;
19+
var map = new ol.Map({
20+
target: 'map',
21+
view: new ol.View({
22+
center: [105.403119, 38.028658],
23+
zoom: 4,
24+
projection: 'EPSG:4326'
25+
})
26+
});
27+
map.addLayer(new ol.layer.Tile({
28+
source: new ol.source.XYZ({
29+
url: mbUrl
30+
})
31+
}));
32+
var randomCount = 300;
33+
var data = [];
34+
var citys = ["北京", "天津", "上海", "重庆", "石家庄", "太原", "呼和浩特", "哈尔滨", "长春", "沈阳", "济南", "南京", "合肥", "杭州", "南昌", "福州", "郑州", "武汉", "长沙", "广州", "南宁", "西安", "银川", "兰州", "西宁", "乌鲁木齐", "成都", "贵阳", "昆明", "拉萨", "海口"];
35+
// 构造数据
36+
while (randomCount--) {
37+
var cityCenter = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);
38+
data.push({
39+
geometry: {
40+
type: 'Point',
41+
coordinates: [cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4]
42+
},
43+
count: 30 * Math.random()
44+
});
45+
}
46+
var dataSet = new mapv.DataSet(data);
47+
var mapvOptions = {
48+
fillStyle: 'rgba(55, 50, 250, 0.8)',
49+
shadowColor: 'rgba(255, 250, 50, 1)',
50+
shadowBlur: 20,
51+
max: 100,
52+
size: 50,
53+
label: {
54+
show: true,
55+
fillStyle: 'white'
56+
},
57+
globalAlpha: 0.5,
58+
gradient: {0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"},
59+
draw: 'honeycomb'
60+
};
61+
var options = {map: map, dataSet: dataSet, mapvOptions: mapvOptions};
62+
map.addLayer(new ol.layer.Image({
63+
source: new ol.source.Mapv(options)
64+
}));
65+
66+
</script>
67+
</body>
68+
</html>

‎src/openlayers/overlay/mapv/MapvCanvasLayer.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
require('../../core/Base');
2+
3+
MapvCanvasLayer = function (options) {
4+
this.options = options || {};
5+
this.paneName = this.options.paneName || 'mapPane';
6+
this.context = this.options.context || '2d';
7+
this.zIndex = this.options.zIndex || 2;
8+
this.mixBlendMode = this.options.mixBlendMode || null;
9+
this.enableMassClear = this.options.enableMassClear;
10+
this._map = options.map;
11+
this.initialize();
12+
};
13+
14+
MapvCanvasLayer.prototype.initialize = function () {
15+
var me = this;
16+
var canvas = me.canvas = document.createElement("canvas");
17+
canvas.style.cssText = "position:absolute;" + "left:0;" + "top:0;" + "z-index:" + me.zIndex + ";user-select:none;";
18+
canvas.style.mixBlendMode = me.mixBlendMode;
19+
canvas.className = "mapvClass";
20+
var size = me._map.getSize();
21+
var global$2 = typeof window === 'undefined' ? {} : window;
22+
var devicePixelRatio = me.devicePixelRatio = global$2.devicePixelRatio;
23+
canvas.width = size[0];
24+
canvas.height = size[1];
25+
if (me.context == '2d') {
26+
canvas.getContext(me.context).scale(devicePixelRatio, devicePixelRatio);
27+
}
28+
canvas.style.width = canvas.width + "px";
29+
canvas.style.height = canvas.height + "px";
30+
};
31+
32+
MapvCanvasLayer.prototype.draw = function () {
33+
var size = this._map.getSize();
34+
var center = this._map.getView().getCenter();
35+
if (center) {
36+
var _p = this._map.getPixelFromCoordinate(center);
37+
if (_p) {
38+
this.canvas.style.left = _p[0] - size[0] / 2 + 'px';
39+
this.canvas.style.top = _p[1] - size[1] / 2 + 'px';
40+
this.options.update && this.options.update.call(this);
41+
}
42+
}
43+
};
44+
45+
MapvCanvasLayer.prototype.getContainer = function () {
46+
return this.canvas;
47+
};
48+
49+
MapvCanvasLayer.prototype.setZIndex = function (zIndex) {
50+
this.canvas.style.zIndex = zIndex;
51+
};
52+
53+
MapvCanvasLayer.prototype.getZIndex = function () {
54+
return this.zIndex;
55+
};
56+
57+
module.exports = MapvCanvasLayer;

0 commit comments

Comments
 (0)