将多边形添加到 vue2-leaflet答案

【问题标题】：Adding a polygon to vue2-leaflet将多边形添加到 vue2-leaflet
【发布时间】：2020-01-03 05:24:54
【问题描述】：

我一直在尝试使用 vue2-leaflet 将 MultiPolygon 添加到传单地图中，但无济于事。我正在从 PostGIS 生成多边形坐标。

如何将多边形添加到 vue2leaflet 地图中？

代表代码：

<body>
  <div id="app">
    <l-map :zoom="zoom" :center="center">
      <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
      <l-marker :lat-lng="marker"></l-marker>
      <l-polygon :lat-lngs="coordinates"></l-polygon>
    </l-map>
  </div>
</body>

Vue：

var { LMap, LTileLayer, LMarker, LPolygon } = Vue2Leaflet;

new Vue({
  el: '#app',
  components: { LMap, LTileLayer, LMarker, LPolygon},
  data() {
    return {
      zoom:13,
      center: L.latLng(41.789465, -87.599621),
      url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      attribution:'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      marker: L.latLng(41.789465, -87.599621),
      coordinates: [[[-87.60491109933375,41.79042784175226],[-87.59918340932317,41.79371959572518],[-87.59075097680761,41.79048715413015],[-87.59556382744151,41.78233118716912],[-87.60940574496703,41.780581226351444],[-87.61095699434492,41.79063543483471],[-87.60491109933375,41.79042784175226]]]
    }
  }
});

【问题讨论】：

标签： vue.js leaflet vue2leaflet

【解决方案1】：

看起来您的 coordinates 值包含反向 (lng-lat) 对（可能是来自 GeoJSON 的复制粘贴），而 Leaflet 期望它们按 (lat-lng) 顺序。

【讨论】：

当然！非常感谢您指出这一点。我没有反转坐标，而是发现有一个 Leaflet GeoJSON 组件可以直接接受我的 GeoJSON 对象。