README

Yii2 扩展，用于集成 Leaflet JavaScript 地图库。

功能

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

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

安装

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

运行以下命令之一：

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

或者

"beastbytes/yii2-leaflet": "*"

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

用法

要创建地图，首先创建组件，例如标记、控件、形状等，用于在地图上显示，然后运行地图小部件，并在其配置中添加这些组件。

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

示例

use BeastBytes\Leaflet\Map;

$centre = new LatLng([
    'lat' => 51.737022,
    'lng' => -4.931467
]);

$centreLayerGroup = new LayerGroup([ // Layer group with a marker and circle
    'layers' => [
        new Circle([
            'latLng' => $centre,
            'content' => 'This circle has a 5km raduis', // Setting 'content' creates a popup
            'options' => [
                'radius' => 5000
            ]
        ]),
        new Marker([
            'latLng' => $centre,
            'options' => [
                'draggable' => true,
                'icon' => new Icon([
                    'options' => [
                        'iconAnchor' => new Point(['x' => 12, 'y' => 40]), // This is important - it anchors a point in the image, measured in pixels from the top left of the image, to the geographical point given by latLng
                        'iconUrl' => "/images/leaflet/marker-icon-magenta.png", // replace with your own image URL
                        'shadowUrl' => '/images/leaflet/marker-shadow.png' // replace with your own image URL
                    ]
                ])
            ],
            'events' => [
                'dragend' => 'function(e){
                    var marker = e.target;
                    var position = marker.getLatLng();
                    window.alert("New position " + position.lat + " " + position.lng);
                }'
            ]
        ])
    ]
]);
$centreLayerGroup->map = false; // don't show initially

$icon = new Icon([
    'options' => [
        'iconAnchor' => new Point(['x' => 12, 'y' => 40]),
        'iconUrl' => "/images/leaflet/marker-icon-green.png",
        'shadowUrl' => '/images/leaflet/marker-shadow.png'
    ]
]);

$pubLayers = [];
$pubs = [
    [
        'name' => 'The Cottage Inn',
        'address' => 'Llangwm, Haverfordwest, Dyfed SA62 4HH',
        'tel' => '+44 1437 891494',
        'location' => ['lat' => 51.749558, 'lng' => -4.911994]
    ],
    [
        'name' => 'The Ferry Inn',
        'address' => 'Pembroke Ferry, Pembroke Dock, Pembrokeshire SA72 6UD',
        'tel' => '+44 1646 682947',
        'location' => ['lat' => 51.707498, 'lng' => -4.927023]
    ]
];

foreach ($pubs as $pub) {
    $pubLayers[] = new Marker([
        'latLng' => new LatLng($pub['location']),
        'options' => compact('icon'),
        'content' => '<p><b>'.$pub['name'].'</b></p><p>'.$pub['address'].'</p><p>Tel: '.$pub['tel'].'</p>'
    ]);
}

$pubsLayerGroup = new LayerGroup([ // group the public layers
    'layers' => $pubLayers
]);

$layersControl = new Layers([ // create a layers control to control layer visibility
    'overlays' => [
        'Centre of Map' => $centreLayerGroup,
        'Pubs' => $pubsLayerGroup
    ]
]);

echo Map::widget([
    'options' => [
        'id' => 'leaflet',
        'style' => 'height:800px' // a height must be specified
    ],
    'mapOptions' => [
        'center' => $centre,
        'layers' => [
            new TileProvider('OpenStreetMap') // this creates the tile layer
        ],
        'zoom' => 10
    ],
    'controls' => [
        $layersControl,
        new Scale()
    ],
    'layers' => [
        $centreLayerGroup,
        $pubsLayerGroup
    ],
    'plugins' => [
        new Fullscreen()
    ]
]);