Leaflet 使用leaftejs和vuejs的层控制

我是NESAC（ISRO）的初级开发人员。 我正在与vue JS和传单JS合作一个项目。因此，我的任务是：-

使用传单JS，我必须在屏幕上渲染地图

在渲染地图上的“n”特定位置设置标记

创建一个带有复选框的侧边栏，复选框包含各种实体，如城市、餐馆、公园等

开发一个Vue应用程序，以便我在components文件夹中创建不同的组件，以便我的所有组件都通过app.Vue文件并在index.html（即我的浏览器）上进行渲染

现在我必须做一个图层控制函数，这样我的每个实体都会得到不同的反应。如果我点击侧边栏上的餐厅复选框，那么我所有的餐厅传单标记都应该显示在屏幕上，但每个实体都应该有不同的反应性

---

您可以使用npm软件包进行以下操作-

以下是文件：

带有Vue.js和传单的简单地图：

<template>

  <div style="height: 350px;">
    <div class="info" style="height: 15%">
      <span>Center: {{ center }}</span>
      <span>Zoom: {{ zoom }}</span>
      <span>Bounds: {{ bounds }}</span>
    </div>
    <l-map
      style="height: 80%; width: 100%"
      :zoom="zoom"
      :center="center"
      @update:zoom="zoomUpdated"
      @update:center="centerUpdated"
      @update:bounds="boundsUpdated"
    >
      <l-tile-layer :url="url"></l-tile-layer>
    </l-map>
  </div>
</template>

<script>
import {LMap, LTileLayer} from 'vue2-leaflet';

export default {
  components: {
    LMap,
    LTileLayer,
  },
  data () {
    return {
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      zoom: 3,
      center: [47.413220, -1.219482],
      bounds: null
    };
  },
  methods: {
    zoomUpdated (zoom) {
      this.zoom = zoom;
    },
    centerUpdated (center) {
      this.center = center;
    },
    boundsUpdated (bounds) {
      this.bounds = bounds;
    }
  }
}
</script>

---

我认为这对你来说是一个好的开始。

没有人会给你一个解决方案。请阅读我对我提问的方式感到抱歉。我不熟悉堆栈溢出。这是我的第一个问题。你能帮我解决这个问题吗@GrzegorzT.这里我们就一个问题问一些具体的问题。我们不会列出一个问题清单，要求解决：）例如，我已经有了一些代码，但有些东西不起作用。您将展示代码，最好是一些工作示例，社区将为您提供帮助。就像在工作生活中一样，你不会一次完成所有的事情，而只是在一件事情上；）将此问题列表分解为几个单独的线程。您正在处理一个没有显示的地图，您创建了一个带有此问题和代码的线程，等等@RUP25I对vue了解不多，但我制作了一组简单的示例，说明如何在纯js中使用传单祝您好运；）

mounted() {
    this.$nextTick(() => {
      this.map = this.$refs.map.mapObject;
    });
}