README

Symfony UX 地图的 Leaflet 集成。

DSN 示例

UX_MAP_DSN=leaflet://default

地图选项

您可以使用 LeafletOptions 类来配置您的 Map:

use Symfony\UX\Map\Bridge\Leaflet\LeafletOptions;
use Symfony\UX\Map\Bridge\Leaflet\Option\TileLayer;
use Symfony\UX\Map\Point;
use Symfony\UX\Map\Map;

$map = (new Map())
    ->center(new Point(48.8566, 2.3522))
    ->zoom(6);

$leafletOptions = (new LeafletOptions())
    ->tileLayer(new TileLayer(
        url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
        attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        options: [
            'minZoom' => 5,
            'maxZoom' => 10,
        ]
    ))
;

// Add the custom options to the map
$map->options($leafletOptions);

使用场景

以下是一些使用地图时的常见或高级使用场景。

自定义标记

一个常见的用例是自定义标记。您可以通过监听 ux:map:marker:before-create 事件来在创建标记之前自定义标记。

假设您有一个具有自定义控制器的地图

{{ ux_map(map, {'data-controller': 'my-map' }) }}

您可以创建一个 Stimulus 控制器来在创建标记之前自定义标记

// assets/controllers/my_map_controller.js
import {Controller} from "@hotwired/stimulus";

export default class extends Controller
{
    connect() {
        this.element.addEventListener('ux:map:marker:before-create', this._onMarkerBeforeCreate);
    }

    disconnect() {
        // Always remove listeners when the controller is disconnected
        this.element.removeEventListener('ux:map:marker:before-create', this._onMarkerBeforeCreate);
    }

    _onMarkerBeforeCreate(event) {
        // You can access the marker definition and the Leaflet object
        // Note: `definition.rawOptions` is the raw options object that will be passed to the `L.marker` constructor. 
        const { definition, L } = event.detail;

        // Use a custom icon for the marker
        const redIcon = L.icon({
          // Note: instead of using an hardcoded URL, you can use the `extra` parameter from `new Marker()` (PHP) and access it here with `definition.extra`.
          iconUrl: 'https://leaflet.npmjs.net.cn/examples/custom-icons/leaf-red.png',
          shadowUrl: 'https://leaflet.npmjs.net.cn/examples/custom-icons/leaf-shadow.png',
          iconSize: [38, 95], // size of the icon
          shadowSize: [50, 64], // size of the shadow
          iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
          shadowAnchor: [4, 62],  // the same for the shadow
          popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
        })
  
        definition.rawOptions = {
          icon: redIcon,
        }
    }
}

资源

• 文档
• 报告问题 和 发送拉取请求 到 主 Symfony UX 仓库