传单：如何在屏幕的左上角设置原点

Question

我想获取像素坐标，并将地理坐标转换为平面坐标。但是我发现Y轴始终为负，除非获得图像的高度-y轴为正确的像素坐标。那么如何在屏幕的左上角设置有关传单的帧的原点。

我将crs的传单设置为crs.simple，并将地理坐标转换为像素坐标。使用map.project()

<template>
    <div style="width: 100%;height: 100%;">
        <l-map ref="map" 
            style="background: #000;"
            :minZoom="minZoom"
            :maxZoom="maxZoom"
            :crs="crs">
            <l-image-overlay
                :url="url"
                :bounds="bounds">
            </l-image-overlay>
        </l-map>
    </div>
</template>
<script>
import {cloneObj, getUUID} from '@/utils/index';
import {CRS} from 'leaflet';
export default {
    data() {
        return {
            zoom: 1,
            minZoom: -3,
            maxZoom: 0,
            // center: [0, 1728],
            bounds: [[0, 0], [0, 0]],
            content: '',
            map: null,
            lesion: {},
            drawnItems: null,
            crs: CRS.Simple,
            width: 0,
            height: 0,
            layers: []
        };
    },
    props: {
        rectflag: Boolean,
        lesiontype: String,
        url: {
            default: '',
            type: String
        },
        sublabelresultid: String,
        priSubLabelResultId: String,
        lesions: Array
    },
    watch: {
        rectflag: function(newVal, oldVal) {
            if (newVal) {
                this.drawRect();
            }
        },
        lesiontype: function(newVal, oldVal) {
            if (newVal) {
                this.lesion.lesionType = newVal;
            }
        },
        sublabelresultid: function(newVal, oldVal) {
            if (newVal) {
                this.lesion.subLabelResultId = newVal;
            }
        },
        priSubLabelResultId: function(newVal, oldVal) {
            if (newVal) {
                this.lesion.priSubLabelResultId = newVal;
            }
        },
        url: function(newVal, oldVal) {
            if (newVal) {
                let img = new Image();
                img.src = newVal;
                let that = this;
                img.onload = () => {
                    that.width = img.width;
                    that.height = img.height;

                    const crss = CRS.Simple;
                    const w = img.width;
                    const h = img.height;
                    let p1 = new window.L.point(0, h);
                    let p2 = new window.L.point(w, 0);
                    let southWest = crss.unproject(p1);
                    let northEast = crss.unproject(p2);
                    const bound = new window.L.LatLngBounds(southWest, northEast);
                    that.bounds = bound;
                };
            }
        }
    },
    mounted() {
        this.$nextTick(() => {
            const self = this;
            this.map = this.$refs.map.mapObject;
            this.drawnItems = new window.L.FeatureGroup();
            this.map.addLayer(this.drawnItems);

            window.L.drawLocal.draw.toolbar.buttons.rectangle = '画一个矩形框';
            this.drawControl = new window.L.Control.Draw({
                position: 'topright',
                draw: {
                    polyline: false,
                    polygon: false,
                    circle: false,
                    circlemarker: false,
                    marker: false,
                    zoomControl: true,
                    rectangle: false
                },
                edit: {
                    featureGroup: this.drawnItems,
                    remove: true
                }
            });
            this.map.addControl(this.drawControl);

            // 创建
            this.map.on(window.L.Draw.Event.CREATED, e => {
                // debugger;
                let layer = e.layer;
                let nw = layer.getBounds().getNorthWest();
                let se = layer.getBounds().getSouthEast();

                layer.options.id = getUUID();
                this.drawnItems.addLayer(layer);
                let lesion = cloneObj(this.lesion);
                lesion.points = this.conPoints(nw, se);

                lesion.id = layer.options.id;
                let bounds = this.conBounds(nw, se);
                lesion.bounds = bounds;
                // 保存到数据库
                this.$db.get('lesion').push(lesion).write();
                self.$emit('reset', false);
            });
        });
    },
    methods: {
        drawRect() {
            let drawControl = new window.L.Control.Draw();
            new window.L.Draw.Rectangle(this.map, drawControl.options.rectangle).enable();
        },
        conBounds(nw, se) {
            let bounds;
            if (nw && se) {
                bounds = [[nw.lat, nw.lng], [se.lat, se.lng]];
            }
            return bounds || [];
        },
        conPoints(nw, se) {
            if (nw && se) {
                let topLeft = this.map.project([nw.lat, nw.lng], 0);
                let bottomRight = this.map.project([se.lat, se.lng], 0);
                let points = [];
                // https://gis.stackexchange.com/questions/159396/can-we-set-the-latlng-start-point-leaflet
                let newTopLeft = {
                    x: topLeft.x,
                    y: this.height - Math.abs(topLeft.y),
                    z: 0
                };
                let newBottomRight = {
                    x: bottomRight.x,
                    y: this.height - Math.abs(bottomRight.y),
                    z: 0
                };
                points.push(newTopLeft);
                points.push(newBottomRight);
                return points;
            }
        }
    }
};
</script>

传单：1.5.1 宣传单张：1.0.4 提示：2.5.16