Vue渲染Leaflet GIS地图，边界线，点位组件

原创

已于 2025-01-21 10:44:50 修改 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #gis

于 2021-10-22 17:54:44 首次发布

本文介绍如何在Vue项目中集成Leaflet库，创建GIS地图组件，展示边界线和点位。通过安装和配置vue.js应用，利用javascript进行地图交互操作。

package.json中引入并安装：

"leaflet": "~1.4.0",
"vue2-leaflet": "^2.5.2"

组件写法：

<template>
  <div class="vue-leaflet">
    <l-map
      style="width: 100%; height: 100%"
      :zoom="map.zoom"
      :center="map.center"
      :min-zoom="map.minZoom"
      :max-zoom="map.maxZoom"
    >
      <!-- 底图 --> 
      <l-tile-layer :url="map.url" />
      <!-- 循环点位对象数组 -->
      <template v-for="(item, index) in points">
        <l-marker
          :key="index"
          :lat-lng="[item.lat, item.lng]"
          :icon="item.icon"
          @click="pointClick(item)"
        />
      </template>
      <!-- 边界线 -->
      <l-geo-json
        :geojson="map.geoJSON"
        :options-style="map.geoStyle"
      />
    </l-map>

    &l