Skip to content

Commit 8bdfcca

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

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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy