如何在 VueJS 项目中将 leaflet-semicircle 与 vue2-leaflet 一起使用?
How can I use leaflet-semicircle with vue2-leaflet in a VueJS project?
我用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>
抱歉,这可能不是您需要的确切答案,但仍然如此。
我看到几个选项:
1) 检查来源 https://github.com/vue-leaflet/Vue2Leaflet/blob/master/src/components/LCircle.vue 并基于该组件创建您自己的组件(来自 Leaflet-semicircle 的 API 说这不应该是一个令人头疼的问题)
2) 检查页面 https://vue2-leaflet.netlify.com/plugins/ there are a list of plugins. The closest one is probably https://github.com/ais-one/vue2-leaflet-tracksymbol 它为 vue2leaflet 添加了另一个传单插件功能
并通过类比创建您自己的插件
3) hacky 一个。您可以覆盖传单上的原始圆圈组件class(我不建议这样做,但它仍然是一个选项)
我解决了这个问题:
import L from "leaflet";
import 'leaflet-semicircle';
latLng changed by L.latLng
我只是没有传单中的 L 功能
我用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>
抱歉,这可能不是您需要的确切答案,但仍然如此。
我看到几个选项:
1) 检查来源 https://github.com/vue-leaflet/Vue2Leaflet/blob/master/src/components/LCircle.vue 并基于该组件创建您自己的组件(来自 Leaflet-semicircle 的 API 说这不应该是一个令人头疼的问题)
2) 检查页面 https://vue2-leaflet.netlify.com/plugins/ there are a list of plugins. The closest one is probably https://github.com/ais-one/vue2-leaflet-tracksymbol 它为 vue2leaflet 添加了另一个传单插件功能
并通过类比创建您自己的插件
3) hacky 一个。您可以覆盖传单上的原始圆圈组件class(我不建议这样做,但它仍然是一个选项)
我解决了这个问题:
import L from "leaflet";
import 'leaflet-semicircle';
latLng changed by L.latLng
我只是没有传单中的 L 功能