绘制A4叠加图

Question

我想要显示A5，A4，A3，A2，A1或A0尺寸的叠加层，但我不知道它是怎么做的。例如，我想在地图上显示A4尺寸的叠加层，但我不知道我做错了什么。

我希望覆盖保持坐标，当我进行放大或缩小比例叠加时。

即。如果变焦较小，则叠加应该较小，当变焦较高时，叠加应该更大，但保持A4的尺寸。

这是我的代码。

drawPaper = () => {
    this.removePaper();

    var center = this.map.getView().getCenter();
    var resolution = 300;

    var dims = {
        a0: [1189, 841],
        a1: [841, 594],
        a2: [594, 420],
        a3: [420, 297],
        a4: [297, 210],
        a5: [210, 148]
    };

    // Get selected paper
    var dim = dims[this.state.pos];
    // Get width and height
    var width;
    var height;
    if (this.orientation.localeCompare('Portrait') === 0) {
        width = Math.round(dim[1] * resolution / 25.4);
        height = Math.round(dim[0] * resolution / 25.4);
    } else {           
        width = Math.round(dim[0] * resolution / 25.4);
        height = Math.round(dim[1] * resolution / 25.4);
    }

    // 1 - Get center pixel
    var pixelCenter = this.map.getPixelFromCoordinate(center);

    // 2 - Get new coordinates
    // 2.1 - Get point up-right
    var pixelCenterXur = pixelCenter[0] + width/2;
    var pixelCenterYur = pixelCenter[1] + height/2;
    var upRight = this.map.getCoordinateFromPixel([pixelCenterXur, pixelCenterYur]);
    // 2.2 - Get point up-left
    var pixelCenterXul = pixelCenter[0] - width/2;
    var pixelCenterYul = pixelCenter[1] + height/2;
    var upLeft = this.map.getCoordinateFromPixel([pixelCenterXul, pixelCenterYul]);
    // 2.3 - Get point lower-right
    var pixelCenterXdr = pixelCenter[0] + width/2;
    var pixelCenterYdr = pixelCenter[1] - height/2;
    var downRight = this.map.getCoordinateFromPixel([pixelCenterXdr, pixelCenterYdr]);
    // 2.4 - Get point lower-left
    var pixelCenterXdl = pixelCenter[0] - width/2;
    var pixelCenterYdl = pixelCenter[1] - height/2;
    var downLeft = this.map.getCoordinateFromPixel([pixelCenterXdl, pixelCenterYdl]);

    var points = [
        upLeft, // sup-izq
        upRight, // sup-der
        downRight, // inf-der
        downLeft  // inf-izq
    ];

    var feature = new Feature({
        geometry: new Polygon([points])
    });

    this.translate = new Translate({
        features: new Collection([feature])
    });

    this.translate.on('translateend', evt => {
        evt.features.forEach(feat => {
          // process every feature
          this.setState({ extent: feat.getGeometry().getExtent(), flatCoordinates: feat.getGeometry().flatCoordinates });
        });
    })

    var vector = new Vector({
        name: 'paper',
        visible: true,
        source: new VectorSource({
            features: [feature]
        })
    });
    this.map.addInteraction(this.translate);
    this.map.addLayer(vector);
}

修改

updateMapResolution() {
    // Map resolution = 156543.04 meters/pixel * cos(latitude) / (2 ^ zoomlevel)
    this.zoomlevel = this.map.getView().getZoom();
    this.map_resolution = 156543.04 * Math.cos(this.calculateLatitudeRadians()) / Math.pow(2, this.zoomlevel);
    this.map_resolution = Math.round(this.map_resolution * 100) / 100;
}

calculateScale() {
    // Map scale = 1 : (ScreenRes pixels/inch * 39.37 inches/meter * 156543.04 meters/pixel * cos(latitude) / (2 ^ zoomlevel))
    var dpx2 = Math.pow(window.screen.width, 2) + Math.pow(window.screen.height, 2);     
    var dpx = Math.sqrt(dpx2);
    var ppi = dpx / window.screen.pixelDepth;

    this.zoomlevel = this.map.getView().getZoom();
    this.scale = ppi * 39.37 * 156543.04 * Math.cos(this.calculateLatitudeRadians()) / Math.pow(2, this.zoomlevel);
    this.scale = Math.round(this.scale);
    this.showOption();
}