反转 L:CRS 的 Y 轴。Vue2-Leaflet 上的简单地图
Ari*_*ubí 1 javascript r leaflet vue.js vue2leaflet
我正在使用 Vue2-Leaflet 的 L.CRS.Simple 开发地图应用程序，并且我想反转地图的 y 轴，如Leaflet 文档中所述。我在这里发现了一个类似的问题，看来我的问题是相同的，所以我的问题是：如何集成反转 y 轴但使用 vue2-leaflet 包的相同解决方案？
这是我的代码：
<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>
Iva*_*hez 10
如果我理解正确的话，您想要反转所有L.LatLngs 的 Y 坐标，而不仅仅是图块坐标（这是TMS用例），以便 Y 坐标在下降时增长。换句话说，如果我有类似的东西......
L.marker([0,0]).addTo(map).bindPopup(\'y=0,x=0\', {autoClose:false}).openPopup();\nL.marker([100,50]).addTo(map).bindPopup(\'y=100,x=50\', {autoClose:false}).openPopup();\n...默认看起来像...
\n\n
...但你希望它看起来像...
\n\n
（如果 Y 坐标以L.LatLngs 的简写形式首先列出，请重新阅读L.CRS.Simple 上解释问题的 Leaflet 教程，以及lon lat lon lat lon）。
关于 Leaflet 内部结构的一些解释：Leaflet CRS 将LatLng坐标转换为像素坐标。例如，在默认情况下L.CRS.EPSG3857，屏幕Y 坐标取决于纬度的余弦来获得横向圆柱投影。
由于L.CRS.Simple奇怪的差异，这种翻译也存在。对于数学家来说，Y 坐标向上，因为这就是笛卡尔平面的工作原理：
然而，对于计算机程序员来说，Y 坐标会下降，因为这就是像素在屏幕上索引的方式（至少，这是几十年来的惯例）：
\n\n
为了解决这个问题，Leaflet 实现了仿射变换（考虑到了 Leaflet 缩放级别的问题），然后L.CRS.Simple使用这样的仿射变换来反转 Y 坐标（因此L.CRS.Simple就像笛卡尔平面而不是像素平面一样工作） ：
L.CRS.Simple = L.Util.extend({}, L.CRS, {\n projection: L.Projection.LonLat,\n transformation: L.Transformation(1, 0, -1, 0),\n /* snip */\n这相当于指定一个仿射变换矩阵，例如
\n\n( 1 0 )\n( 0 -1 )\n因此，考虑到这一点，您的问题的答案就变成了“您应该使用自定义仿射变换定义一个新的 CRS，将 1 个单位的 \xc2\xablatitude\xc2\xbb 映射到 1 个向下的像素”。
\n\n此时，您应该阅读有关扩展 Leaflet 类的 Leaflet 教程，但其 TL;DR 版本是：
\n\nvar CRSPixel = L.Util.extend(L.CRS.Simple, {\n transformation: new L.Transformation(1,0,1,0)\n});\n然后定义将自定义 CRS 传递为地图选项的地图crs，一切都应该正常。这是一个使用 vanilla Leaflet 的工作示例（即无 vue）
有了这些信息，您应该能够使该技术适应您的 Vue 代码，并稍微注意import所有需要的 Leaflet 位。
| 归档时间： |
|
| 查看次数： |
1766 次 |
| 最近记录： |