README

此包提供了 Leaflet GeoSearch 包（https://github.com/smeijer/leaflet-geosearch）的 Filament 表单字段集成

安装

您可以通过 composer 安装此包

composer require heloufir/filament-leaflet-geosearch

您需要发布此包使用的资产

php artisan vendor:publish --tag=filament-leaflet-geosearch-assets

从版本 1.1.0 开始，您需要手动注册资产（样式和脚本）

此决定是为了使插件对希望在不使用 Filament 管理的情况下使用它的用户独立（仅与 Filament 表单一起使用）

• 如果您使用此包与 Filament 管理员，请将以下行添加到您的 AppServiceProvider 的 boot() 函数中

public function boot()
{
    // ...
    Filament::serving(function () {
        // ... 
        Filament::registerStyles([
            asset('filament/assets/css/leaflet.css'),
            asset('filament/assets/css/geosearch.css'),
        ]);
        Filament::registerScripts([
            asset('filament/assets/js/leaflet.js'),
            asset('filament/assets/js/geosearch.umd.js'),
        ], true);
        // ...
    });
    // ...
}

重要提示：不要忘记在 registerScripts 上的 true 标志，以确保脚本在 Filament 核心脚本之前加载

• 如果您使用此包而不使用 Filament 管理员（仅使用 Filament 表单），您可以将样式和脚本包含到您的 HTML 布局中。

使用方法

模型配置

在您的模型中，您需要添加位置列的转换

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class MyModel extends Model
{
    // ...

    protected $casts = [
        'location' => 'object'
    ];
}

重要：在您的迁移中，location 列必须有 longText 类型（见以下示例）

// ...
Schema::create('my_models', function (Blueprint $table) {
    // ...
    $table->longText('location');
    // ...
});
// ...

字段使用

现在您已经配置了模型，您可以在 Filament 资源表单模式中使用 LeafletInput

use Heloufir\FilamentLeafLetGeoSearch\Forms\Components\LeafletInput;

public static function form(Form $form): Form
{
    return $form
        ->schema([
            // ...
            LeafletInput::make('location')
                ->setMapHeight(300) // Here you can specify a map height in pixels, by default the height is equal to 200
                ->setZoomControl(false) // Here you can enable/disable zoom control on the map (default: true)
                ->setScrollWheelZoom(false) // Here you can enable/disable zoom on wheel scroll (default: true)
                ->setZoomLevel(3) // Here you can change the default zoom level (when the map is loaded for the first time), default value is 10
                ->required()
            // ...
        ]);
}

注意事项

存储在 location 数据库列中的对象具有以下格式

{
  x: Number, // lon,
  y: Number, // lat,
  label: String, // formatted address
  bounds: [
    [Number, Number], // s, w - lat, lon
    [Number, Number], // n, e - lat, lon
  ],
  raw: {}, // raw provider result
}

支持

为了快速支持，请加入 Filament 社区 discord，并在此频道#leaflet-geosearch给我发消息

致谢

• heloufir
• 所有贡献者

许可

MIT 许可证（MIT）。请参阅 许可文件以获取更多信息。