Javascript 反转L:CRS的Y轴。Vue2传单上的简单地图_Javascript_R_Vue.js_Leaflet_Vue2leaflet

Javascript 反转L:CRS的Y轴。Vue2传单上的简单地图

javascript r vue.js leaflet

Javascript 反转L:CRS的Y轴。Vue2传单上的简单地图,javascript,r,vue.js,leaflet,vue2leaflet,Javascript,R,Vue.js,Leaflet,Vue2leaflet,我正在使用Vue2传单的L.CRS.Simple开发一个地图应用程序，我想反转地图的y轴，如中所述。我发现了一个类似的问题，我的问题似乎也一样，所以我的问题是：如何集成反转y轴但使用vue2传单包的相同功能这是我的代码： <template> <body> <div> <li v-for="(message, index) in messageList" :item="message" :key="index"> {{ m

我正在使用Vue2传单的L.CRS.Simple开发一个地图应用程序，我想反转地图的y轴，如中所述。我发现了一个类似的问题，我的问题似乎也一样，所以我的问题是：如何集成反转y轴但使用vue2传单包的相同功能

这是我的代码：

<template>
<body>
  <div>
    <li v-for="(message, index) in messageList" :item="message" :key="index">
      {{ message }}
    </li>
  </div>
  <l-map class="map" ref="map" :min-zoom="minZoom" :crs="crs">
    <l-tile-layer :url="url"></l-tile-layer>
    <!-- <l-image-overlay :url="url" :bounds="bounds" /> -->
    <l-grid-layer class="grid" :tile-component="tileComponent"></l-grid-layer>
    <l-marker v-for="star in stars" :key="star.id" :lat-lng="star">
      <l-icon
        :icon-size="[25, 25]"
        icon-url="https://image.flaticon.com/icons/png/512/304/304378.png"
      ></l-icon>
      <!-- <l-icon :icon-size="[32, 37]" icon-url="/images/star.png"></l-icon> -->
      <l-popup class="popup">
        <em class="popup-bold">Name: </em>{{ star.name }}<br>
        <em class="popup-bold">Longitud: </em>{{ star.lng }}<br>
        <em class="popup-bold">Latitud: </em>-{{ star.lat }}<br>
      </l-popup>
    </l-marker>
  </l-map>  
</body>
</template>

<script>
import L from "leaflet";
import { CRS } from "leaflet";
import {
  LMap,
  LTileLayer,
  LMarker,
  LImageOverlay,
  LPopup,
  LPolyline,
  LIcon,
  LGridLayer
} from "vue2-leaflet";

export default {
  name: "Map",
  components: {
    LMap,
    LTileLayer,
    LMarker,
    LImageOverlay,
    LPopup,
    LPolyline,
    LIcon,
    LGridLayer
  },
  props: {
    msg: {
      type: String
    }
  },
  data() {
    return {
      url: "https://wallpaperboat.com/wp-content/uploads/2019/10/high-resolution-black-background-08.jpg",
      bounds: [
        [-2600, -2700],[1000, 3000]
      ],
      minZoom: 0.5,
      crs: L.CRS.Simple,
      stars: [],
      messageList: [],
      tileComponent: {
        name: "tile-component",
        props: {
          coords: {
            type: Object,
            required: true
          }
        },
        template: '<div style="outline:1px solid #38c9d386; height:40rem; width:40rem;"></div>'
      }
    };
  },
  watch: {
    msg: function() {
      this.messageList.push(this.msg);
    }
  },
  mounted() {
    this.$refs.map.mapObject.setView([526, -68], 1);

    this.$http
      .get("https://pyet2m3rzl.execute-api.us-east-1.amazonaws.com/test/outscapebackend")
      .then(response => {
        return response.json();
      })
      .then(data => {
        const resultArray = [];
        for (let key in data) {
          resultArray.push(data[key]);
        }
        this.stars = resultArray;
      });
  },
  methods: {}
};
</script>

<style scoped>
...
</style>



{{message}}

名称：{{star.Name}}

Longitud:{{star.lng}}

纬度：-{{star.lat}}

从“传单”中输入L；
从“传单”中输入{CRS}；
进口{
LMap，
第三层，
马克，
边缘覆盖层，
LPopup，
LPolyline，
利康，
激光层
}来自“vue2传单”；
导出默认值{
名称：“地图”，
组成部分：{
LMap，
第三层，
马克，
边缘覆盖层，
LPopup，
LPolyline，
利康，
激光层
},
道具：{
味精：{
类型：字符串
}
},
数据（）{
返回{
url:“https://wallpaperboat.com/wp-content/uploads/2019/10/high-resolution-black-background-08.jpg",
界限：[
[-2600, -2700],[1000, 3000]
],
最小缩放：0.5，
crs:L.crs.Simple，
星星：[]，
消息列表：[]，
tileComponent：{
名称：“瓷砖组件”，
道具：{
协调：{
类型：对象，
必填项：true
}
},
模板：“”
}
};
},
观察：{
msg:function（）{
this.messageList.push（this.msg）；
}
},
安装的（）{
这是.refs.map.mapObject.setView（[526，-68]，1）；
这是$http
.get（“https://pyet2m3rzl.execute-api.us-east-1.amazonaws.com/test/outscapebackend")
。然后（响应=>{
返回response.json（）；
})
。然后（数据=>{
常量结果数组=[]；
for（让我们输入数据）{
resultArray.push（数据[键]）；
}
this.stars=resultArray；
});
},
方法：{}
};
...

