Skip to content

Commit a47b4ca

Browse files
songyumengsongyumeng
committed
增加三叶草例子
1 parent 8a287d2 commit a47b4ca

File tree

2 files changed

+169
-0
lines changed

2 files changed

+169
-0
lines changed

‎examples/openlayers/07_graphiclayer_clover.html‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
7+
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
8+
<title data-i18n="resources.title_graphicLayerClovers"></title>
9+
<script type="text/javascript" src="../js/include-web.js"></script>
10+
<script type="text/javascript" src="../../dist/include-openlayers.js"></script>
11+
<style>
12+
.ol-popup {
13+
position: absolute;
14+
background-color: white;
15+
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
16+
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
17+
padding: 15px;
18+
border-radius: 10px;
19+
border: 1px solid #cccccc;
20+
bottom: 12px;
21+
left: -50px;
22+
min-width: 50px;
23+
}
24+
25+
.ol-popup:after,
26+
.ol-popup:before {
27+
top: 100%;
28+
border: solid transparent;
29+
content: " ";
30+
height: 0;
31+
width: 0;
32+
position: absolute;
33+
pointer-events: none;
34+
}
35+
36+
.ol-popup:after {
37+
border-top-color: white;
38+
border-width: 10px;
39+
left: 48px;
40+
margin-left: -10px;
41+
}
42+
43+
.ol-popup:before {
44+
border-top-color: #cccccc;
45+
border-width: 11px;
46+
left: 48px;
47+
margin-left: -11px;
48+
}
49+
</style>
50+
</head>
51+
52+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%">
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 ? document.location.host : "http://support.supermap.com.cn:8090") +
59+
"/iserver/services/map-china400/rest/maps/China_4326";
60+
//初始化各种参数
61+
var count = 180000;
62+
var graphics = [];
63+
var e = 60;
64+
var clovers = [];
65+
var radius = [10, 14, 18];
66+
var styles = [{
67+
angle: 60,
68+
count: 3
69+
}, {
70+
angle: 45,
71+
count: 4
72+
}, {
73+
angle: 30,
74+
count: 6
75+
}];
76+
//三叶草样式的种类
77+
var randCount = 9;
78+
var symbolCount = radius.length * styles.length;
79+
80+
81+
new ol.supermap.MapService(url).getMapInfo(function (serviceResult) {
82+
var mapJSONObj = serviceResult.result;
83+
var container = document.getElementById('popup');
84+
var content = document.getElementById('popup-content');
85+
var overlay = new ol.Overlay(({
86+
element: container,
87+
autoPan: true,
88+
autoPanAnimation: {
89+
duration: 250
90+
}
91+
}));
92+
var map = new ol.Map({
93+
target: 'map',
94+
controls: ol.control.defaults({
95+
attributionOptions: {
96+
collapsed: false
97+
}
98+
})
99+
.extend([new ol.supermap.control.Logo()]),
100+
view: new ol.View({
101+
center: [0, 0],
102+
zoom: 3,
103+
projection: 'EPSG:4326'
104+
}),
105+
overlays: [overlay],
106+
renderer: ['canvas']
107+
});
108+
var options = ol.source.TileSuperMapRest.optionsFromMapJSON(url, mapJSONObj);
109+
var layer = new ol.layer.Tile({
110+
source: new ol.source.TileSuperMapRest(options)
111+
});
112+
map.addLayer(layer);
113+
114+
115+
//创建三叶草样式
116+
for (var i = 0; i < radius.length; i++) {
117+
for (var j = 0; j < styles.length; j++) {
118+
clovers.push(
119+
120+
new ol.style.CloverShape({
121+
radius: radius[i],
122+
angle: styles[j].angle,
123+
count: styles[j].count,
124+
stroke: new ol.style.Stroke({
125+
color: "rgba(0,166,0,1)",
126+
}),
127+
fill: new ol.style.Fill({
128+
color: "rgba(0,166,0,1)",
129+
}),
130+
})
131+
);
132+
}
133+
}
134+
135+
//设置每个点的经纬度和传入三叶草样式
136+
for (var i = 0; i < count; ++i) {
137+
var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
138+
graphics[i] = new ol.Graphic(new ol.geom.Point(coordinates));
139+
graphics[i].setStyle(clovers[Math.floor(Math.random() * randCount)]);
140+
var pointVector = graphics[i];
141+
pointVector.style = {
142+
image: clovers[i % symbolCount]
143+
};
144+
graphics.push(pointVector);
145+
}
146+
147+
map.once('postrender', function () {
148+
var graphicLayer = new ol.layer.Image({
149+
source: new ol.source.Graphic({
150+
graphics: graphics,
151+
map: map,
152+
onClick: function (graphic) {
153+
if (graphic) {
154+
var coords = graphic.getGeometry().getCoordinates();
155+
content.innerHTML = resources.text_coordinate + ":[" + coords[0] + "," + coords[1] + "]";
156+
overlay.setPosition(graphic.getGeometry().getCoordinates());
157+
return;
158+
}
159+
overlay.setPosition(undefined);
160+
}
161+
})
162+
});
163+
map.addLayer(graphicLayer);
164+
})
165+
});
166+
</script>
167+
</body>
168+
169+
</html>

‎examples/openlayers/img/graphiclayer_clover.png‎

211 KB
Loading

0 commit comments

Comments
 (0)