使用 Leaftejs 和 vuejs 进行图层控制

Posted 2023-02-23

【中文标题】使用 Leaftejs 和 vuejs 进行图层控制

【英文标题】：Layer control using leaftejs and vuejs

【发布时间】：2020-11-05 02:32:41

【问题描述】：

大家我是 NESAC(ISRO) 的初级开发人员。 我正在使用 vue JS 和 Leaflet JS 开发一个项目。所以我的任务是：-

使用 Leaflet JS，我必须在屏幕上呈现地图。

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

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

开发一个 Vue 应用程序，我在 components 文件夹上创建不同的组件，以便我的所有组件都通过 App.vue 文件并在 index.html 上呈现，即我的浏览器。

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

Github Link.

【问题讨论】：

没有人会给你解决方案。请阅读how-to-ask first

我很抱歉我的提问方式。我是堆栈溢出的新手。这是我的第一个问题。你能帮我解决这个问题吗？ @GrzegorzT。

在这里，我们针对某个问题提出具体问题。我们不会写出要求解决方案的问题列表 :) 例如，我已经有一些代码，但有些代码不起作用。你展示代码，最好是一些工作示例，社区会帮助你。就像在工作中的生活一样，您不会同时处理所有事情，而只处理一件事；）将这个问题列表分解为几个单独的线程。您正在处理未显示的地图，使用此问题和代码创建一个线程等。@RUP25

我对vue不太了解，但是我做了一组简单的例子说明如何在纯js中使用传单leaflet-examples祝你好运;)

【参考方案1】：

您可以为此使用 npm 包 - Vue2Leaflet

这里是文档：https://vue2-leaflet.netlify.app

以及带有 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>

它只是一个传单的包装器，您可以通过以下方式完全访问所有传单功能：

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

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