如果我理解正确，您需要反转所有

L.LatLng

s的Y坐标，而不仅仅是平铺坐标（这是用例），以便Y坐标在下降时增加。换句话说，如果我有像

L.marker([0,0]).addTo(map).bindPopup('y=0,x=0', {autoClose:false}).openPopup();
L.marker([100,50]).addTo(map).bindPopup('y=100,x=50', {autoClose:false}).openPopup();

…默认值看起来像

…但你想让它看起来像

（如果Y坐标以速记形式列在L.LatLngs的第一位，请重新阅读解释问题的位置以及）

关于传单内部的一些解释：传单CRS将

LatLng

坐标转换为像素坐标。e、 g.在默认的

L.CRS.EPSG3857

中，屏幕Y坐标取决于纬度的余弦，以获得a

对于

L.CRS.Simple

这个翻译也存在，因为有一个奇怪的差异。对于数学家来说，Y坐标上升是因为a是这样工作的：

然而，对于计算机程序员来说，Y坐标下降是因为在屏幕上（至少，这是几十年来的惯例）：

为了避免这种怪癖，传单实现（考虑到缩放级别的传单怪癖），然后使用这种仿射变换反转Y坐标（因此

L.CRS.Simple

的工作原理类似于笛卡尔平面，而不是像素平面）：

这相当于指定一个like

因此，考虑到这一点，您的问题的答案是“您应该使用自定义仿射变换定义一个新的CRS，该变换将1个单位的«纬度»映射为1个向下的像素”

在这一点上，你应该阅读，但TL；DR版本为：

var CRSPixel = L.Util.extend(L.CRS.Simple, {
    transformation: new L.Transformation(1,0,1,0)
});

然后将通过该自定义CRS的地图定义为地图的

CRS

选项，一切都应该正常。（即无vue）

有了这些信息，您应该能够使该技术适应您的Vue代码，并在导入所有所需的传单位时小心谨慎。

要反转平铺显示的Y轴还是坐标的Y轴？这些是不同的东西。据我所知，对于L.CRS.Simple来说，Y坐标是颠倒的，所以第一张右上角图像的位置是1x-1，而不是1x1。因此，我应该只反转平铺显示的Y轴。我也知道我需要为L.TileLayer创建一个子类，但我的问题是我无法使用vue2传单包做到这一点：（@Ivansanchezt

L.LatLng

s中的轴顺序是向东向北：向北时Y坐标（纬度）变大（在

L.CRS.EPSG3857

）上升时也会变大（在

L.CRS.Simple

）。方向是向南还是向下，但方向是向北/向上。因此，不清楚是否要反转CRS中的Y坐标（因此轴顺序是朝东向南，“纬度”变小）或者只是平铺坐标。然后是的，我需要反转我的CRS中的Y坐标，这样纬度就会下降谢谢你提供的信息。它让我更好地理解我的问题。正如你所说，如果我有这样的东西：L.marker（[0,0]）.addTo（map）.bindPopup（'Y=0，x=0'，{autoClose:false}）。openPopup（）；L.marker（[100,50]）.addTo（map）。bindPopup（'y=100，x=50'，{autoClose:false}）.openPopup（）；…默认值如下：，但我希望它是这样的：我基本上希望我的默认贴图旋转180度，所以我想我误解了我告诉你我需要下降纬度的部分。

( 1  0 )
( 0 -1 )

var CRSPixel = L.Util.extend(L.CRS.Simple, {
    transformation: new L.Transformation(1,0,1,0)
});