如何在 Rails 7 中使用 Leaflet？

Question

我想要做什么： 我想在 Rails 7 应用程序中使用 Leaflet。

我做了什么： 我创建了 Rails 应用程序并生成了一个仅使用标题调用的模型（带有控制器和视图）map。然后我添加了一条地图记录。

我向应用程序添加了传单，如下所示：

./bin/importmap pin leaflet

div我添加了一张带有刺激属性的地图app/views/map/show.html.erb，现在看起来像这样：

<p style="color: green"><%= notice %></p>
<%= render @map %>

<div data-controller="map" data-target="map.placeholder">

<div><%= link_to "Edit this map", edit_map_path(@map) %> | <%= link_to "Back to maps", maps_path %>
<%= button_to "Destroy this map", @map, method: :delete %> </div>

然后我创建了app/javascript/controllers/map_controller.js如下所示：

// map_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "placeholder" ]

  connect(){
    import("leaflet").then( L => {
      this.map = L.map(this.placeholderTarget,{zoomDelta:0.5,zoomSnap:0.5}).setView([ 50.1960, -6.8712 ], 10);

      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(this.map);
    });
  }

  disconnect(){
    this.map.remove()
  }

}

我得到了什么： 我到处都有随机的瓷砖，如下所示：

我可以点击图块并移动和缩放，然后它们会闪烁，仍然很乱，甚至覆盖 Rails html 文本，如下所示：

我尝试过的：

1. leaflet-css使用 importmap安装
2. 并添加一个类属性'leaflet-container'

但似乎一切都没有改变。

任何关于如何让Leaflet 在 Rails 7 中工作的建议将不胜感激！（我真的很想让它与默认的热线和刺激一起工作）。谢谢。

Answer 1

好的，我自己找到了答案：Leaflet 缺少 css 文件。

leaflet-css使用importmap（如上所述）安装时，以下行会自动添加到config/importmap.rb：

pin "leaflet-css", to: "https://ga.jspm.io/npm:leaflet-css@0.1.0/dist/leaflet.css.min.js"

然后我在文件顶部添加了以下行map_controller.js：

import "leaflet-css"

并将以下内容添加到标签中div（样式标签仅用于此处测试。我将使用 tailwind）：

 class="leaflet-container" style="min-height: 800px;" 

然后它按预期工作：

最后简单又合乎逻辑。我有预感我会喜欢 Rails 7！