vue2-leaflet使用

文章目录

• vue2-leaflet使用
• 前言
• 一、vue2-leaflet使用引用？
• 二、获取vue中的地图元素
• • 1.找到vue中的地图对象，并保存成this.map
  • 2.绑定事件
  • 3.地图数据问题
  • 常用且重要的属性
• 总结

---

前言

关于vue2-leaflet使用过程中踩过许多坑，因为网上关于这个的使用比较少，资料不好找，本篇文章介绍了一些比较使用的技巧

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、vue2-leaflet使用引用？

关于怎么在vue项目中引用vue2-leaflet就不多介绍了，这里贴一个链接，写的很详细了，
https://blog.csdn/huangli0/article/details/80144544

二、获取vue中的地图元素

1.找到vue中的地图对象，并保存成this.map

定义一个函数，通过this.$refs.myMap.mapObject获取地图元素，在函数@ready="doSomethingOnReady()这里地图加载完成，获取vue中的地图元素，这一步非常重要，后面所有的绑定事件都需要操作这个对象来解决。

      <l-map
        v-if="isMapShow"
        id="offline"
        ref="myMap"
        :zoom="zoom"
        :options="leafletMapOptions"
        :min-zoom="minZoom"
        :max-zoom="maxZoom"
        :center="center"
        :zoom-control="zoomControl"
        :max-bounds="maxBounds"
        @ready="doSomethingOnReady()"
        @update:zoom="zoomUpdated"
        @update:center="centerUpdated"
        @update:bounds="boundsUpdated">
 doSomethingOnReady() {
      this.map = this.$refs.myMap.mapObject
    },

2.绑定事件

1.   控制地图的可以缩放   this.map.dragging.enable()
   

2.   控制地图的不可以缩放 this.map.dragging.disable()
   

3.   绑定鼠标移动事件  this.map.on('mousemove', this.onMove)
   

4.   解绑定鼠标移动事件   this.map.off('mousemove') 或者     this.map.removeEventListener('mousemove', this.clickMap)
   

5.  其他绑定事件同理
   

3.地图数据问题

看瓦片的选择，可以使用高德地图的数据，但是需要纠偏
假如使用的瓦片是高德的瓦片就不需要纠偏，但是不是的话就需要纠偏
main.js中引入coordtransform，并绑定到vue实例上

import coordtransform from 'coordtransform'
Vue.prototype.coordtransform = coordtransform

 const itemxy = this.coordtransform.gcj02towgs84(item.longitude, item.latitude)

几种常见的转换没有分类，试试那个对用哪个，自己动手丰衣足食，哈哈哈

    bd09togcj02: bd09togcj02,
    gcj02tobd09: gcj02tobd09,
    wgs84togcj02: wgs84togcj02,
    gcj02towgs84: gcj02towgs84

常用且重要的属性

1.maxBounds控制地图的最大显示范围，非常有用，可以避免地图出现下载瓦片以外的空白部分

maxBounds: [[41.86272153308772, 123.77815246582033], [41.71047016863573, 123.40852260589601]],

2.缩放属性，可以在方法中随意设置，调整方便

    zoom: 15,
    minZoom: 14,
    maxZoom: 18,

3.设置地图左下角的显示数据

attribution: 'xxxxx有限公司',

4.在地图上画东西

<l-rectangle :bounds="rectangle.bounds" :l-style="rectangle.style"/>

rectangle: {
        bounds: [[41.835755, 123.740053], [41.835755, 123.740053]],
        style: { color: '#ffffff', weight: 3, fillOpacity: 0.2 }
      },

总结

最后附带几个学习网址，希望可以帮助到你
1.这个是vue2-leaflet官网示例：
https://vue2-leafletlify.app/components/LIcon.html#demo
2.这个是翻译的leaflet官方文档，
http://www.360doc/content/20/0818/01/21412_930867142.shtml
LeafLet js官网: http://leafletjs/examples.html
LeafLet js官网demo: http://leafletjs/examples.html
LeafLet js官网API: http://leafletjs/reference-1.3.0.html