I use Vue2Leaflet and Leaflet-semicircle. I don’t have a problem when using Vue2Leaflet, but I don’t know how to use Leaflet-semicircle in my VueJS project.
<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>
Advertisement
Answer
I resolved this problem:
import L from "leaflet"; import 'leaflet-semicircle'; latLng changed by L.latLng
I just didn’t have L function from leaflet