leaflet地图 框选截图功能

效果

框选截图

使用leaflet的draw功能实现矩形框选功能,框选后把所框选的区域变为图片,用作下一步操作

功能的核心就是拿到框选后的范围坐标(左上角,右下角),然后转为像素坐标,然后用插件转为图片,截图框选范围。
//draw
initDraw() {
      var that = this;
      if (!that.newLayerGroup) {
        that.newLayerGroup = L.layerGroup().addTo(that.map);
      }
      that.workDraw = new L.mars.Draw({
        map: that.map,
        layer: that.newLayerGroup,
        isOnly: true, //是否唯一模式
        onCreate: function (e) {
          //创建完成后回调
          // 矩形拿到左上角,右下角坐标
          that.workDraw.hasEdit(false);
          let topLeft = e.layer._latlngs[0][1];
          let bottomRight = e.layer._latlngs[0][3];
          // 根据坐标拿到两点的像素坐标,用于后面裁剪
          // 方法是leaflet官网的
          that.screenCoor1 = that.map.latLngToContainerPoint(topLeft);
          that.screenCoor2 = that.map.latLngToContainerPoint(bottomRight);
          that.queryData();
        },
      });
    },
插件:npm install dom-to-image
引用插件:import domtoimage from “dom-to-image”

首先用插件获取到地图的dom截图,再利用canvas的裁剪功能裁剪出框选的范围
以下都是矩形画完之后的操作,画矩形用的是leaflet的draw

queryData() {
      let that = this;
      // 首先获取整个范围地图的截图,然后利用画布的裁剪功能裁出所选范围
      //获取地图dom
      var node = document.getElementById("map");
      domtoimage
        .toPng(node)
        .then(function (dataUrl) {
          that.imgUrl = dataUrl;
          // 裁剪
          that.secondCut();
        })
        .catch(function (error) {
          console.error("oops, something went wrong!", error);
        });
    },
    async secondCut() {
      //this.handleSrc是存放最终截图效果的位置
      this.handleSrc = await this.handleImg({
        src: this.imgUrl,
        rect: {
          x: this.screenCoor1.x, // 左上角横坐标
          y: this.screenCoor1.y, // 左上角纵坐标
          width: this.screenCoor2.x - this.screenCoor1.x, // 方格宽度
          height: this.screenCoor2.y - this.screenCoor1.y, // 方格高度
        },
      });
      //完成后显示截图或者进行后续操作
      this.isShow=true
    },
    //处理img
    handleImg(opts) {
      return new Promise((resolve, reject) => {
        console.log(opts);
        const { src, rect } = opts;
        if (!src || !rect) {
          reject(new Error("opts params Error!"));
        }
        const img = new Image();
        img.src = src;
        img.onload = function () {
          const canvas = document.createElement("canvas");
          const ctx = canvas.getContext("2d");
          const { x, y, width, height } = rect;
          canvas.width = width;
          canvas.height = height;
          ctx.drawImage(this, x, y, width, height, 0, 0, width, height);
          const url = canvas.toDataURL("image/png");
          resolve(url);
        };
        img.onerror = function (err) {
          reject(err);
        };
      });
    },
    ```
    

你可能感兴趣的:(javascript,前端,vue.js,leaflet)