[fix]修复ICL1336 ICL1337,ol纽约18万放大canvas显示不全 review by songym

Author: YOUYOUNG

src/openlayers/overlay/graphic/CanvasRenderer.js

@@ -47,11 +47,10 @@ export class GraphicCanvasRenderer extends olObject {
         CommonUtil.extend(this, opt);
         this.highLightStyle = this.layer.highLightStyle;
 
-        this.mapWidth = this.size[0];
-        this.mapHeight = this.size[1];
+        this.mapWidth = this.size[0] / this.pixelRatio;
+        this.mapHeight = this.size[1] / this.pixelRatio;
         this.width = this.map.getSize()[0];
         this.height = this.map.getSize()[1];
-
         this.context = Util.createCanvasContext2D(this.mapWidth, this.mapHeight);
         this.context.scale(this.pixelRatio, this.pixelRatio);
         this.canvas = this.context.canvas;
@@ -79,7 +78,6 @@ export class GraphicCanvasRenderer extends olObject {
         this.height = height;
         this.mapWidth = this.mapWidth * xRatio;
         this.mapHeight = this.mapHeight * yRatio;
-
         this.canvas.width = this.mapWidth;
         this.canvas.height = this.mapHeight;
         this.canvas.style.width = this.width + 'px';
@@ -114,18 +112,18 @@ export class GraphicCanvasRenderer extends olObject {
      */
     drawGraphics(graphics) {
         this.graphics_ = graphics || [];
-        let mapWidth = this.mapWidth / this.pixelRatio;
-        let mapHeight = this.mapHeight / this.pixelRatio;
+        let mapWidth = this.mapWidth;
+        let mapHeight = this.mapHeight;
 
         let vectorContext = olRender.toContext(this.context, {
             size: [mapWidth, mapHeight],
             pixelRatio: this.pixelRatio
         });
-        var defaultStyle = this.layer._getDefaultStyle();
+        let defaultStyle = this.layer._getDefaultStyle();
         let me = this,
             layer = me.layer,
             map = layer.map;
-        graphics.map(function(graphic) {
+        graphics.map(function (graphic) {
             let style = graphic.getStyle() || defaultStyle;
             if (me.selected === graphic) {
                 let defaultHighLightStyle = style;

test/openlayers/overlay/graphic/CanvasRendererSpec.js

@@ -0,0 +1,31 @@
+import { GraphicCanvasRenderer } from '../../../../src/openlayers/overlay/graphic/CanvasRenderer';
+import Map from 'ol/Map';
+import View from 'ol/View';
+
+var map = new Map({
+    target: 'map',
+    view: new View({
+        center: [116.85, 39.79],
+        zoom: 0,
+        projection: 'EPSG:4326'
+    })
+});
+describe('openlayers_render', () => {
+    var render;
+    it('constructor', () => {
+        spyOn(map, 'getSize').and.callFake(() => {
+            return [0, 0];
+        });
+        const size = [1920, 1080];
+        let pixelRatio = 1;
+        render = new GraphicCanvasRenderer('layer', { size, pixelRatio, map });
+        expect(render).not.toBeNull();
+        expect(render.mapWidth).toBe(1920);
+        expect(render.mapHeight).toBe(1080);
+        pixelRatio = 1.5;
+        render = new GraphicCanvasRenderer('layer', { size, pixelRatio, map });
+        expect(render).not.toBeNull();
+        expect(render.mapWidth).toBe(1280);
+        expect(render.mapHeight).toBe(720);
+    });
+});

test/test-main-openlayers.js

@@ -15,6 +15,7 @@ import './openlayers/mapping/WebMapSpec.js';
 import './openlayers/overlay/DataFlowSpec.js';
 import './openlayers/overlay/graphic/GraphicSpec.js';
 import './openlayers/overlay/GraphicSpec.js';
+import './openlayers/overlay/graphic/CanvasRendererSpec';
 
 import './openlayers/overlay/GraphSpec.js';
 import './openlayers/overlay/HeatMapSpec.js';