vue中使用mapBox绘制圆形范围

需求：

根据给定经纬度坐标绘制给定半径的圆形区域。

代码：

<template>

    <div>
        <div id="map"></div>
    </div>

</template>

<script type="text/ecmascript-6">

    //npm install --save mapbox-gl 或 cnpm install --save mapbox-gl 下载mapbox

    /*修改语言为中文
        1、下载语言包cnpm install --save mapbox-gl
        2、安装语言包 cnpm install --save mapbox-gl @mapbox/mapbox-gl-language
    */

    import mapboxgl from "mapbox-gl";//引入mapbox
    import MapboxLanguage  from '@mapbox/mapbox-gl-language';//引入语言包


    export default {
        name: 'mapboxgl',
        data(){
            return{
                lat:0,//纬度
                lag:0,//经度
            }
        },
        mounted () {
            this.initmap()
        },

        methods: {
            initmap(){
                mapboxgl.accessToken = 'pk.eyJ1IjoicGxheS1pc2FhYyIsImEiOiJjazU0cDkzbWowamd2M2dtemd4bW9mbzRhIn0.cxD4Fw3ZPB_taMkyUSFENA';//需要修改为自己的token

                let map = new mapboxgl.Map({
                    container: 'map', // 绑定的组件的id
                    style: 'mapbox://styles/mapbox/outdoors-v10', //地图样式，可以使用官网预定义的样式,也可以自定义
                    center: [-93.6248586, 41.58527859], // 初始坐标系(经度，纬度）
                    zoom: 15,     // starting zoom 地图初始的拉伸比例
                    pitch: 0,  //地图的角度，不写默认是0，取值是0-60度，一般在3D中使用
                    bearing: 0, //地图的初始方向，值是北的逆时针度数，默认是0，即是正北
                    antialias: true, //抗锯齿，通过false关闭提升性能

                });


                let language = new MapboxLanguage({ defaultLanguage: "zh" });//地图加到显示为中文
                map.addControl(language);


				//绘制圆形区域的函数
                let createGeoJSONCircle = function(center, radiusInKm, points) {
                    if(!points) points = 64;

                    var coords = {
                        latitude: center[1],
                        longitude: center[0]
                    };

                    var km = radiusInKm;

                    var ret = [];
                    var distanceX = km/(111.320*Math.cos(coords.latitude*Math.PI/180));
                    var distanceY = km/110.574;

                    var theta, x, y;
                    for(var i=0; i<points; i++) {
                        theta = (i/points)*(2*Math.PI);
                        x = distanceX*Math.cos(theta);
                        y = distanceY*Math.sin(theta);

                        ret.push([coords.longitude+x, coords.latitude+y]);
                    }
                    ret.push(ret[0]);

                    return {
                        "type": "geojson",
                        "data": {
                            "type": "FeatureCollection",
                            "features": [{
                                "type": "Feature",
                                "geometry": {
                                    "type": "Polygon",
                                    "coordinates": [ret]
                                }
                            }]
                        }
                    };
                };





                //务必放在此方法内，否则会报样式没有加载完成。该方法类型与window.onload
                map.on('load', function() {
                    //createGeoJSONCircle参数（[经度，纬度]，圆的半径单位km）
                    map.addSource("polygon", createGeoJSONCircle([-93.6248586, 41.58527859], 0.5));

                    map.addLayer({
                        "id": "polygon",
                        "type": "fill",
                        "source": "polygon",
                        "layout": {},
                        "paint": {
                            "fill-color": "blue",
                            "fill-opacity": 0.6
                        }
                    });
                });
           }
    }
</script>

<style  scoped>
    @import url('https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css');
    #map{
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }
</style>