Vue工程搭建Leaflet项目第三弹：绘制几何对象（点、线、面）

已于 2022-09-03 12:59:07 修改
阅读量3.2k 收藏 15
点赞数 2
分类专栏： WebGIS Leaflet API Web 文章标签： vue.js javascript 前端
于 2022-02-13 12:48:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45015198/article/details/122896742
版权
WebGIS 同时被 3 个专栏收录
8 篇文章 4 订阅
订阅专栏
Leaflet API
7 篇文章 5 订阅
订阅专栏
Web
4 篇文章 0 订阅
订阅专栏

前言

在leaflet中绘制几何对象很简单，通过鼠标单击事件、移动事件获取地图坐标并存储到几何对象中，通过双击事件或者右键事件结束绘制。可以通过添加已经实现了的绘制插件完成，也可以自定义绘制事件绘制几何对象。

地图事件应该写为方法的形式，不然关闭绘制点事件的时候会关闭绘制线和面的事件。同理，线和面也如此

一、自定义事件绘制

（1）绘制点

    pointClick() {
      if (this.isPointClicked) {
        // 第二次点击的时候退出绘制
        this.isPointClicked = false;
        return;
      }
      this.isPointClicked = true;
      this.isPolylineClicked = false;
      this.isPolygonClicked = false;
      if (window._map) {
        this.map = window._map;
        // 关闭地图双击事件
        this.map.doubleClickZoom.disable();
      }
      if (this.isPointClicked) {
        this.setCursor("crosshair");
      }
      console.log(window._map);
      const circleOption = {
        radius: 10,
        fill: true,
        color: "red",
        weight: 3.5, // 边线宽度：单位像素值
        opacity: 1, // 边线透明度
        fillColor: "red",
        fillOpacity: 1 // 最好设置透明度，默认值0.2
      };
      const onClick = evt => {
        console.log(evt.latlng);
        L.circle(evt.latlng, circleOption).addTo(this.map);
      };
      this.map.on("click", onClick);
      this.map.on("dblclick", () => {
        // 关闭单击事件
        this.map.off({ click: onClick });
        this.setCursor("pointer");
        // 开启双击事件
        this.map.doubleClickZoom.enable();
      });
    },

（2）绘制线

    polylineClick() {
      if (this.isPolylineClicked) {
      	// 第二次点击的时候退出绘制
        this.isPolylineClicked = false;
        return;
      }
      this.isPolylineClicked = true;
      this.isPointClicked = false;
      this.isPolygonClicked = false;

      if (window._map) {
        this.map = window._map;
        // 关闭地图双击事件
        this.map.doubleClickZoom.disable();
      }
      if (this.isPolylineClicked) {
        this.setCursor("crosshair");
      }
      const latlngs = [];
      // circle 样式
      const circleOption = {
        radius: 10,
        fill: true,
        color: "#ffb61e",
        weight: 3.5, // 边线宽度：单位像素值
        opacity: 1, // 边线透明度
        fillColor: "blue",
        fillOpacity: 1 // 最好设置透明度，默认值0.2
      };

      // 线段样式
      const polylineOption = {
        stroke: true, // 开启路径追踪,默认为true
        color: "yellow"
      };
      // 绘制线段
      const polyline = L.polyline(latlngs, polylineOption);
      // 临时线段
      const tempLine = L.polyline([], polylineOption);
      console.log(tempLine);
      const onClick = evt => {
        latlngs.push([evt.latlng.lat, evt.latlng.lng]);
        const circle = L.circle(evt.latlng, circleOption);
        circle.addTo(this.map);
        polyline.addLatLng(evt.latlng);
        polyline.addTo(this.map);
      };
      this.map.on("click", onClick);
      const onMouseMove = evt => {
        if (latlngs.length > 0) {
          // 添加临时线段
          const coords = [
            latlngs[latlngs.length - 1],
            [evt.latlng.lat, evt.latlng.lng]
          ];
          tempLine.setLatLngs(coords);
          this.map.addLayer(tempLine);
        }
      };
      this.map.on("mousemove", onMouseMove);

      // 双击结束绘制
      this.map.on("dblclick", () => {
        // 关闭单击事件
        this.map.off({ click: onClick, mousemove: onMouseMove });
        this.setCursor("pointer");
        // 开启双击事件
        this.map.doubleClickZoom.enable();
      });
    },

（3）绘制面

   polygonClick() {
      if (this.isPolygonClicked) {
      	// 第二次点击的时候退出绘制
        this.isPolygonClicked = false;
        return;
      }
      this.isPolygonClicked = true;
      this.isPointClicked = false;
      this.isPolylineClicked = false;
      if (!this.isPolygonClicked) {
        return;
      }
      if (window._map) {
        this.map = window._map;
        // 关闭地图双击事件
        this.map.doubleClickZoom.disable();
      }
      if (this.isPolygonClicked) {
        this.setCursor("crosshair");
      }
      const latlngs = [];
      // circle 样式
      const circleOption = {
        radius: 10,
        fill: true,
        color: "#ffb61e",
        weight: 3.5, // 边线宽度：单位像素值
        opacity: 1, // 边线透明度
        fillColor: "blue",
        fillOpacity: 1 // 最好设置透明度，默认值0.2
      };

      // 线段样式
      const polylineOption = {
        stroke: true, // 开启路径追踪,默认为true
        color: "yellow"
      };
      const polyline = L.polyline(latlngs, polylineOption);
      const tempLine = L.polyline([], polylineOption);
      const polygon = L.polygon(latlngs, polylineOption);
      const onClick = evt => {
        latlngs.push([evt.latlng.lat, evt.latlng.lng]);
        L.circle(evt.latlng, circleOption).addTo(this.map);
        polyline.addLatLng(evt.latlng);
        polyline.addTo(this.map);
        polygon.addLatLng(evt.latlng);
        polygon.addTo(this.map);
      };
      this.map.on("click", onClick);
      const onMouseMove = evt => {
      	// 至少有一个点才添加临时线段
        if (latlngs.length > 0) {
          //面的临时线段坐标顺序[起点，鼠标移动点，最后一次点击点]
          tempLine.setLatLngs([
            latlngs[0],
            evt.latlng,
            latlngs[latlngs.length - 1]
          ]);
          //tempLine.setLatLngs([[latlngs[0],]])
          tempLine.addTo(this.map);
          polygon.setLatLngs([...latlngs, evt.latlng]);
        }
      };
      this.map.on("mousemove", onMouseMove);

      this.map.on("dblclick", () => {
        // 关闭单击事件
        this.map.off({ click: onClick, mousemove: onMouseMove });
        this.setCursor("pointer");
        // 开启双击事件
        this.map.doubleClickZoom.enable();
      });
    },

二、添加绘制插件

emoji

三、完整代码

<template>
  <div class="toolbar-container">
    <button :class="isPointClicked?'active':''" @click="pointClick">点</button>
    <button :class="isPolylineClicked?'active':''" @click="polylineClick">线</button>
    <button :class="isPolygonClicked?'active':''" @click="polygonClick">面</button>
    <button @click="clearAll">清除</button>
  </div>
</template>

<script>
import L from "leaflet";
export default {
  name: "ToolBar",
  components: {},
  data() {
    return {
      map: undefined,
      isPointClicked: false,
      isPolylineClicked: false,
      isPolygonClicked: false,
      isClear: false
    };
  },
  watch: {
    isPointClicked(val) {
      if (!val) {
        // 清除监听事件
        // this.map.clearAllEventListeners();
      }
    },
    isPolylineClicked(val) {
      if (!val) {
        // 清除监听事件
        //this.map.clearAllEventListeners();
      }
    },
    isPolygonClicked(val) {
      if (!val) {
        // 清除监听事件
        // this.map.clearAllEventListeners();
      }
    }
  },
  created() {
    //console.log("aaaaaa")
  },
  methods: {
  // 地图事件应该写为方法的形式，不然关闭绘制点事件的时候会关闭绘制线和面的事件。同理，线和面也如此
    pointClick() {
      if (this.isPointClicked) {
        this.isPointClicked = false;
        return;
      }
      this.isPointClicked = true;
      this.isPolylineClicked = false;
      this.isPolygonClicked = false;
      if (window._map) {
        this.map = window._map;
        // 关闭地图双击事件
        this.map.doubleClickZoom.disable();
      }
      if (this.isPointClicked) {
        this.setCursor("crosshair");
      }
      console.log(window._map);
      const circleOption = {
        radius: 10,
        fill: true,
        color: "red",
        weight: 3.5, // 边线宽度：单位像素值
        opacity: 1, // 边线透明度
        fillColor: "red",
        fillOpacity: 1 // 最好设置透明度，默认值0.2
      };

      const onClick = evt => {
        console.log(evt.latlng);
        L.circle(evt.latlng, circleOption).addTo(this.map);
      };
      this.map.on("click", onClick);
      this.map.on("dblclick", () => {
        // 关闭单击事件
        this.map.off({ click: onClick });
        this.setCursor("pointer");
        // 开启双击事件
        this.map.doubleClickZoom.enable();
      });
    },
    polylineClick() {
      if (this.isPolylineClicked) {
        this.isPolylineClicked = false;
        return;
      }
      this.isPolylineClicked = true;
      this.isPointClicked = false;
      this.isPolygonClicked = false;

      if (window._map) {
        this.map = window._map;
        // 关闭地图双击事件
        this.map.doubleClickZoom.disable();
      }
      if (this.isPolylineClicked) {
        this.setCursor("crosshair");
      }
      const latlngs = [];
      // circle 样式
      const circleOption = {
        radius: 10,
        fill: true,
        color: "#ffb61e",
        weight: 3.5, // 边线宽度：单位像素值
        opacity: 1, // 边线透明度
        fillColor: "blue",
        fillOpacity: 1 // 最好设置透明度，默认值0.2
      };

      // 线段样式
      const polylineOption = {
        stroke: true, // 开启路径追踪,默认为true
        color: "yellow"
      };
      // 绘制线段
      const polyline = L.polyline(latlngs, polylineOption);
      // 临时线段
      const tempLine = L.polyline([], polylineOption);
      console.log(tempLine);
      const onClick = evt => {
        latlngs.push([evt.latlng.lat, evt.latlng.lng]);
        const circle = L.circle(evt.latlng, circleOption);
        circle.addTo(this.map);
        polyline.addLatLng(evt.latlng);
        polyline.addTo(this.map);
      };
      this.map.on("click", onClick);
      const onMouseMove = evt => {
        // 至少有一个点才添加临时线段
        if (latlngs.length > 0) {
          // 添加临时线段
          const coords = [
            latlngs[latlngs.length - 1],
            [evt.latlng.lat, evt.latlng.lng]
          ];
          tempLine.setLatLngs(coords);
          this.map.addLayer(tempLine);
        }
      };
      this.map.on("mousemove", onMouseMove);

      // 双击结束绘制
      this.map.on("dblclick", () => {
        // 关闭单击事件
        this.map.off({ click: onClick, mousemove: onMouseMove });
        this.setCursor("pointer");
        // 开启双击事件
        this.map.doubleClickZoom.enable();
      });
    },
    polygonClick() {
      if (this.isPolygonClicked) {
        this.isPolygonClicked = false;
        return;
      }
      this.isPolygonClicked = true;
      this.isPointClicked = false;
      this.isPolylineClicked = false;
      if (!this.isPolygonClicked) {
        return;
      }
      if (window._map) {
        this.map = window._map;
        // 关闭地图双击事件
        this.map.doubleClickZoom.disable();
      }
      if (this.isPolygonClicked) {
        this.setCursor("crosshair");
      }
      const latlngs = [];
      // circle 样式
      const circleOption = {
        radius: 10,
        fill: true,
        color: "#ffb61e",
        weight: 3.5, // 边线宽度：单位像素值
        opacity: 1, // 边线透明度
        fillColor: "blue",
        fillOpacity: 1 // 最好设置透明度，默认值0.2
      };

      // 线段样式
      const polylineOption = {
        stroke: true, // 开启路径追踪,默认为true
        color: "yellow"
      };
      const polyline = L.polyline(latlngs, polylineOption);
      const tempLine = L.polyline([], polylineOption);
      const polygon = L.polygon(latlngs, polylineOption);
      const onClick = evt => {
        latlngs.push([evt.latlng.lat, evt.latlng.lng]);
        L.circle(evt.latlng, circleOption).addTo(this.map);
        polyline.addLatLng(evt.latlng);
        polyline.addTo(this.map);
        polygon.addLatLng(evt.latlng);
        polygon.addTo(this.map);
      };
      this.map.on("click", onClick);
      const onMouseMove = evt => {
        // 至少有一个点才添加临时线段
        if (latlngs.length > 0) {
          //面的临时线段坐标顺序[起点，鼠标移动点，最后一次点击点]
          tempLine.setLatLngs([
            latlngs[0],
            evt.latlng,
            latlngs[latlngs.length - 1]
          ]);
          //tempLine.setLatLngs([[latlngs[0],]])
          tempLine.addTo(this.map);
          polygon.setLatLngs([...latlngs, evt.latlng]);
        }
      };
      this.map.on("mousemove", onMouseMove);

      this.map.on("dblclick", () => {
        // 关闭单击事件
        this.map.off({ click: onClick, mousemove: onMouseMove });
        this.setCursor("pointer");
        // 开启双击事件
        this.map.doubleClickZoom.enable();
      });
    },
    // 设置鼠标状态
    setCursor(state) {
      if (this.map) {
        this.map._container.style.cursor = state;
      }
    },

    // 清除图形
    clearAll() {
      this.isPointClicked = false;
      this.isPolylineClicked = false;
      this.isPolygonClicked = false;
      if (this.map) {
        this.map.eachLayer(layer => {
          if (!layer.options.layerName) {
            // debugger;
            layer.remove();
          }
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.toolbar-container {
  position: absolute;
  top: 100px;
  margin-left: 10px;
  z-index: 9999;
  button {
    display: block;
    width: 35px;
    height: 35px;
    border: none;
    border: 1px solid #ddd;
    border-bottom: none;
    cursor: pointer;
    &:hover {
      background: #ddd;
    }
  }
  button:last-child {
    border-bottom: 1px solid #ddd;
  }
}
.active {
  background: #ddd;
}
/deep/.el-button + .el-button {
  margin-left: 0;
}
</style>>

四、页面展示

在这里插入图片描述

欢迎大家关注我的公众号，我也会在公众号同步更新。

若大家对进阶打怪有兴趣的话，欢迎订阅以下专栏

地址：WebGIS入门和进阶实战

项目地址，请查阅

地址：leaflet-app

GIS之路
关注
  • 2
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
leaflet-线的绘制与带箭头的线
s_9527_s的博客
03-15 5886
1.创建空的图层组 this.xiangroup = L.featureGroup([]) //创建图层 this.map.addLayer(this.xiangroup) 2.绘制,使用L.polyline（记住两点一线，如果只有一个点的经纬度，是没有线的） var latlngs = [ //线中点的经纬度点 [38, 0], [38, 180], [0, 0] ] this.polyline = L.polyline(latlngs, { color: 'r...
【vue+leaflet】vue项目中使用leaflet绘制室内平面图、leaflet.pm在平面图中绘制点、线、面图层(一)
02-19
vue项目中使用leaflet绘制室内平面图、leaflet.pm在平面图中绘制点、线、面图层(一),cv可用 vue项目中使用leaflet绘制室内平面图、leaflet.pm在平面图中绘制点、线、面图层(一),cv可用 vue项目中使用leaflet绘制室内...
（一）leaflet+vue3基础，实现多地图切换，以及标记功能
a974313302的博客
03-14 740
vue3+leaflet实现多种底图切换，自定义控件加载，marker点击标记以及取消功能。
Leaflet教程，英文/国际版地图，vue项目集成Leaflet
最新发布
qq_16785561的博客
05-07 1404
Leaflet是一个轻量级的Web地图库，它支持多种平台和浏览器，并具有广泛的功能、良好的性能以及易用性。轻量级：Leaflet的文件大小较小，加载速度快，特别适合在移动设备和低带宽环境下使用。易用性：Leaflet提供了简单直观的API，使开发者能够快速上手并创建交互式地图。可定制性：Leaflet支持自定义图层、标记样式和交互行为，开发者可以根据自己的需求进行定制。跨平台兼容性：Leaflet可以在各种现代浏览器和移动设备上运行，并且与多种前端框架（如React、Vue等）兼容。
在Vue中使用Leaflet 基础使用，绘制点，多边形，圆形，比列尺，单击事件（保姆级详解）
weixin_54586234的博客
09-03 3838
在Vue中使用Leaflet 基础使用，绘制点，多边形，圆形，比列尺，单击事件（保姆级详解）
LeaFlet学习之动态绘制图形
HPUGIS的博客
07-13 5431
底图使用mapbox设置样式加载的，由于mapbox我也只会简单的应用在这里就不多说了，本文主要讲的是动态图形的绘制写的比较糙，代码重复太多，仅为展示所用，可以动态绘画点，线，圆，多边形。一、概述主要的用的就是事件click、mousedown、mousemove、mouseup事件，Leaflet对绘图好像没有怎么封装，我们要想自己动态绘制主要通过事件自己实现，代码不难，简单易懂。二、底图加载 ...
leaflet实现自定义线、矩形和扇形的绘制
liuchao的博客
11-27 2166
采用原生的leaflet的API实现自定义线、矩形和扇形的绘制。完成自定义线、矩形、扇形的绘制。
vue+leaflet笔记之地图网格
fungis
06-30 2967
本文介绍了Web端使用Leaflet开发库显示地图经纬网和标准图幅网格的方法。地图格网是由间隔均匀的横向线和纵向线组成的网络，用于在地图上识别各个位置。 经纬网通过在地图上描绘纬度和经度格网，用于表示地图的地理坐标；标准图幅网格通过在地图上展示不同比例尺下的网格图幅号与点击查询地图范围，用于描绘地图的位置、比例尺等信息。
【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)
03-01
【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)cv可用 【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)cv可用 【vue+leaflet+elementUI】vue项目中在...
Cesium动态绘制面，线，点.vue
09-17
c
Vue2Leaflet：单张地图的Vue 2组件
02-06
Vue2传单 Vue2Leaflet是用于框架JavaScript库，该库包装使创建React式地图变得容易。如何安装npm install vue2-leaflet leaflet --save 有关更多详细信息，您可以遵循《从1.xx到2.xx的重大更改新的主要版本2.0.0可用...
59.（leaflet篇）leaflet动态画线.zip
12-24
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/122121747
leaflet-project：该项目的目标是显示有关世界各地过去7天地震位置和震级的多个交互式地图。 项目中使用了Javascript-Leaflet库，HTML，CSS，Bootstrap和Javascript。 Mapbox-API还用于加载基本地图
02-15
最近7天内地震的位置和震级 项目描述 该项目的目标是显示多幅互动地图，以及世界各地过去7天的地震位置和震级。 项目中使用了Javascript-Leaflet库， HTML ， CSS ， Bootstrap和Javascript 。 Mapbox-API还用于加载基本地图。 该项目分为两个步骤，具有不同的复杂度。 步骤1：使用单个基础层和一组数据： 基本层： 数据层源和数据： 资料来源： 数据： 步骤2：包括多个可选的交互式基础层。 包括了其他数据集和图表，用户可以激活和停用它们。 基层： 数据层源和数据： 第1层地震信息 资料来源： 数据： 第2层：构造板块 资料来源： 数据： 必需的库（已包含在index.html文件中） D3 JavaScript 传单 示例应用截图 步骤1： 第2步： 指示 脚步 下载或克隆此仓库中包含的所有文件。 创建您的。 在/
leaflet椭圆绘制插件
04-02
leaflet没有直接绘制椭圆的接口，引用此插件可以方便的绘制椭圆。
一套leaflet二维地图框架和基础项目
01-18
MarsGIS for Leaflet地图框架 是火星科技研发的一个Web地图开发平台系统，是火星科技团队成员多年GIS开发和Leaflet使用的技术沉淀。基于Leaflet和现代Web技术栈全新构建， 集成了领先的开源地图库、可视化库，提供了全新的大数据可视化、实时流数据可视化功能，通过本产品可快速实现浏览器和移动端上美观、流畅的地图呈现与空间分析。 框架主要目的是升级Leaflet的基础功能和编写相关示例，方便快速搭建Leaflet地图项目，敏捷开发，可复用，支持各种配置，适合各种场景使用。
前端项目-leaflet.toolbar.js.zip
09-03
前端项目-leaflet.toolbar.js,用于传单地图的灵活、可扩展的工具栏。
Leaflet.Geodesic:使用传单绘制测地线的附加组件
05-02
用于绘制和圆。 测地线是地球表面上两个给定位置之间的最短路径。 它基于实现的实现最高的精度。 将插件添加到您的项目 Leaflet.Geodesic可通过CDN获得。 之后，将以下代码段添加到html文件中。 <!-- Make sure...
Leaflet 创建一条线（画的效果）
CycleByle的博客
08-11 381
【代码】Leaflet 创建一条线（画的效果）
vue项目leaflet绘制
08-20
你可以使用 Leaflet 库在 Vue 项目中绘制 Leaflet 地图。下面是一个简单的步骤指南： 1. 首先，安装 Leaflet 和 Leaflet-Vue 插件。在你的 Vue 项目根目录下，运行以下命令： ``` npm install leaflet leaflet-vue ``` 2. 在你的 Vue 组件中，导入所需的依赖项： ```javascript import L from "leaflet"; import { LMap, LTileLayer, LMarker } from "vue2-leaflet"; ``` 3. 在组件的 `data` 方法中，定义地图的初始位置和缩放级别： ```javascript data() { return { mapOptions: { center: L.latLng(51.505, -0.09), zoom: 13 } }; } ``` 4. 在模板中，使用 `LMap` 组件来呈现 Leaflet 地图： ```html <template> <div> <l-map :options="mapOptions"> <l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"></l-tile-layer> <l-marker :lat-lng="[51.5, -0.09"></l-marker> </l-map> </div> </template> ``` 在上面的示例中，`l-tile-layer` 组件用于加载地图图块，并且你可以使用 `url` 属性指定地图图块的 URL。`l-marker` 组件用于在地图上放置标记点，你可以使用 `lat-lng` 属性指定标记点的经纬度坐标。 这只是一个简单的示例，你可以根据 Leaflet 的文档和你的需求进一步扩展和自定义地图。希望这能帮到你！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值