Vue Leaflet自定义地图CRS.Simple下将坐标原点0,0设为左下角的方法咨询

云原生阿岚

2026-9-28

解决方案

Leaflet默认CRS.Simple的坐标转换逻辑会将y轴取反映射到屏幕坐标系，因此原生规则下坐标(0,0)固定落在地图容器左上角。你可以通过自定义CRS修改转换规则实现原点在左下角的需求，修改方案如下：

修改步骤

基于CRS.Simple扩展自定义坐标系，调整坐标转换参数，将y轴映射规则翻转，使CRS坐标y=0对应屏幕底部位置
若你的自定义瓦片的y轴编号从左下角开始计数，给瓦片层添加tms: true属性避免瓦片上下颠倒

完整可运行代码

<template>
  <l-map
    ref="map"
    v-model="zoom"
    v-model:zoom="zoom"
    v-model:maxZoom="maxZoom"
    v-model:minZoom="minZoom"
    :center="[500, 250]"
    :crs="crs"
  >
    <!-- 若你的瓦片y轴是从上到下编号，可删除:tms="true"属性 -->
    <l-tile-layer url="https://localhost:3000/{z}/{x}/{y}.png" :tms="true" />
    <l-marker :lat-lng="[1000, 500]" />
    <l-marker :lat-lng="[0, 0]" />
  </l-map>
</template>
<script>
import {
  LMap,
  LTileLayer,
  LMarker,
} from '@vue-leaflet/vue-leaflet';
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';

export default {
  components: {
    LMap,
    LTileLayer,
    LMarker,
  },
  data() {
    return {
      zoom: 2,
      minZoom: 2,
      maxZoom: 8,
      // 中心坐标调整为地图中点，你也可以根据自己的需求修改
      center: [500, 250],
      crs: L.Util.extend({}, L.CRS.Simple, {
        // 第四个参数为你自定义地图的最大Y轴坐标值，当前示例按你代码里的最大y=1000配置
        transformation: new L.Transformation(1, 0, -1, 1000)
      }),
    };
  },
}