nailfor/leaflet

LeafLet 移动端友好交互式地图扩展库,适用于 Laravel

1.0.8 2019-06-26 15:15 UTC

This package is not auto-updated.

Last update: 2024-09-15 03:44:46 UTC


README

Laravel 框架的 Leaflet 插件

安装

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

运行以下命令之一:

composer require nailfor/leaflet
npm install vue2-leaflet --save

或者将以下内容添加到您的应用程序的 composer.json 文件的 require 部分。

"nailfor/leaflet" : "*"

使用

使用

发布 js 类

php artisan vendor:publish --provider="nailfor\leaflet\Providers\MapServiceProvider"

在 app.js 中注册组件

import Vue2Leaflet from 'vue2-leaflet';
Vue.component('v-map', Vue2Leaflet.LMap);
Vue.component('v-tilelayer', Vue2Leaflet.LTileLayer);
Vue.component('v-marker', Vue2Leaflet.LMarker);
Vue.component('v-circle', Vue2Leaflet.LCircle);
Vue.component('v-polygon', Vue2Leaflet.LPolygon);
Vue.component('v-control', Vue2Leaflet.LControlZoom);
Vue.component('v-popup', Vue2Leaflet.LPopup);
Vue.component('v-icon', Vue2Leaflet.LIcon);

示例控制器


use nailfor\leaflet\Leaflet;
use nailfor\leaflet\Circle;
use nailfor\leaflet\Marker;
use nailfor\leaflet\Polygon;

class MapController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @param UsersGridInterface $usersGrid
     * @param Request $request
     * @return \Illuminate\Http\Response
     */
    public function index() {
        $marker = new Marker([
            'coord'     => ['55.75222', '37.61556'],
            'iconName'  => 'checkIcon',
            'icon'      => 'icon/leaf-green.png',
            'shadow'    => 'icon/leaf-shadow.png',
            'popup'     => 'Москва',
            'draggable' => true,
            'ajax'      => '/map/ajax',     //for dynamic updadate coordinates
            'ajaxDelay' => 1,               //delay call /map/ajax in seconds
        ]);
        
        $circle = new Circle([
            'coord'     => ['55.75222', '37.61556'],
            'radius'    => 500
            //'popup' => 'cirle',
        ]);
        
        $polygon = new Polygon([
            'coord'    => [
                 ['55.75222', '37.61556'],
                 ['55.75222', '37.62556'],
                 ['55.76222', '37.62556']
            ]
            //'color' => 'yellow',
            //'popup' => 'triangle',
        ]);
        
        $map = new Leaflet([
            'objects' => [
                $marker,
                $circle,
                $polygon,
            ]
        ]);
        return $map->render();
    }
    
    /**
    * route for /map/ajax
    * return random coords
    */
    public function ajax() {
        $dx = rand();
        $dy = rand();
        $x  = floatval("55.7$dx");
        $y  = floatval("37.7$dy");
        $res = [$x, $y];
        return json_encode($res);
    }    
}

默认情况下,render() 使用 /resources/views/map.blade.php 并包含以下内容:

@extends('layout')

@section('content')
    {!! $map !!}
@stop

但您也可以更改它,使用以下代码:

        $map = new Leaflet([
            'view' => 'name_your_view',
        ]);

致谢

许可证

BSD 许可证 (BSD)。请参阅 许可证文件 获取更多信息。