michaljanjanik / yii2-leaflet-extension
为Yii2设计的LeafLet移动端友好交互式地图扩展库。
dev-master / 1.0.x-dev
2023-08-07 11:29 UTC
Requires
- bower-asset/leaflet: ^1.0
- yiisoft/yii2: ^2.0
Requires (Dev)
- phpunit/phpunit: 4.*
This package is auto-updated.
Last update: 2024-09-07 13:35:47 UTC
README
使用LeafletJs(LeafletJs)显示交互式地图的扩展库。
安装
安装此扩展的首选方式是通过composer。这需要composer-asset-plugin
,它也是yii2的依赖项——因此如果您已安装yii2,那么您可能已经设置好了。
运行以下命令之一:
composer require 2amigos/yii2-leaflet-extension:~1.0
或
"2amigos/yii2-leaflet-extension" : "~1.0"
将以下内容添加到您的应用程序的composer.json
文件的require部分。
用法
与LeafletJs(LeafletJs)一起工作时需要考虑的一件事是我们需要一个瓦片提供商。如果我们未能提供瓦片提供商的URL,地图将显示为空白,没有任何地图。
以下示例使用了MapQuest
// first lets setup the center of our map
$center = new dosamigos\leaflet\types\LatLng(['lat' => 51.508, 'lng' => -0.11]);
// now lets create a marker that we are going to place on our map
$marker = new \dosamigos\leaflet\layers\Marker(['latLng' => $center, 'popupContent' => 'Hi!']);
// The Tile Layer (very important)
$tileLayer = new \dosamigos\leaflet\layers\TileLayer([
'urlTemplate' => 'http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpeg',
'clientOptions' => [
'attribution' => 'Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> ' .
'<img src="http://developer.mapquest.com/content/osm/mq_logo.png">, ' .
'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
'subdomains' => ['1', '2', '3', '4'],
],
]);
// now our component and we are going to configure it
$leaflet = new \dosamigos\leaflet\LeafLet([
'center' => $center, // set the center
]);
// Different layers can be added to our map using the `addLayer` function.
$leaflet->addLayer($marker) // add the marker
->addLayer($tileLayer); // add the tile layer
// finally render the widget
echo \dosamigos\leaflet\widgets\Map::widget(['leafLet' => $leaflet]);
// we could also do
// echo $leaflet->widget();
测试
要测试此扩展,最好在您的计算机上克隆此存储库。之后,转到扩展文件夹并执行以下操作(假设您已经在计算机上安装了composer
)
$ composer install --no-interaction --prefer-source --dev
安装所有必需的库后,执行以下操作
$ vendor/bin/phpunit
更多信息
有关LeafletJS库的多个设置的更多信息,请访问其API参考
贡献
有关详细信息,请参阅CONTRIBUTING
致谢
许可证
BSD许可证(BSD)。有关更多信息,请参阅许可证文件
网络开发从未如此有趣!
www.2amigos.us