使用 GeoJson 在 Nuxt 中的 Leafleat 中弹出

Question

我有一个 nuxt 3 网站。我添加了一个显示 geojson 多边形的传单地图。 我想在每个多边形上显示一个弹出窗口。弹出窗口将显示来自 geojson 的信息。 我无法让弹出窗口工作。

谢谢！

<script setup>
  const url = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
  const attribution = 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
  const zoom= ref(6)
  const center = [47.313220, -1.319482]
  const datageo = ref(undefined)
  onMounted(async () => {
  const response = await fetch(
      "data/merged.geojson"
    );
    datageo.value = await response.json();
  });

  const geoStyler = (feature) => {
    const etat = feature.properties["Etat de la"]
    if (etat === "V") {
      return {
        color: "#F23030",
        fillColor: "#F23030",
        stroke: true
      }
    } else if (etat === "C") {
      return {
        color: "#267365",
        fillColor: "#267365",
        stroke: true
      }
    } else if (etat === "S") {
      return {
        color: "#F29F05",
        fillColor: "#F29F05",
        stroke: true
      }
    } else {
      return {
        color: "gray",
        fillColor: "gray",
        stroke: true
      }
    }
  }

  const getPopup = (feature) => { 
      const etat = feature.properties["Etat de la"]
      return "truc"
  }

</script>

<style>
  body {
    margin: 0;
  }
</style>

<template>
  <div style="height:100vh; width:100vh">
    <LMap
      ref="map"
      :zoom="zoom"
      :center="center"
    >
      <LTileLayer
        :url="url"
        :attribution="attribution"
        layer-type="base"
        name="OpenStreetMap"
      />
      <LGeoJson 
        :geojson="datageo"
        :options-style="geoStyler">
        <LPopup
          :content="getPopup">
        </LPopup>
      </LGeoJson>
    </LMap>
  </div>
</template>

我尝试过使用纯文本并且它有效。但我无法捕获每个多边形的信息。

Answer 1

1. 更新 getPopupContent 函数，以便它将特征作为参数，以便从属性对象中提取信息。

2. 直接将 LPopup 与 LGeoJson 一起使用

<script setup>
  import { ref, onMounted } from 'vue';

  const url = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}';
  const attribution = 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community';
  const zoom = ref(6);
  const center = [47.313220, -1.319482];
  const datageo = ref(undefined);

  onMounted(async () => {
    const response = await fetch('data/merged.geojson');
    datageo.value = await response.json();
  });

  const geoStyler = (feature) => {
    const etat = feature.properties["Etat de la"];
    if (etat === "V") {
      return {
        color: "#F23030",
        fillColor: "#F23030",
        stroke: true
      };
    } else if (etat === "C") {
      return {
        color: "#267365",
        fillColor: "#267365",
        stroke: true
      };
    } else if (etat === "S") {
      return {
        color: "#F29F05",
        fillColor: "#F29F05",
        stroke: true
      };
    } else {
      return {
        color: "gray",
        fillColor: "gray",
        stroke: true
      };
    }
  };

  const getPopupContent = (feature) => {
    const etat = feature.properties["Etat de la"];
    return `Etat: ${etat}`;
  };
</script>

<style>
  body {
    margin: 0;
  }
</style>

<template>
  <div style="height: 100vh; width: 100vh">
    <LMap
      ref="map"
      :zoom="zoom"
      :center="center"
    >
      <LTileLayer
        :url="url"
        :attribution="attribution"
        layer-type="base"
        name="OpenStreetMap"
      />
      <LGeoJson 
        :geojson="datageo"
        :options-style="geoStyler"
      >
        <LPopup :content="getPopupContent" />
      </LGeoJson>
    </LMap>
  </div>
</template>