Vue2Leaflet（基于vue的leafLet）封装的图片打点功能移动端与pc端同样适用【自用】

有蝉

已于 2022-03-13 15:26:02 修改

阅读量775

点赞数

分类专栏： vue 文章标签： Leaflet

于 2020-04-20 08:54:46 首次发布

本文链接：https://blog.csdn.net/qq_37899792/article/details/103723009

版权

本文介绍了如何使用Vue2Leaflet库在移动端和PC端进行图片打点功能的封装，详细讲解了从安装leaflet和vue2-leaflet到在main.js中引入的步骤。

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

安装leaflet

cnpm i leaflet -S

安装vue2-leaflet

cnpm i vue2-leaflet -S

main.js中引入

Vue.config.productionTip = false

import 'leaflet/dist/leaflet.css';

<comment>
  平面图标记 
  传参说明 见props
</comment>
<template>
  <div id="leafLet">
    <l-map
      ref="map"
      :zoom="zoom"
      :min-zoom="minZoom"
      :max-zoom="maxZoom"
      :center="center"
      :crs="crs"
      :options="{zoomControl: false,zoomAnimationThreshold:20}"
      :max-bounds="bounds"
      style="width:100%;height:600px"
      @update:center="centerUpdate"
      @update:zoom="zoomUpdate"
    >
      <!-- 图片的图层 -->
      <template>
        <l-image-overlay
          :url="url"
          :bounds="bounds"
          :options="{interactive:true}"
          @click="addPoint"
        />
      </template>
      <!-- 标记图层 -->
      <template>
        <l-marker
          v-for="(point,index) in points"
          :key="index"
          :lat-lng="point"
          :visible="showPoint"
          :options="{permanent: true}"
        >
          <!-- <l-icon :icon-url="!point.old&&type=='edit'?warningIcon:primaryIcon" /> -->
          <l-to