将多边形添加到 vue2-leaflet

Question

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

如何向 vue2leaflet 地图添加多边形？

代表代码：

fiddle: https://jsfiddle.net/brj703my/2/

<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>

视觉：

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]]]
    }
  }
});

Answer 1

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

将多边形添加到 vue2-leaflet

Adding a polygon to vue2-leaflet

vue.js

leaflet

vue2leaflet