Question

试图摆脱 Basemap 在地图上绘制轮廓，特别是从 Jupyter 笔记本中执行此操作时，我遇到了与 folium 相关的讨论：https://github.com/python-visualization/folium/issues/958。嘿！我想 - 这很棒，让我用 ipyleaflet 试试看。

下面的代码让我接近了一个可行的解决方案，但我看到了一些模糊的轮廓，如下图所示。

注意：读取数据的代码被跳过

import matplotlib.pyplot as plt
from ipyleaflet import Map, basemaps, Polygon

# generate matplotlib contours
cs = plt.contourf(lat, lon, val.T)  # note transposition to obtain correct coordinate order
# set-up map
zoom = 4
center = [50., 0.]
map = Map(basemap=basemaps.CartoDB.Positron, center=center, zoom=zoom)
# add contours as polygons
# get the pathlines of the contours with cs.allsegs
for clev in cs.allsegs:
    polygons = Polygon(
                locations=[p.tolist() for p in clev],
                color="green",
                weight=1,
                opacity=0.4,
                fill_color="green",
                fill_opacity=0.3
    )
    map.add_layer(polygons);
map

对于下图，我加载了来自 ECMWF ERA-5 再分析的数据并绘制了 2020 年 2 月的水平风速。仅选择了一个等值线来演示问题。下图中的左侧面板显示了 plt.contourf(lon, lat, val) 结果，这是正确的。右侧的面板显示了用传单绘制的轮廓。虽然大部分轮廓显示正确（请仅关注石灰绿色区域，即第二高的轮廓级别），但线段的排序似乎存在一些问题。有谁知道如何解决这个问题？

Answer 1

在下面函数 split_contours 的帮助下，代码现在按预期工作。 Path 的文档表明轮廓属性 allkinds 可能是 None。这是由下面的代码处理的。不包括的是路径段代码 3 和 4，它们对应于贝塞尔曲线。

<template>
  <section class="task">
    {{ $route.params.id }}
    <header><h2 class="task__header">Task</h2></header>
    <div class="task__title-field">
      <label for="title">Title (required)</label>
      <input
        class="task__title-input"
        type="text"
        placeholder="Title"
        id="title"
        v-model="title"
      />
    </div>
    <div class="task__description-field">
      <label for="description">Description (optional)</label>
      <textarea
        class="task__description-input"
        type="text"
        placeholder="Title"
        id="description"
        v-model="description"
        rows="10"
      />
    </div>
    <div class="task__date-field">
      <label for="date">Creation date (required)</label>
      <input
        class="task__date-input"
        type="datetime-local"
        id="date"
        v-model="created"
      />
    </div>
    <!-- <div class="task__status-field">
      <label for="status">Complited</label>
      <input type="checkbox" id="status" v-model="status" />
    </div> -->
    <button
      class="task__save-btn"
      :disabled="$v.$invalid"
      @click.prevent="save"
    >
      Save
    </button>
  </section>
</template>

<script>
import { validationMixin } from "vuelidate";
import { required } from "vuelidate/lib/validators";

export default {
  name: "Task",
  data() {
    return {
      title: "",
      description: "",
      created: "",
      status: false,
    };
  },
  methods: {
    save() {
      this.$store.commit("addNewTask", {
        title: this.title,
        description: this.description,
        created: this.created,
        status: this.status,
      });
    },
  },
  computed: {
    task() {
      return this.$store.getters.task(Number(this.$route.params.id));
    },
  },
  mixins: [validationMixin],
  validations: {
    title: {
      required,
    },
    created: {
      required,
    },
    status: {
      required,
    },
  },
};
</script>

结果如下：现在当然可以玩传单选项并使用不同的背景地图等。

用 ipyleaflet 绘制轮廓

1 个答案: