Skip to content

Commit 7212ce6

Browse files
author
caoxinke
committed
fix高分辨率下OpenLayer对接的可视化效果错位的问题。
1 parent d8e4973 commit 7212ce6

File tree

5 files changed

+124
-66
lines changed

5 files changed

+124
-66
lines changed

‎dist/iclient9-openlayers.js‎

Lines changed: 64 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -11391,34 +11391,32 @@ var Theme = function (_ol$source$ImageCanva) {
1139111391
var options = opt_options ? opt_options : {};
1139211392

1139311393
function canvasFunctionInternal_(extent, resolution, pixelRatio, size, projection) {
11394-
if (!this.notFirst) {
11395-
this.redrawThematicFeatures(extent);
11396-
this.notFirst = true;
11397-
}
11394+
this.pixelRatio = pixelRatio;
1139811395
var mapWidth = size[0] * pixelRatio;
1139911396
var mapHeight = size[1] * pixelRatio;
1140011397
var width = this.map.getSize()[0] * pixelRatio;
1140111398
var height = this.map.getSize()[1] * pixelRatio;
11402-
if (!this.themeCanvas) {
11403-
this.div.style.width = mapWidth + "px";
11404-
this.div.style.height = mapHeight + "px";
11405-
this.map.getViewport().appendChild(this.div);
11406-
this.renderer.resize();
11407-
this.map.getViewport().removeChild(this.div);
11408-
this.themeCanvas = this.renderer.painter.root.getElementsByTagName('canvas')[0];
11399+
this.offset = [(mapWidth - width) / 2 / pixelRatio, (mapHeight - height) / 2 / pixelRatio];
11400+
if (!this.notFirst) {
11401+
this.redrawThematicFeatures(extent);
11402+
this.notFirst = true;
1140911403
}
11404+
this.div.style.width = mapWidth + "px";
11405+
this.div.style.height = mapHeight + "px";
11406+
this.map.getViewport().appendChild(this.div);
11407+
this.renderer.resize();
11408+
this.map.getViewport().removeChild(this.div);
11409+
this.themeCanvas = this.renderer.painter.root.getElementsByTagName('canvas')[0];
1141011410
this.themeCanvas.width = mapWidth;
1141111411
this.themeCanvas.height = mapHeight;
1141211412
this.themeCanvas.style.width = mapWidth + "px";
1141311413
this.themeCanvas.style.height = mapHeight + "px";
1141411414
this.themeCanvas.getContext('2d').clearRect(0, 0, mapWidth, mapHeight);
11415-
this.offset = [(mapWidth - width) / 2, (mapHeight - height) / 2];
1141611415

1141711416
var highLightContext = this.renderer.painter._layers.hover.ctx;
11417+
var highlightCanvas = highLightContext.canvas;
1141811418
var copyHighLightContext = _Util2.default.createCanvasContext2D(mapWidth, mapHeight);
11419-
// copyHighLightContext.translate((mapWidth - width) / 2, (mapHeight - height) / 2);
11420-
copyHighLightContext.drawImage(highLightContext.canvas, 0, 0, mapWidth, mapHeight, 0, 0, mapWidth, mapHeight);
11421-
this.highLightCanvas = copyHighLightContext.canvas;
11419+
copyHighLightContext.drawImage(highlightCanvas, 0, 0, highlightCanvas.width, highlightCanvas.height, 0, 0, mapWidth, mapHeight);
1142211420

1142311421
this.redrawThematicFeatures(extent);
1142411422
if (!this.context) {
@@ -11431,14 +11429,7 @@ var Theme = function (_ol$source$ImageCanva) {
1143111429
canvas.style.width = mapWidth + "px";
1143211430
canvas.style.height = mapHeight + "px";
1143311431
this.context.drawImage(this.themeCanvas, 0, 0, mapWidth, mapHeight, 0, 0, mapWidth, mapHeight);
11434-
if (this.resolution !== resolution || JSON.stringify(this.extent) !== JSON.stringify(extent)) {
11435-
this.highLightCanvas = null;
11436-
this.resolution = resolution;
11437-
this.extent = extent;
11438-
}
11439-
if (this.highLightCanvas) {
11440-
this.context.drawImage(this.highLightCanvas, 0, 0, mapWidth, mapHeight, 0, 0, mapWidth, mapHeight);
11441-
}
11432+
this.context.drawImage(copyHighLightContext.canvas, 0, 0, mapWidth, mapHeight, 0, 0, mapWidth, mapHeight);
1144211433
return this.context.canvas;
1144311434
}
1144411435

@@ -11476,6 +11467,7 @@ var Theme = function (_ol$source$ImageCanva) {
1147611467
_this.addTFEvents();
1147711468
return _this;
1147811469
}
11470+
1147911471
/**
1148011472
* @function ol.source.Theme.prototype.destroy
1148111473
* @description 释放资源，将引用资源的属性置空。
@@ -11498,6 +11490,7 @@ var Theme = function (_ol$source$ImageCanva) {
1149811490
this.movingOffset = null;
1149911491
this.currentMousePosition = null;
1150011492
}
11493+
1150111494
/**
1150211495
* @function ol.source.Theme.prototype.destroyFeatures
1150311496
* @param features -{Object} 将被销毁的要素
@@ -11518,6 +11511,7 @@ var Theme = function (_ol$source$ImageCanva) {
1151811511
}
1151911512
}
1152011513
}
11514+
1152111515
/**
1152211516
* @function ol.source.Theme.prototype.setOpacity
1152311517
* @description 设置图层的不透明度,取值[0-1]之间。
@@ -11598,6 +11592,7 @@ var Theme = function (_ol$source$ImageCanva) {
1159811592
var succeed = featuresFailRemoved.length == 0 ? true : false;
1159911593
this.dispatchEvent({ type: "featuresremoved", value: { features: featuresFailRemoved, succeed: succeed } });
1160011594
}
11595+
1160111596
/**
1160211597
* @function ol.source.Theme.prototype.removeAllFeatures
1160311598
* @description 清除当前图层所有的矢量要素。
@@ -11738,7 +11733,8 @@ var Theme = function (_ol$source$ImageCanva) {
1173811733
var y = this.getY(event);
1173911734
var rotation = -this.map.getView().getRotation();
1174011735
var center = this.map.getPixelFromCoordinate(this.map.getView().getCenter());
11741-
var rotatedP = this.rotate([x, y], rotation, center);
11736+
var scaledP = this.scale([x, y], center, this.pixelRatio);
11737+
var rotatedP = this.rotate(scaledP, rotation, center);
1174211738
var resultP = [rotatedP[0] + this.offset[0], rotatedP[1] + this.offset[1]];
1174311739
var offsetEvent = document.createEvent('Event');
1174411740
offsetEvent.initEvent('pointermove', true, true);
@@ -11783,6 +11779,7 @@ var Theme = function (_ol$source$ImageCanva) {
1178311779
value: function getY(e) {
1178411780
return typeof e.zrenderY != 'undefined' && e.zrenderY || typeof e.offsetY != 'undefined' && e.offsetY || typeof e.layerY != 'undefined' && e.layerY || typeof e.clientY != 'undefined' && e.clientY;
1178511781
}
11782+
1178611783
/**
1178711784
* @function ol.source.Theme.prototype.un
1178811785
* @param event - {string} 事件名称。
@@ -11825,6 +11822,7 @@ var Theme = function (_ol$source$ImageCanva) {
1182511822
this.renderer.on(tfEs[i][0], tfEs[i][1]);
1182611823
}
1182711824
}
11825+
1182811826
/**
1182911827
* @function ol.source.Theme.prototype.getLocalXY
1183011828
* @param coordinate - {Object} 坐标位置。
@@ -11844,14 +11842,18 @@ var Theme = function (_ol$source$ImageCanva) {
1184411842
var rotation = -map.getView().getRotation();
1184511843
var center = map.getPixelFromCoordinate(map.getView().getCenter());
1184611844
var rotatedP = pixelP;
11845+
if (this.pixelRatio) {
11846+
rotatedP = this.scale(pixelP, center, this.pixelRatio);
11847+
}
1184711848
if (pixelP && center) {
11848-
rotatedP = this.rotate(pixelP, rotation, center);
11849+
rotatedP = this.rotate(rotatedP, rotation, center);
1184911850
}
1185011851
if (this.offset && rotatedP) {
1185111852
return [rotatedP[0] + this.offset[0], rotatedP[1] + this.offset[1]];
1185211853
}
1185311854
return rotatedP;
1185411855
}
11856+
1185511857
/**
1185611858
* @function ol.source.Theme.prototype.rotate
1185711859
* @param pixelP - {number} 像素坐标点位置。
@@ -11867,6 +11869,16 @@ var Theme = function (_ol$source$ImageCanva) {
1186711869
var y = Math.sin(rotation) * (pixelP[0] - center[0]) + Math.cos(rotation) * (pixelP[1] - center[1]) + center[1];
1186811870
return [x, y];
1186911871
}
11872+
11873+
//获取某像素坐标点pixelP相对于中心center进行缩放scaleRatio倍后的像素点坐标。
11874+
11875+
}, {
11876+
key: 'scale',
11877+
value: function scale(pixelP, center, scaleRatio) {
11878+
var x = (pixelP[0] - center[0]) * scaleRatio + center[0];
11879+
var y = (pixelP[1] - center[1]) * scaleRatio + center[1];
11880+
return [x, y];
11881+
}
1187011882
}, {
1187111883
key: 'toiClientFeature',
1187211884
value: function toiClientFeature(feature) {
@@ -14821,7 +14833,8 @@ var Mapv = function (_ol$source$ImageCanva) {
1482114833
if (!this.layer) {
1482214834
this.layer = new _MapvLayer2.default(this.map, this.dataSet, this.mapvOptions, mapWidth, mapHeight, this);
1482314835
}
14824-
this.layer.offset = [(mapWidth - width) / 2, (mapHeight - height) / 2];
14836+
this.layer.pixelRatio = pixelRatio;
14837+
this.layer.offset = [(mapWidth - width) / 2 / pixelRatio, (mapHeight - height) / 2 / pixelRatio];
1482514838
if (!this.rotate) {
1482614839
this.rotate = this.map.getView().getRotation();
1482714840
} else {
@@ -14853,6 +14866,7 @@ var Mapv = function (_ol$source$ImageCanva) {
1485314866
}
1485414867
return _this;
1485514868
}
14869+
1485614870
/**
1485714871
* @function ol.source.Mapv.prototype.update
1485814872
* @description 更新数据
@@ -51299,7 +51313,7 @@ var MapvCanvasLayer = function () {
5129951313

5130051314
/*
5130151315
* @function ol.supermap.MapvCanvasLayer.prototype.resize
51302-
* @param mapWidth - {number} ��ͼ����
51316+
* @param mapWidth - {number} ��ͼ���
5130351317
* @param mapHeight - {number} ��ͼ�߶�
5130451318
* @description ������ͼ��С
5130551319
*/
@@ -51327,7 +51341,7 @@ var MapvCanvasLayer = function () {
5132751341
/*
5132851342
* @function ol.supermap.MapvCanvasLayer.prototype.setZIndex
5132951343
* @param zIndex - {number} �㼶����
51330-
* @description ����ͼ���㼶
51344+
* @description ����ͼ��㼶
5133151345
*/
5133251346

5133351347
}, {
@@ -51337,7 +51351,7 @@ var MapvCanvasLayer = function () {
5133751351
}
5133851352
/*
5133951353
* @function ol.supermap.MapvCanvasLayer.prototype.getZIndex
51340-
* @description ��ȡͼ���㼶
51354+
* @description ��ȡͼ��㼶
5134151355
*/
5134251356

5134351357
}, {
@@ -51408,6 +51422,8 @@ var MapvLayer = function (_BaiduMapLayer) {
5140851422
var _this = _possibleConstructorReturn(this, (MapvLayer.__proto__ || Object.getPrototypeOf(MapvLayer)).call(this, map, dataSet, options));
5140951423

5141051424
_this.dataSet = dataSet;
51425+
_this.mapWidth = mapWidth;
51426+
_this.mapHeight = mapHeight;
5141151427
var self = _this;
5141251428
options = options || {};
5141351429
_this.source = source;
@@ -51433,6 +51449,7 @@ var MapvLayer = function (_BaiduMapLayer) {
5143351449
_this.bindEvent();
5143451450
return _this;
5143551451
}
51452+
5143651453
/**
5143751454
* @function ol.supermap.MapvLayer.prototype.init
5143851455
* @param options - {Object} 参数
@@ -51452,6 +51469,7 @@ var MapvLayer = function (_BaiduMapLayer) {
5145251469
}
5145351470
this.initAnimator();
5145451471
}
51472+
5145551473
/**
5145651474
* @function ol.supermap.MapvLayer.prototype.clickEvent
5145751475
* @param e - {Object} 事件参数
@@ -51464,6 +51482,7 @@ var MapvLayer = function (_BaiduMapLayer) {
5146451482
var pixel = e.pixel;
5146551483
_get(MapvLayer.prototype.__proto__ || Object.getPrototypeOf(MapvLayer.prototype), 'clickEvent', this).call(this, { x: pixel[0], y: pixel[1] }, e);
5146651484
}
51485+
5146751486
/**
5146851487
* @function ol.supermap.MapvLayer.prototype.mousemoveEvent
5146951488
* @param e - {Object} 事件参数
@@ -51476,6 +51495,7 @@ var MapvLayer = function (_BaiduMapLayer) {
5147651495
var pixel = e.pixel;
5147751496
_get(MapvLayer.prototype.__proto__ || Object.getPrototypeOf(MapvLayer.prototype), 'mousemoveEvent', this).call(this, { x: pixel[0], y: pixel[1] }, e);
5147851497
}
51498+
5147951499
/**
5148051500
* @function ol.supermap.MapvLayer.prototype.bindEvent
5148151501
* @description 绑定事件
@@ -51499,6 +51519,7 @@ var MapvLayer = function (_BaiduMapLayer) {
5149951519
}
5150051520
}
5150151521
}
51522+
5150251523
/**
5150351524
* @function ol.supermap.MapvLayer.prototype.unbindEvent
5150451525
* @description 解除绑定事件
@@ -51554,7 +51575,8 @@ var MapvLayer = function (_BaiduMapLayer) {
5155451575
var pixelP = map.getPixelFromCoordinate(coordinate);
5155551576
var rotation = -map.getView().getRotation();
5155651577
var center = map.getPixelFromCoordinate(map.getView().getCenter());
51557-
var rotatedP = rotate(pixelP, rotation, center);
51578+
var scaledP = scale(pixelP, center, self.pixelRatio);
51579+
var rotatedP = rotate(scaledP, rotation, center);
5155851580
var result = [rotatedP[0] + self.offset[0], rotatedP[1] + self.offset[1]];
5155951581
return result;
5156051582
}
@@ -51567,6 +51589,13 @@ var MapvLayer = function (_BaiduMapLayer) {
5156751589
return [x, y];
5156851590
}
5156951591

51592+
//获取某像素坐标点pixelP相对于中心center进行缩放scaleRatio倍后的像素点坐标。
51593+
function scale(pixelP, center, scaleRatio) {
51594+
var x = (pixelP[0] - center[0]) * scaleRatio + center[0];
51595+
var y = (pixelP[1] - center[1]) * scaleRatio + center[1];
51596+
return [x, y];
51597+
}
51598+
5157051599
if (time !== undefined) {
5157151600
dataGetOptions.filter = function (item) {
5157251601
var trails = animationOptions.trails || 10;
@@ -51577,12 +51606,13 @@ var MapvLayer = function (_BaiduMapLayer) {
5157751606
}
5157851607
};
5157951608
}
51609+
if (self.isEnabledTime() && !self.notFirst) {
51610+
self.canvasLayer.resize(self.mapWidth, self.mapHeight);
51611+
self.notFirst = true;
51612+
}
5158051613
var data = self.dataSet.get(dataGetOptions);
51581-
51582-
this.processData(data);
51583-
51614+
self.processData(data);
5158451615
self.options._size = self.options.size;
51585-
5158651616
var pixel = map.getPixelFromCoordinate([0, 0]);
5158751617
this.drawContext(context, new mapv.DataSet(data), self.options, { x: pixel[0], y: pixel[1] });
5158851618
if (self.isEnabledTime()) {

‎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.

‎src/openlayers/overlay/mapv.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@ export default class Mapv extends ol.source.ImageCanvas {
3434
if (!this.layer) {
3535
this.layer = new MapvLayer(this.map, this.dataSet, this.mapvOptions, mapWidth, mapHeight, this);
3636
}
37-
this.layer.offset = [(mapWidth - width) / 2, (mapHeight - height) / 2];
37+
this.layer.pixelRatio = pixelRatio;
38+
this.layer.offset = [(mapWidth - width) / 2 / pixelRatio, (mapHeight - height) / 2 / pixelRatio];
3839
if (!this.rotate) {
3940
this.rotate = this.map.getView().getRotation();
4041
} else {
@@ -65,6 +66,7 @@ export default class Mapv extends ol.source.ImageCanvas {
6566
return this.context.canvas;
6667
}
6768
}
69+
6870
/**
6971
* @function ol.source.Mapv.prototype.update
7072
* @description 更新数据

0 commit comments

Comments
 (0)