vue中操作leatlet(二)

leaflet使用案列

初始化综合代码

<template>
    <div>
    <div id="map"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        map: ""
    };
  },
  mounted() {
    this.initDate();
  },
  methods: {
    initDate() {
      this.map = L.map("map", {
        center: [40.02404009136253, 116.50641060224784], // 地图中心
        zoom: 14, //缩放比列
        zoomControl: false, //禁用 + - 按钮
        doubleClickZoom: false, // 禁用双击放大
        attributionControl: false // 移除右下角leaflet标识
      });
      let name = L.tileLayer(
        "http://mt0.google.cn/vt/lyrs=y@160000000&hl=zh-CN&gl=CN&src=app&y={y}&x={x}&z={z}&s=Ga",
      ).addTo(this.map);
    }
  }
};
</script>

<style lang="stylus" scoped>
#map {
  width: 100%;
  height: calc(100vh);
  z-index: 1;
}
</style>

根据坐标绘制矩形

let latlngs = [
        [40.0214690112063, 116.50239229202272],
        [40.019694293123855, 116.50224208831787],
        [40.01979288978388, 116.50580406188966],
        [40.021436146476105, 116.50601863861085],
        [40.02253710631967, 116.50316476821901]
      ];
 this.drawObj = L.polygon(latlngs, { color: "red" }).addTo(this.map);
 this.drawObj.bindTooltip('this is 个多边形');
// color：线段颜色
// weight：线段宽度
// opacity：线段透明度
// dashArray：虚线间隔
// fill：是否填充内部(true/false)
// fillColor:内部填充颜色，如不设置，默认为color颜色
// fillOpacity：内部填充透明度
 this.drawRadius = L.circle([40.0224690112063, 116.51339229202272], {
        radius: 200
      }).addTo(this.map);

开启绘制图像的编辑功能

this.drawObj.pm.enable({
    allowSelfIntersection: false
});
this.drawRadius.pm.enable({
    allowSelfIntersection: false
});

监听绘制后的坐标

this.drawObj.on("pm:edit", obj => {
    obj.target.setStyle({ color: "orange" });
    console.log(obj.target._latlngs[0]);
});

this.drawRadius.on("pm:edit", obj => {
    obj.target.setStyle({ color: "orange" });
    console.log(obj.target._latlng);
});

添加点击事件

this.drawObj.on("keydown", e=>{
    alert("我是矩形点击事件")
});
this.drawRadius.on("click", e=>{
    alert("我是圆形点击事件")
});
/*
click: 点击事件
dblclick：双击	
mousedown：按下鼠标按钮
mouseup：释放鼠标按钮
mouseover：鼠标进入
mouseout：鼠标离开
mousemove：鼠标移入
contextmenu：鼠标右键
preclick：点击之前
*/

移除点击事件

this.drawObj.off("click")
this.drawRadius.off("click")

将图行置为顶层

    changePplygon() {
      this.drawRadius.bringToBack(); // 置为顶层
      //   this.drawObj.bringToFront(); // 置为底层
    },

将修改完的多边形还原

this.drawObj.setLatLngs([
    [40.0214690112063, 116.50239229202272],
    [40.019694293123855, 116.50224208831787],
    [40.01979288978388, 116.50580406188966],
    [40.021436146476105, 116.50601863861085],
    [40.02253710631967, 116.50316476821901]
]);
this.drawObj.setStyle({ color: "red" });
this.drawObj.pm.disable();

获取对象的边界值

this.drawObj.getLatLngs()