Skip to content

Commit cffa573

Browse files
songyumengsongyumeng
committed
【examples】增加示例
1 parent d2f7bb6 commit cffa573

File tree

1 file changed

+155
-0
lines changed

1 file changed

+155
-0
lines changed

‎examples/openlayers/07_graphiclayer_circle.html

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2020 SuperMap Software Co.Ltd. All rights reserved.
3+
*********************************************************************-->
4+
<!DOCTYPE html>
5+
<html lang="en-US">
6+
<head>
7+
<meta charset="UTF-8">
8+
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
9+
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
10+
<title data-i18n="resources.title_graphiclayerWebgl"></title>
11+
<script type="text/javascript" include="randomcolor,papaparse,widgets" src="../js/include-web.js"></script>
12+
<script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
13+
<style>
14+
.ol-popup {
15+
position: absolute;
16+
background-color: white;
17+
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
18+
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
19+
padding: 15px;
20+
border-radius: 10px;
21+
border: 1px solid #cccccc;
22+
bottom: 12px;
23+
left: -50px;
24+
min-width: 50px;
25+
}
26+
27+
.ol-popup:after, .ol-popup:before {
28+
top: 100%;
29+
border: solid transparent;
30+
content: " ";
31+
height: 0;
32+
width: 0;
33+
position: absolute;
34+
pointer-events: none;
35+
}
36+
37+
.ol-popup:after {
38+
border-top-color: white;
39+
border-width: 10px;
40+
left: 48px;
41+
margin-left: -10px;
42+
}
43+
44+
.ol-popup:before {
45+
border-top-color: #cccccc;
46+
border-width: 11px;
47+
left: 48px;
48+
margin-left: -11px;
49+
}
50+
</style>
51+
</head>
52+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
53+
<div id="map" style="width: 100%;height:100%"></div>
54+
<div id="popup" class="ol-popup">
55+
<div id="popup-content"></div>
56+
</div>
57+
<script type="text/javascript">
58+
var url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-china400/rest/maps/ChinaDark",
59+
container = document.getElementById('popup'),
60+
content = document.getElementById('popup-content'),
61+
overlay = new ol.Overlay(({
62+
element: container,
63+
autoPan: true,
64+
autoPanAnimation: {
65+
duration: 250
66+
}
67+
})),
68+
map = new ol.Map({
69+
target: 'map',
70+
controls: ol.control.defaults({attributionOptions: {collapsed: false}})
71+
.extend([new ol.supermap.control.Logo()]),
72+
view: new ol.View({
73+
center: ol.proj.transform([-73.9286, 40.75], 'EPSG:4326', 'EPSG:3857'),
74+
zoom: 12,
75+
projection: 'EPSG:3857',
76+
multiWorld: true
77+
}),
78+
overlays: [overlay]
79+
});
80+
81+
var colorCount = 10;
82+
var colors = getRandomColors(colorCount);
83+
loadData();
84+
85+
function loadData() {
86+
widgets.loader.showLoader();
87+
$.get('../data/nyc_taxi_18W.csv', function (nycData) {
88+
new ol.supermap.MapService(url).getMapInfo(function (serviceResult) {
89+
var mapJSONObj = serviceResult.result;
90+
var options = ol.source.TileSuperMapRest.optionsFromMapJSON(url, mapJSONObj);
91+
var layer = new ol.layer.Tile({
92+
source: new ol.source.TileSuperMapRest(options)
93+
});
94+
map.addLayer(layer);
95+
96+
var randomCircleStyles = [];
97+
for (var i = 0; i < colorCount; i++) {
98+
randomCircleStyles.push(new ol.style.Circle({
99+
radius: Math.floor(Math.random() * 3 + 1),
100+
fill: new ol.style.Fill({
101+
color: colors[i]
102+
}),
103+
stroke: new ol.style.Stroke({
104+
color: colors[i]
105+
}),
106+
}));
107+
}
108+
var features = Papa.parse(nycData, {skipEmptyLines: true, header: true}).data;
109+
var count = features.length; //矢量点的个数
110+
var graphics = new Array(count);
111+
for (var i = 0; i < count; ++i) {
112+
var coordinates = [Number(features[i].X), Number(features[i].Y)];
113+
if (coordinates[0] === coordinates[1]) {
114+
continue;
115+
}
116+
coordinates = ol.proj.transform(coordinates, 'EPSG:4326', 'EPSG:3857');
117+
graphics[i] = new ol.Graphic(new ol.geom.Point(coordinates));
118+
graphics[i].setStyle(randomCircleStyles[Math.floor(Math.random() * colorCount)]);
119+
}
120+
map.once('postrender', function () {
121+
var graphicLayer = new ol.layer.Image({
122+
source: new ol.source.Graphic({
123+
graphics: graphics,
124+
render: "canvas",
125+
map: map,
126+
onClick: function (graphic) {
127+
if (graphic) {
128+
var coords = graphic.getGeometry().getCoordinates();
129+
content.innerHTML = resources.text_coordinate + ":[" + coords[0] + "," + coords[1] + "]";
130+
overlay.setPosition(graphic.getGeometry().getCoordinates());
131+
return;
132+
}
133+
overlay.setPosition(undefined);
134+
}
135+
})
136+
});
137+
map.addLayer(graphicLayer);
138+
widgets.loader.removeLoader();
139+
})
140+
});
141+
});
142+
}
143+
144+
function getRandomColors(count) {
145+
return randomColor({
146+
luminosity: 'bright',
147+
hue: 'random',
148+
alpha: 0.5,
149+
format: 'rgba',
150+
count: count
151+
});
152+
}
153+
</script>
154+
</body>
155+
</html>

0 commit comments

Comments
 (0)