Skip to content

Commit e8530b6

Browse files
author
caoxinke@supermap.com
committed
fix 高效率点图层webgl渲染的例子第一次加载点显示错位的问题。
1 parent 250aff1 commit e8530b6

File tree

6 files changed

+43
-39
lines changed

6 files changed

+43
-39
lines changed

dist/iclient9-openlayers.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15619,14 +15619,15 @@ var Graphic = function (_ol$source$ImageCanva) {
1561915619
var height = this.map.getSize()[1] * pixelRatio;
1562015620
var context = _Util2.default.createCanvasContext2D(mapWidth, mapHeight);
1562115621
var offset = [(mapWidth - width) / 2 / pixelRatio, (mapHeight - height) / 2 / pixelRatio];
15622-
var vectorContext = _olDebug2.default.render.toContext(context, { size: size, pixelRatio: pixelRatio });
15622+
var vectorContext = _olDebug2.default.render.toContext(context, { size: [mapWidth, mapHeight], pixelRatio: pixelRatio });
1562315623
var graphics = this.getGraphicsInExtent(extent);
1562415624
var me = this;
1562515625
graphics.map(function (graphic) {
1562615626
var style = graphic.getStyle();
1562715627
if (me.selected === graphic) {
15628+
var defaultHighLightStyle = style;
1562815629
if (style instanceof _olDebug2.default.style.Circle) {
15629-
var defaultHighLightStyle = new _olDebug2.default.style.Circle({
15630+
defaultHighLightStyle = new _olDebug2.default.style.Circle({
1563015631
radius: style.getRadius(),
1563115632
fill: new _olDebug2.default.style.Fill({
1563215633
color: 'rgba(0, 153, 255, 1)'
@@ -15635,7 +15636,7 @@ var Graphic = function (_ol$source$ImageCanva) {
1563515636
snapToPixel: style.getSnapToPixel()
1563615637
});
1563715638
} else if (style instanceof _olDebug2.default.style.RegularShape) {
15638-
var defaultHighLightStyle = new _olDebug2.default.style.RegularShape({
15639+
defaultHighLightStyle = new _olDebug2.default.style.RegularShape({
1563915640
radius: style.getRadius(),
1564015641
radius2: style.getRadius2(),
1564115642
points: style.getPoints(),
@@ -52534,7 +52535,6 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
5253452535
/**
5253552536
* @class ol.Graphic
5253652537
* @classdesc 地理几何对象类
52537-
* @private
5253852538
* @param geometry - {Object} 几何对象
5253952539
* @extends ol.Object{@linkdoc-openlayers/ol.Object}
5254052540
*/

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.

examples/openlayers/07_graphiclayer_canvas.html

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -106,22 +106,24 @@
106106
graphics[i] = new ol.Graphic(new ol.geom.Point(coordinates));
107107
graphics[i].setStyle(randomCircleStyles[Math.floor(Math.random() * colorCount)]);
108108
}
109-
var graphicLayer = new ol.layer.Image({
110-
source: new ol.source.Graphic({
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;
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 = "坐标为:[" + coords[0] + "," + coords[1] + "]";
118+
overlay.setPosition(graphic.getGeometry().getCoordinates());
119+
return;
120+
}
121+
overlay.setPosition(undefined);
119122
}
120-
overlay.setPosition(undefined);
121-
}
122-
})
123-
});
124-
map.addLayer(graphicLayer);
123+
})
124+
});
125+
map.addLayer(graphicLayer);
126+
})
125127
});
126128

127129
function getRandomColors(count) {

examples/openlayers/07_graphiclayer_webgl.html

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -105,22 +105,24 @@
105105
graphics[i] = new ol.Graphic(new ol.geom.Point(coordinates));
106106
graphics[i].setStyle(randomCircleStyles[Math.floor(Math.random() * colorCount)]);
107107
}
108-
var graphicLayer = new ol.layer.Image({
109-
source: new ol.source.Graphic({
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;
108+
map.once('postrender', function () {
109+
var graphicLayer = new ol.layer.Image({
110+
source: new ol.source.Graphic({
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);
118121
}
119-
overlay.setPosition(undefined);
120-
}
121-
})
122-
});
123-
map.addLayer(graphicLayer);
122+
})
123+
});
124+
map.addLayer(graphicLayer);
125+
})
124126
});
125127

126128
function getRandomColors(count) {

src/openlayers/overlay/Graphic.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,14 +40,15 @@ export default class Graphic extends ol.source.ImageCanvas {
4040
var height = this.map.getSize()[1] * pixelRatio;
4141
var context = Util.createCanvasContext2D(mapWidth, mapHeight);
4242
var offset = [(mapWidth - width) / 2 / pixelRatio, (mapHeight - height) / 2 / pixelRatio];
43-
var vectorContext = ol.render.toContext(context, {size: size, pixelRatio: pixelRatio});
43+
var vectorContext = ol.render.toContext(context, {size: [mapWidth, mapHeight], pixelRatio: pixelRatio});
4444
var graphics = this.getGraphicsInExtent(extent);
4545
var me = this;
4646
graphics.map(function (graphic) {
4747
var style = graphic.getStyle();
4848
if (me.selected === graphic) {
49+
var defaultHighLightStyle = style;
4950
if (style instanceof ol.style.Circle) {
50-
var defaultHighLightStyle = new ol.style.Circle({
51+
defaultHighLightStyle = new ol.style.Circle({
5152
radius: style.getRadius(),
5253
fill: new ol.style.Fill({
5354
color: 'rgba(0, 153, 255, 1)'
@@ -56,7 +57,7 @@ export default class Graphic extends ol.source.ImageCanvas {
5657
snapToPixel: style.getSnapToPixel()
5758
});
5859
} else if (style instanceof ol.style.RegularShape) {
59-
var defaultHighLightStyle = new ol.style.RegularShape({
60+
defaultHighLightStyle = new ol.style.RegularShape({
6061
radius: style.getRadius(),
6162
radius2: style.getRadius2(),
6263
points: style.getPoints(),

src/openlayers/overlay/graphic/Graphic.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import ol from 'openlayers/dist/ol-debug';
33
/**
44
* @class ol.Graphic
55
* @classdesc 地理几何对象类
6-
* @private
76
* @param geometry - {Object} 几何对象
87
* @extends ol.Object{@linkdoc-openlayers/ol.Object}
98
*/

0 commit comments

Comments
 (0)