README

集成Leaflet JavaScript地图库的Widget。

特性

• 适用于Leaflet V1.*
• 易于使用的预定义瓦片提供者（Leaflet Providers的端口）
• 简单创建标记和矢量组件的弹出窗口；只需设置'content'选项
• Leaflet插件支持

有关许可信息，请参阅LICENSE文件。

安装

安装此扩展的首选方法是通过composer。

运行以下命令之一：

php composer.phar require --prefer-dist beastbytes/leaflet

或

"beastbytes/leaflet": "*"

将其添加到您的composer.json文件的require部分。

使用方法

必须将地图Widget的一个实例分配给一个变量；此实例用于渲染HTML，然后获取要注册到视图中的JavaScript。

该Widget不发布或注册Leaflet资产，即Leaflet的JavaScript和CSS。LeafletAsset用于在Yii框架中使用。

以下示例显示了一个使用OpenStreetMap作为瓦片提供者的地图。它有一个位于地图中心的标记和一个以标记为中心的5公里半径的圆形；这些位于一个最初不显示的图层组中。当使用图层控件显示图层时，中心标记可以被拖放并显示其新位置 - 这展示了组件事件的使用。在另一个图层组中添加了三个其他标记，并添加了图层和全屏控件到地图；全屏控件是一个插件。

示例

use BeastBytes\Widgets\Leaflet\Map;
use BeastBytes\Widgets\Leaflet\controls\LayersControl;
use BeastBytes\Widgets\Leaflet\controls\ScaleControl;
use BeastBytes\Widgets\Leaflet\layers\other\LayerGroup;
use BeastBytes\Widgets\Leaflet\layers\raster\TileProvider;
use BeastBytes\Widgets\Leaflet\layers\ui\Marker;
use BeastBytes\Widgets\Leaflet\layers\vector\Circle;
use BeastBytes\Widgets\Leaflet\plugins\Fullscreen\FullscreenControl;
use BeastBytes\Widgets\Leaflet\types\Icon;
use BeastBytes\Widgets\Leaflet\types\LatLng;
use BeastBytes\Widgets\Leaflet\types\Point;

// Centre of map
$centre = new LatLng(51.772550, -4.953250);

// Layer group with a marker and circle
$centreLayerGroup = new LayerGroup([
    new Circle($centre, [
        'radius' => 15000,
        'color' => "#20ffcd"
    ])->tooltip('15km radius'),
    new Circle($centre, [
        'radius' => 10000,
        'color' => "#3388ff"
    ])->tooltip('10km radius'),
    new Circle($centre, [
        'radius' => 5000,
        'color' => "#573CFF"
    ])->tooltip('5km radius'),
    new Marker($centre, [
        'icon' => new Icon([
            'iconAnchor' => new Point(12, 40),
            'iconUrl' => "leaflet/images/marker-icon.png",
            'shadowUrl' => 'leaflet/images/marker-shadow.png'
        ])
    ])->popup('<p><b>Little Dumpledale Farm</b></p>' .
        '<p>Ashdale Lane<br>Sardis<br>Haverfordwest<br>Pembrokeshire<br>SA62 4NT</p>' .
        '<p>Tel: +44 1646 602754</p>')
]);

$pubLayers = [];
$pubs = [
    [
        'name' => 'The Cottage Inn',
        'address' => 'Llangwm, Haverfordwest, Pembrokeshire, SA62 4HH',
        'tel' => '+44 1437 891494',
        'location' => [51.749151, -4.913822]
    ],
    [
        'name' => 'Jolly Sailor',
        'address' => 'Burton, Milford Haven, Pembrokeshire, SA73 1NX',
        'tel' => '+44 1646 600378',
        'location' => [51.7079864, -4.925951]
    ]
];

foreach ($pubs as $pub) {
    $pubLayers[] = new Marker($pub['location'], [
        'icon' => [
            'iconAnchor' => new Point(12, 40),
            'iconUrl' => "leaflet/images/marker-icon.png",
            'shadowUrl' => 'leaflet/images/marker-shadow.png'
        ]
    ])->popup('<p><b>' . $pub['name'] . '</b></p>' .
        '<p>' . str_replace(', ', '<br>', $pub['address']) . '</p>' .
        '<p>Tel: ' . $pub['tel'] . '</p>');
}

// group the pub layers
$pubsLayerGroup = new LayerGroup($pubLayers)->addToMap(false);

$draggable = new Marker([51.786979, -4.977206], [
        'draggable' => true,
        'icon' => new Icon([
            'iconAnchor' => new Point(12, 40),
            'iconUrl' => "leaflet/images/marker-icon.png",
            'shadowUrl' => 'leaflet/images/marker-shadow.png'
        ])
    ])
    ->addToMap(false)
    ->popup('Drag me and see what happens'),
    ->events([
        'dragend' => 'function(e){const position=e.target.getLatLng();window.alert("Moved by " + Math.floor(e.distance) + " pixels\nNew position " + position.lat + ", " + position.lng);}'
    ]);

$overlays = [
    'Little Dumpledale' => $centreLayerGroup,
    'Pubs' => $pubsLayerGroup,
    'Draggable' => $draggable
];

$map = Map::widget()
    ->attributes([
        'style' => 'height:800px;' // a height must be specified
    ])
    ->options([
        'center' => $centre,
        'layers' => [
            (new TileProvider())->use('OpenStreetMap') // base tile layer
        ],
        'zoom' => self::ZOOM
    ])
    ->addCcontrols(
        new LayersControl(overlays: array_keys($overlays)), // layers control to control layer visibility
        new ScaleControl()
    )
    ->addLayers($overlays)
    ->addPlugins(new FullscreenControl())
]);

echo $map->render();