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

最新推荐文章于 2024-08-21 10:41:50 发布

Warsen Liu

最新推荐文章于 2024-08-21 10:41:50 发布

阅读量1k

点赞数 2

分类专栏： Leaflet VUE组件文章标签： vue.js 前端 javascript gis

本文链接：https://blog.csdn.net/Junyaxx/article/details/120910576

版权

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

摘要由CSDN通过智能技术生成

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)"