Javascript 如何使用Laravel对多边形/圆进行修剪

我是一个使用JS的初学者
我想问一下如何从Laravel中的传单JS创建多边形贴图
这是我的

create.blade.php

文件

@section('content')
<div class="row justify-content-center">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">{{ __('outlet.create') }}</div>
            <form method="POST" action="{{ route('outlets.store') }}" accept-charset="UTF-8">
                {{ csrf_field() }}
                <div class="card-body">
                    <div class="form-group">
                        <label for="address" class="control-label">{{ __('outlet.address') }}</label>
                        <textarea id="address" class="form-control{{ $errors->has('address') ? ' is-invalid' : '' }}" name="address" rows="4">{{ old('address') }}</textarea>
                        {!! $errors->first('address', '<span class="invalid-feedback" role="alert">:message</span>') !!}
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="latitude" class="control-label">{{ __('outlet.latitude') }}</label>
                                <input id="latitude" type="text" class="form-control{{ $errors->has('latitude') ? ' is-invalid' : '' }}" name="latitude" value="{{ old('latitude', request('latitude')) }}" required>
                                {!! $errors->first('latitude', '<span class="invalid-feedback" role="alert">:message</span>') !!}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="longitude" class="control-label">{{ __('outlet.longitude') }}</label>
                                <input id="longitude" type="text" class="form-control{{ $errors->has('longitude') ? ' is-invalid' : '' }}" name="longitude" value="{{ old('longitude', request('longitude')) }}" required>
                                {!! $errors->first('longitude', '<span class="invalid-feedback" role="alert">:message</span>') !!}
                            </div>
                        </div>
                    </div>
                    <div id="mapid"></div>
                </div>
                <div class="card-footer">
                    <input type="submit" value="{{ __('outlet.create') }}" class="btn btn-success">
                    <a href="{{ route('outlets.index') }}" class="btn btn-link">{{ __('app.cancel') }}</a>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@节（“内容”）
{{{（'outlet.create'）}}
{{csrf_field（）}}
{{{（'outlet.address'）}
{{old（'address'）}
{！！$errors->first（'address'，'：message'）
{{{（'outlet.latitude'）}
{！！$errors->first（'latitude'，'：message'）
{{{（'outlet.longitude'）}
{！！$errors->first（'longitude'，'：message'）
@端部

这是我的JS文件

@section('styles')
<style>
    #mapid { height: 300px; }
</style>
@endsection

@push('scripts')
<script>
    var mapCenter = [{{ request('latitude', config('leaflet.map_center_latitude')) }}, {{ request('longitude', config('leaflet.map_center_longitude')) }}];
    var map = L.map('mapid').setView(mapCenter, {{ config('leaflet.zoom_level') }});

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    var marker = L.marker(mapCenter).addTo(map);
    function updateMarker(lat, lng) {
        marker
        .setLatLng([lat, lng])
        .bindPopup("Your location :  " + marker.getLatLng().toString())
        .openPopup();
        return false;
    };

    map.on('click', function(e) {
        let latitude = e.latlng.lat.toString().substring(0, 15);
        let longitude = e.latlng.lng.toString().substring(0, 15);
        $('#latitude').val(latitude);
        $('#longitude').val(longitude);
        updateMarker(latitude, longitude);
    });

    var updateMarkerByInputs = function() {
        return updateMarker( $('#latitude').val() , $('#longitude').val());
    }
    $('#latitude').on('input', updateMarkerByInputs);
    $('#longitude').on('input', updateMarkerByInputs);
</script>
@endpush

@节（“样式”）
#mapid{高度：300px；}
@端部
@推送（'脚本'）
var mapCenter=[{request（'latitude'，config（'slaple.map_center_latitude'））}，{{request（'longitude'，config（'slaple.map_center_latitude'））}}；
var map=L.map（'mapid'）.setView（mapCenter，{{config（'folicate.zoom_level'）}）；
L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
属性：“©；贡献者”
}).addTo（地图）；
var marker=L.marker（地图中心）.addTo（地图）；
功能更新标记器（lat、lng）{
标记
.setLatLng（[lat，lng]）
.bindPopup（“您的位置：+marker.getLatLng（）.toString（））
.openPopup（）；
返回false；
};
地图上（'点击'）功能（e）{
设纬度=e.latlng.lat.toString（）.substring（0,15）；
设经度=e.latlng.lng.toString（）.substring（0,15）；
$（'纬度'）.val（纬度）；
$（'经度'）.val（经度）；
更新标记（纬度、经度）；
});
var updatemarkerbynputs=函数（）{
返回updateMarker（$（'纬度'）.val（），$（'经度'）.val（））；
}
$（“#纬度”）。在（'input'，updateMarkerByInputs）上；
$（'#经度'）。在（'input'，updateMarkerByInputs）上；
@端推

这是代码成功从地图的横向和纵向坐标保存数据，单击地图上的标记时自动填充横向坐标
在我的例子中，如何将绘制多边形中的数据保存在传单JS中？？？
对于数组（坐标），也可以自动填充坐标

编辑 我还希望将数据库中的lang&lat列更改为坐标（以保存数据LatLng）