vue-leaflet 开发总结

1. 开发下载前的准备工作:

  # 下载leaflet与leaflet.pm 地图可视化

  # leaflet 用于根据坐标自动绘制等操作，leaflet.pm可实现用户手动绘制。

  # leaflet.pm 参考网址：https://www.npmjs.com/package/leaflet.pm

  # leaflet 参考网址：https://leafletjs.com/reference-1.6.0.html

安装下载步骤:

  npm install leaflet.pm
  npm install leaflet
  npm install --save vue2-leaflet

  main.js文件里面引入如下这些配置: 

  // 引入Leaflet对象
  import 'leaflet/dist/leaflet.css' // 引入样式文件
  // 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
  import * as L from 'leaflet'
  import 'leaflet.pm'
  import 'leaflet.pm/dist/leaflet.pm.css'
  Vue.L = Vue.prototype.$L = L
  /* leaflet icon */
  delete L.Icon.Default.prototype._getIconUrl
  L.Icon.Default.mergeOptions({
    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
    iconUrl: require('leaflet/dist/images/marker-icon.png'),
    shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
  })

2.打开第一个地图的页面：

1. 先上js的写法：

<template>
  <div id="soonMap" style="width: 100%; height: 700px">
  </div>
</template>

<script>
export default {
  data () {
    return {
      soonMap: "",
    }
  },
  created(){},
  mounted(){
    this.soonMap = L.map("soonMap", {
      center: [39.864626, 116.379657], // 地图中心
      zoom: 14, //缩放比列
      zoomControl: true, //false, //禁用 + - 按钮
      doubleClickZoom: false, // 禁用双击放大
      attributionControl: true, // false // 移除右下角leaflet标识
    });
    let name = L.tileLayer(
      "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    ).addTo(this.soonMap);
    this.soonMap.pm.setLang('zh');  //设置语言  en, de, it, ru, ro, es, fr, pt_br, zh , nl
  }
}
</script>

效果图如下：

 增加一部分功能：绘制、添加标记、编辑、清除图层等功能

    this.soonMap.pm.addControls({
      position: "topleft",
      drawPolygon: false, // 添加绘制多边形
      drawMarker: false, //添加按钮以绘制标记
      drawCircleMarker: false, //添加按钮以绘制圆形标记
      drawPolyline: false, //添加按钮绘制线条
      drawRectangle:	true,	//添加按钮绘制矩形
      drawCircle: false, //  添加按钮绘制圆圈
      editMode: true, //  添加按钮编辑多边形
      dragMode: true,