leaflet+vue：格点图的实现大体步骤

Crazy_GirlLL

于 2021-03-19 14:34:29 发布

阅读量1.2k

点赞数

分类专栏： leaflet VUE 文章标签： leaflet 前端

本文链接：https://blog.youkuaiyun.com/Crazy_GirlLL/article/details/115005556

版权

本文介绍了如何在Leaflet和Vue框架下实现格点图。过程类似于色斑图的实现，主要涉及处理包含经纬度和数据的格点数组。在Vue组件间通过事件总线传递数据进行地图渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

格点图的实现步骤和色斑图的实现步骤差不多，

格点数据的格式是一个个包含经纬度，数据的对象数组

下面是这个色斑图的具体代码

在map组件里面：bus.$emit('loaded', this.id);

初始化页面index.vue：将数据传给色斑图组件：

Bus.$on('refreshPoint', (data) => this.getPoints(data))

在要显示色斑图的地方，传输数据： Bus.$emit('refreshPoint', { data })

<template>
  <div></div>
</template>

<script>
import bus from '~/plugins/bus'
export default {
  props: {
    pointData: {
      type: Array