Skip to content

Commit ff34544

Browse files
author
caoxinke@supermap.com
committed
openlayers高效率点图层例子更换ol-debug问ol的引用;fix 失败的测试案例。
1 parent 07225f9 commit ff34544

File tree

11 files changed

+5463
-5331
lines changed

11 files changed

+5463
-5331
lines changed

‎dist/iclient9-openlayers.js‎

Lines changed: 5274 additions & 5215 deletions
Large diffs are not rendered by default.

‎dist/iclient9-openlayers.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/include-openlayers.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,8 @@
4848
inputScript("http://cdn.bootcss.com/echarts/3.6.2/echarts.min.js");
4949
}
5050
if(inArray(includes,'osmbuildings')){
51-
inputScript("http://iclient.supermapol.com/libs/osmbuildings/OSMBuildings-OL3.js");
51+
// inputScript("http://iclient.supermapol.com/libs/osmbuildings/OSMBuildings-OL3.js");
52+
inputScript("../../examples/openlayers/OSMBuildings-OL3.debug.js");
5253
}
5354
if(inArray(includes,'animatedclusterlayer')){
5455
inputScript("http://viglino.github.io/OL3-AnimatedCluster/layer/animatedclusterlayer.js");

‎examples/openlayers/07_graphiclayer_canvas.html‎

Lines changed: 18 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,7 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
66
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
77
<script type="text/javascript" include="randomcolor" src="../js/include-web.js"></script>
8-
<link href="http://cdn.bootcss.com/openlayers/4.2.0/ol.css" rel="stylesheet">
9-
<script src="http://cdn.bootcss.com/openlayers/4.2.0/ol-debug.js"></script>
10-
<script type="text/javascript" exclude="ol" src="../../dist/include-openlayers.js"></script>
8+
<script type="text/javascript" src="../../dist/include-openlayers.js"></script>
119
<title>canvas渲染</title>
1210
<style>
1311
.ol-popup {
@@ -54,7 +52,7 @@
5452
<div id="popup-content"></div>
5553
</div>
5654
<script type="text/javascript">
57-
var url = (window.isLocal ? document.location.protocol + "//" + 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/China_4326";
5856
var colorCount = 10;
5957
var colors = getRandomColors(colorCount);
6058
new ol.supermap.MapService(url).getMapInfo(function (serviceResult) {
@@ -71,7 +69,7 @@
7169
var map = new ol.Map({
7270
target: 'map',
7371
controls: ol.control.defaults({attributionOptions: {collapsed: false}})
74-
.extend([new ol.supermap.control.Logo()]),
72+
.extend([new ol.supermap.control.Logo()]),
7573
view: new ol.View({
7674
center: [0, 0],
7775
zoom: 2,
@@ -88,14 +86,15 @@
8886

8987
var randomCircleStyles = [];
9088
for (var i = 0; i < colorCount; i++) {
91-
randomCircleStyles.push(new ol.style.Circle({
89+
randomCircleStyles.push(new ol.style.RegularShape({
9290
radius: Math.floor(Math.random() * 15 + 1),
9391
fill: new ol.style.Fill({
9492
color: colors[i]
9593
}),
9694
stroke: new ol.style.Stroke({
9795
color: colors[i]
98-
})
96+
}),
97+
points: 3,
9998
}));
10099
}
101100

@@ -105,26 +104,23 @@
105104
for (var i = 0; i < count; ++i) {
106105
var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
107106
graphics[i] = new ol.Graphic(new ol.geom.Point(coordinates));
108-
graphics[i].setStyle(new ol.style.Style({
109-
image: randomCircleStyles[Math.floor(Math.random() * colorCount)]
110-
}));
107+
graphics[i].setStyle(randomCircleStyles[Math.floor(Math.random() * colorCount)]);
111108
}
112109
var graphicLayer = new ol.layer.Image({
113110
source: new ol.source.Graphic({
114-
graphics: graphics
111+
graphics: graphics,
112+
map: map,
113+
onClick: function (graphic) {
114+
if (graphic) {
115+
var coords = graphic.getGeometry().getCoordinates();
116+
content.innerHTML = "坐标为:[" + coords[0] + "," + coords[1] + "]";
117+
overlay.setPosition(graphic.getGeometry().getCoordinates());
118+
return;
119+
}
120+
overlay.setPosition(undefined);
121+
}
115122
})
116123
});
117-
var select = new ol.interaction.Select();
118-
map.addInteraction(select);
119-
//开启事件
120-
select.on('select', function (e) {
121-
if (e.selected.length > 0) {
122-
content.innerHTML = "id:" + e.selected[0].ol_uid;
123-
overlay.setPosition(e.selected[0].getGeometry().flatCoordinates);
124-
} else if (overlay) {
125-
overlay.setPosition(undefined);
126-
}
127-
});
128124
map.addLayer(graphicLayer);
129125
});
130126

‎examples/openlayers/07_graphiclayer_webgl.html‎

Lines changed: 19 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,7 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
66
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
77
<script type="text/javascript" include="randomcolor" src="../js/include-web.js"></script>
8-
<link href="http://cdn.bootcss.com/openlayers/4.2.0/ol.css" rel="stylesheet">
9-
<script src="http://cdn.bootcss.com/openlayers/4.2.0/ol-debug.js"></script>
10-
<script type="text/javascript" exclude="ol" src="../../dist/include-openlayers.js"></script>
8+
<script type="text/javascript" src="../../dist/include-openlayers.js"></script>
119
<title>webgl渲染</title>
1210
<style>
1311
.ol-popup {
@@ -46,16 +44,15 @@
4644
left: 48px;
4745
margin-left: -11px;
4846
}
49-
5047
</style>
5148
</head>
52-
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
53-
<div id="map" style="margin:0 auto;width: 100%;height: 100%;border: 1px solid #dddddd"></div>
49+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%">
50+
<div id="map" style="width: 100%;height:100%"></div>
5451
<div id="popup" class="ol-popup">
5552
<div id="popup-content"></div>
5653
</div>
5754
<script type="text/javascript">
58-
var url = (window.isLocal ? document.location.protocol + "//" + 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/China_4326";
5956
var colorCount = 10;
6057
var colors = getRandomColors(colorCount);
6158
new ol.supermap.MapService(url).getMapInfo(function (serviceResult) {
@@ -72,7 +69,7 @@
7269
var map = new ol.Map({
7370
target: 'map',
7471
controls: ol.control.defaults({attributionOptions: {collapsed: false}})
75-
.extend([new ol.supermap.control.Logo()]),
72+
.extend([new ol.supermap.control.Logo()]),
7673
view: new ol.View({
7774
center: [0, 0],
7875
zoom: 2,
@@ -96,36 +93,33 @@
9693
}),
9794
stroke: new ol.style.Stroke({
9895
color: colors[i]
99-
})
96+
}),
10097
}));
10198
}
10299

103-
var count = 100000; //矢量点的个数
100+
var count = 100000; //矢量点的个数
104101
var graphics = new Array(count);
105102
var e = 45;
106103
for (var i = 0; i < count; ++i) {
107104
var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
108105
graphics[i] = new ol.Graphic(new ol.geom.Point(coordinates));
109-
graphics[i].setStyle(new ol.style.Style({
110-
image: randomCircleStyles[Math.floor(Math.random() * colorCount)]
111-
}));
106+
graphics[i].setStyle(randomCircleStyles[Math.floor(Math.random() * colorCount)]);
112107
}
113108
var graphicLayer = new ol.layer.Image({
114109
source: new ol.source.Graphic({
115-
graphics: graphics
110+
graphics: graphics,
111+
map: map,
112+
onClick: function (graphic) {
113+
if (graphic) {
114+
var coords = graphic.getGeometry().getCoordinates();
115+
content.innerHTML = "坐标为:[" + coords[0] + "," + coords[1] + "]";
116+
overlay.setPosition(graphic.getGeometry().getCoordinates());
117+
return;
118+
}
119+
overlay.setPosition(undefined);
120+
}
116121
})
117122
});
118-
//开启事件
119-
var select = new ol.interaction.Select();
120-
map.addInteraction(select);
121-
select.on('select', function (e) {
122-
if (e.selected.length > 0) {
123-
content.innerHTML = "id:" + e.selected[0].ol_uid;
124-
overlay.setPosition(e.selected[0].getGeometry().flatCoordinates);
125-
} else if (overlay) {
126-
overlay.setPosition(undefined);
127-
}
128-
});
129123
map.addLayer(graphicLayer);
130124
});
131125

‎examples/openlayers/img/graphiclayer_canvas.png‎

3.51 KB
Loading

‎examples/openlayers/img/graphiclayer_webgl.png‎

1.69 KB
Loading

‎examples/openlayers/rangeThemeLayer.html‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -101,8 +101,8 @@
101101
</div>
102102
<script type="text/javascript">
103103
var map, themeSource
104-
baseUrl = (window.isLocal ? document.location.protocol + "//" + document.location.host : "http://support.supermap.com.cn:8090")+"/iserver/services/map-jingjin/rest/maps/京津地区地图",
105-
url2 = (window.isLocal ? document.location.protocol + "//" + document.location.host : "http://support.supermap.com.cn:8090")+"/iserver/services/data-jingjin/rest/data",
104+
baseUrl = (window.isLocal ? document.location.protocol + "//" + document.location.host : "http://support.supermap.com.cn:8090") + "/iserver/services/map-jingjin/rest/maps/京津地区地图",
105+
url2 = (window.isLocal ? document.location.protocol + "//" + document.location.host : "http://support.supermap.com.cn:8090") + "/iserver/services/data-jingjin/rest/data",
106106
extent = [104.07, 30.54, 119.51, 42.31];
107107
new ol.supermap.MapService(baseUrl).getMapInfo(function (serviceResult) {
108108
var mapJSONObj = serviceResult.result;
@@ -143,18 +143,17 @@
143143
function processCompleted(getFeaturesEventArgs) {
144144
var result = getFeaturesEventArgs.result;
145145
if (result && result.features) {
146-
map.once('postrender', function () {
147-
addThemeLayer(result.features);
148-
});
146+
addThemeLayer(result.features);
147+
//显示图例
148+
document.getElementById("mapLegend").style.display = "block";
149149
}
150-
//显示图例
151-
document.getElementById("mapLegend").style.display = "block";
152150
}
153151

154152
function addThemeLayer(features) {
155153
themeSource = new ol.source.Range("ThemeLayer",
156154
{
157155
map: map,
156+
attributions: " ",
158157
features: features,
159158
style: {
160159
shadowBlur: 16,

0 commit comments

Comments
 (0)