Skip to content

Commit 8bdfcca

Browse files
wuzhuorui5wuzhuorui5
committed
增加openlayers可视化纽约出租车18万点图片实例 reviewBy zhurc
1 parent a11e8bf commit 8bdfcca

File tree

9 files changed

+285
-138
lines changed

9 files changed

+285
-138
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,8 @@
119119

120120
- 新增批量几何要素叠加分析示例
121121

122+
- 新增可视化纽约出租车18万点图片示例
123+
122124
### for MapboxGL
123125

124126
- 新增几何要素批量空间分析示例

‎examples/leaflet/12_graphicLayerClover.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
addGraphicLayer();
2727

2828
function addGraphicLayer() {
29-
var count = 1000;
29+
var count = 180000;
3030
var graphics = [];
3131
var e = 45;
3232
var clovers = [];

‎examples/openlayers/07_graphiclayer_canvas.html‎

Lines changed: 76 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -52,80 +52,89 @@
5252
<div id="popup-content"></div>
5353
</div>
5454
<script type="text/javascript">
55-
var url = (window.isLocal ? document.location.host : "http://support.supermap.com.cn:8090") + "/iserver/services/map-china400/rest/maps/China_4326";
55+
var url = (window.isLocal ? document.location.host : "http://support.supermap.com.cn:8090") + "/iserver/services/map-china400/rest/maps/ChinaDark";
56+
57+
var map;
5658
var colorCount = 10;
5759
var colors = getRandomColors(colorCount);
58-
new ol.supermap.MapService(url).getMapInfo(function (serviceResult) {
59-
var mapJSONObj = serviceResult.result;
60-
var container = document.getElementById('popup');
61-
var content = document.getElementById('popup-content');
62-
var overlay = new ol.Overlay(({
63-
element: container,
64-
autoPan: true,
65-
autoPanAnimation: {
66-
duration: 250
67-
}
68-
}));
69-
var map = new ol.Map({
70-
target: 'map',
71-
controls: ol.control.defaults({attributionOptions: {collapsed: false}})
72-
.extend([new ol.supermap.control.Logo()]),
73-
view: new ol.View({
74-
center: [0, 0],
75-
zoom: 2,
76-
projection: 'EPSG:4326'
77-
}),
78-
overlays: [overlay],
79-
renderer: ['canvas']
80-
});
81-
var options = ol.source.TileSuperMapRest.optionsFromMapJSON(url, mapJSONObj);
82-
var layer = new ol.layer.Tile({
83-
source: new ol.source.TileSuperMapRest(options)
84-
});
85-
map.addLayer(layer);
8660

87-
var randomCircleStyles = [];
88-
for (var i = 0; i < colorCount; i++) {
89-
randomCircleStyles.push(new ol.style.RegularShape({
90-
radius: Math.floor(Math.random() * 15 + 1),
91-
fill: new ol.style.Fill({
92-
color: colors[i]
93-
}),
94-
stroke: new ol.style.Stroke({
95-
color: colors[i]
96-
}),
97-
points: 3,
61+
$.get('../data/nyc_taxi.json', function (nycData) {
62+
new ol.supermap.MapService(url).getMapInfo(function (serviceResult) {
63+
var mapJSONObj = serviceResult.result;
64+
var container = document.getElementById('popup');
65+
var content = document.getElementById('popup-content');
66+
var overlay = new ol.Overlay(({
67+
element: container,
68+
autoPan: true,
69+
autoPanAnimation: {
70+
duration: 250
71+
}
9872
}));
99-
}
73+
map = new ol.Map({
74+
target: 'map',
75+
controls: ol.control.defaults({attributionOptions: {collapsed: false}})
76+
.extend([new ol.supermap.control.Logo()]),
77+
view: new ol.View({
78+
center: ol.proj.transform([-73.9286, 40.75], 'EPSG:4326', 'EPSG:3857'),
79+
zoom: 12,
80+
projection: 'EPSG:3857'
81+
}),
82+
overlays: [overlay],
83+
renderer: ['canvas']
84+
});
85+
var options = ol.source.TileSuperMapRest.optionsFromMapJSON(url, mapJSONObj);
86+
var layer = new ol.layer.Tile({
87+
source: new ol.source.TileSuperMapRest(options)
88+
});
89+
map.addLayer(layer);
10090

101-
var count = 100000; //矢量点的个数
102-
var graphics = new Array(count);
103-
var e = 45;
104-
for (var i = 0; i < count; ++i) {
105-
var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
106-
graphics[i] = new ol.Graphic(new ol.geom.Point(coordinates));
107-
graphics[i].setStyle(randomCircleStyles[Math.floor(Math.random() * colorCount)]);
108-
}
109-
map.once('postrender', function () {
110-
var graphicLayer = new ol.layer.Image({
111-
source: new ol.source.Graphic({
112-
graphics: graphics,
113-
map: map,
114-
onClick: function (graphic) {
115-
if (graphic) {
116-
var coords = graphic.getGeometry().getCoordinates();
117-
content.innerHTML = resources.text_coordinate + ":[" + coords[0] + "," + coords[1] + "]";
118-
overlay.setPosition(graphic.getGeometry().getCoordinates());
119-
return;
91+
var randomCircleStyles = [];
92+
for (var i = 0; i < colorCount; i++) {
93+
randomCircleStyles.push(new ol.style.RegularShape({
94+
radius: Math.floor(Math.random() * 10 + 1),
95+
fill: new ol.style.Fill({
96+
color: colors[i]
97+
}),
98+
stroke: new ol.style.Stroke({
99+
color: colors[i]
100+
}),
101+
points: 3,
102+
}));
103+
}
104+
105+
var count = nycData.features.length; //矢量点的个数
106+
var graphics = new Array(count);
107+
for (var i = 0; i < count; ++i) {
108+
var coordinates = nycData.features[i].geometry.coordinates;
109+
if (coordinates[0] === coordinates[1]) {
110+
continue;
111+
}
112+
coordinates = ol.proj.transform(coordinates, 'EPSG:4326', 'EPSG:3857');
113+
graphics[i] = new ol.Graphic(new ol.geom.Point(coordinates));
114+
graphics[i].setStyle(randomCircleStyles[Math.floor(Math.random() * colorCount)]);
115+
}
116+
map.once('postrender', function () {
117+
var graphicLayer = new ol.layer.Image({
118+
source: new ol.source.Graphic({
119+
graphics: graphics,
120+
map: map,
121+
onClick: function (graphic) {
122+
if (graphic) {
123+
var coords = graphic.getGeometry().getCoordinates();
124+
content.innerHTML = resources.text_coordinate + ":[" + coords[0] + "," + coords[1] + "]";
125+
overlay.setPosition(graphic.getGeometry().getCoordinates());
126+
return;
127+
}
128+
overlay.setPosition(undefined);
120129
}
121-
overlay.setPosition(undefined);
122-
}
123-
})
124-
});
125-
map.addLayer(graphicLayer);
126-
})
127-
});
130+
})
131+
});
132+
map.addLayer(graphicLayer);
133+
})
134+
});
128135

136+
137+
});
129138
function getRandomColors(count) {
130139
return randomColor({
131140
luminosity: 'bright',

‎examples/openlayers/07_graphiclayer_image.html‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
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+
<title data-i18n="resources.title_graphicLayerTaxi"></title>
8+
<script type="text/javascript" src="../js/include-web.js"></script>
9+
<script type="text/javascript" src="../../dist/include-openlayers.js"></script>
10+
<style>
11+
.ol-popup {
12+
position: absolute;
13+
background-color: white;
14+
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
15+
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
16+
padding: 15px;
17+
border-radius: 10px;
18+
border: 1px solid #cccccc;
19+
bottom: 12px;
20+
left: -50px;
21+
min-width: 50px;
22+
}
23+
24+
.ol-popup:after, .ol-popup:before {
25+
top: 100%;
26+
border: solid transparent;
27+
content: " ";
28+
height: 0;
29+
width: 0;
30+
position: absolute;
31+
pointer-events: none;
32+
}
33+
34+
.ol-popup:after {
35+
border-top-color: white;
36+
border-width: 10px;
37+
left: 48px;
38+
margin-left: -10px;
39+
}
40+
41+
.ol-popup:before {
42+
border-top-color: #cccccc;
43+
border-width: 11px;
44+
left: 48px;
45+
margin-left: -11px;
46+
}
47+
</style>
48+
</head>
49+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%">
50+
<div id="map" style="width: 100%;height:100%"></div>
51+
<div id="popup" class="ol-popup">
52+
<div id="popup-content"></div>
53+
</div>
54+
<script type="text/javascript">
55+
var url = (window.isLocal ? document.location.host : "http://support.supermap.com.cn:8090") + "/iserver/services/map-china400/rest/maps/ChinaDark";
56+
var map;
57+
$.get('../data/nyc_taxi.json', function (nycData) {
58+
new ol.supermap.MapService(url).getMapInfo(function (serviceResult) {
59+
var mapJSONObj = serviceResult.result;
60+
var container = document.getElementById('popup');
61+
var content = document.getElementById('popup-content');
62+
var overlay = new ol.Overlay(({
63+
element: container,
64+
autoPan: true,
65+
autoPanAnimation: {
66+
duration: 250
67+
}
68+
}));
69+
map = new ol.Map({
70+
target: 'map',
71+
controls: ol.control.defaults({attributionOptions: {collapsed: false}})
72+
.extend([new ol.supermap.control.Logo()]),
73+
view: new ol.View({
74+
center: ol.proj.transform([-73.9286, 40.75], 'EPSG:4326', 'EPSG:3857'),
75+
zoom: 12,
76+
projection: 'EPSG:3857'
77+
}),
78+
overlays: [overlay],
79+
renderer: ['canvas']
80+
});
81+
var options = ol.source.TileSuperMapRest.optionsFromMapJSON(url, mapJSONObj);
82+
var layer = new ol.layer.Tile({
83+
source: new ol.source.TileSuperMapRest(options)
84+
});
85+
map.addLayer(layer);
86+
87+
88+
var img = new Image();
89+
img.src = '../img/taxi.png';
90+
img.onload = function () {
91+
var imageStyle = new ol.style.Icon(({
92+
img: this,
93+
size: [20, 20],
94+
imgSize: [20, 20]
95+
}));
96+
var counts = nycData.features.length; //矢量点的个数
97+
var graphics = new Array(counts);
98+
99+
100+
for (var i = 0; i < counts; ++i) {
101+
var coordinates = nycData.features[i].geometry.coordinates;
102+
if (coordinates[0] === coordinates[1]) {
103+
continue;
104+
}
105+
coordinates = ol.proj.transform(coordinates, 'EPSG:4326', 'EPSG:3857');
106+
graphics[i] = new ol.Graphic(new ol.geom.Point(coordinates));
107+
graphics[i].setStyle(imageStyle);
108+
}
109+
map.once('postrender', function () {
110+
var graphicLayer = new ol.layer.Image({
111+
source: new ol.source.Graphic({
112+
graphics: graphics,
113+
map: map
114+
})
115+
});
116+
map.addLayer(graphicLayer);
117+
})
118+
}
119+
});
120+
});
121+
</script>
122+
</body>
123+
</html>

0 commit comments

Comments
 (0)