Question

我想在Vuelayer（用于openlayer包的vue库）中显示国家/地区的边界。但这不起作用

我使用以下网站生成了所有国家的GeoJson。 https://geojson-maps.ash.ms/

我遵循了文档https://vuelayers.github.io/#/component/polygon-geom 我使用了for循环来获取每个坐标，以获取所有国家/地区的边界，但这是行不通的。

当我使用一个国家的一个坐标而没有for循环时，它会起作用

<vl-layer-tile>
  <vl-source-osm></vl-source-osm>
</vl-layer-tile>

<vl-feature id="polygon">
  <vl-geom-polygon v-for="(data, index) in geoJSON" :coordinates="data.geometry.coordinates"></vl-geom-polygon>
</vl-feature>

import countrieslowJson from "../assets/GeoJSON/counties_lowRes.json";

Vue.use(VueLayers);

export default {
  components: {},
  data() {
    return {
      zoom: 3,
      center: [-98.8449,19.6869],
      rotation: 0,
      geolocPosition: undefined,
      geoJSON: countrieslowJson.features.properties
    };
  },
  props: [],
  methods: {}
};

我希望它显示国家的所有边界。却什么也没显示

Answer 1

您应该只访问JSON中的features，不要像下面这样深入：

geoJSON:countrieslowJson.features

并在模板中执行此操作：

<vl-feature id="polygon">
  <vl-geom-polygon v-for="(data, index) in geoJSON" :coordinates="data.geometry.coordinates"></vl-geom-polygon>
</vl-feature>

如何根据Vuelayer中的GeoJSON绘制所有国家/地区的边界？

1 个答案: