如何在 VueJS 项目中将leaflet-semicircle 与 vue2-leaflet 一起使用？答案

【问题标题】：How can I use leaflet-semicircle with vue2-leaflet in a VueJS project?如何在 VueJS 项目中将leaflet-semicircle 与 vue2-leaflet 一起使用？
【发布时间】：2020-04-03 15:19:33
【问题描述】：

我用Vue2Leaflet 和Leaflet-semicircle。我在使用Vue2Leaflet时没有问题，但是我不知道如何在我的VueJS项目中使用Leaflet-semicircle。

<script>
    import { latLng } from "leaflet";
    import { LMap, LTileLayer, LMarker, LCircleMarker, LPopup, LTooltip } from "vue2-leaflet";
    import { mapGetters } from 'vuex';
    import moment from 'moment';
    import 'leaflet-semicircle';

    export default {
        name: 'Map',
        components: { LMap, LTileLayer, LMarker, LCircleMarker, LPopup, LTooltip, LSemicircle },
        data() {
            return {
            map: null,
            zoom: 12,
            center: latLng(53.88694, 27.554572),
            url: 'http://192.168.1.1/osm-tiles/{z}/{x}/{y}.png',
            withPopup: latLng(53.88694, 27.524572),
            withTooltip: latLng(53.88694, 27.565572),
            currentZoom: 12,
            currentCenter: latLng(53.88694, 27.554572),
            showParagraph: false,
            mapOptions: {
                zoomSnap: 0.5
            },
            showMap: true
            };
        },
        mounted() {
            this.map = this.$refs.map.mapObject;
            this.$nextTick(() => {
                this.map = this.$refs.map.mapObject;
            });                  
        },
        updated() {
            L.semiCircle(latLng(53.88694, 27.554572), { // not working
                radius: 5000,
                startAngle: 45,
                stopAngle: 360
            }).addTo(this.map);
        },
        computed: {
            ...mapGetters('targetControl', { events: 'getEvents'}),
        },
        ...
        ...
    }
</script>

【问题讨论】：

标签： javascript vue.js leaflet vue2leaflet

【解决方案1】：

我解决了这个问题：

import L from "leaflet";
import 'leaflet-semicircle';

latLng changed by L.latLng

我只是没有传单中的 L 函数

【讨论】：

【解决方案2】：

抱歉，这可能不是您需要的确切答案，但仍然需要。

我看到了几个选项：

1) 检查来源 https://github.com/vue-leaflet/Vue2Leaflet/blob/master/src/components/LCircle.vue 并基于该组件创建您自己的（Leaflet-semicircle 的 API 说这不应该是一个令人头疼的问题）

2) 检查页面https://vue2-leaflet.netlify.com/plugins/ 有一个插件列表。最接近的可能是https://github.com/ais-one/vue2-leaflet-tracksymbol 它为 vue2leaflet 添加了另一个传单插件功能

以此类推，为此创建您自己的插件

3) 骇人听闻的。您可以覆盖传单类上的原始圆形组件（我不建议这样做，但它仍然是一个选项）

【讨论】：