leaflet使用draw插件测量距离和面积

最新推荐文章于 2024-07-29 11:53:27 发布
最新推荐文章于 2024-07-29 11:53:27 发布
阅读量2.2k 收藏 13
点赞数 3
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34736893/article/details/128832290
版权

1.安装插件

npm install --save leaflet-draw

2.采用import形式，引入这个插件

import "leaflet-draw";
import "leaflet-draw/dist/leaflet.draw.css";

3.初始化使用插件

//添加画图的提示信息
   L.drawLocal.draw.handlers.polyline = {
      tooltip: {
        start: "点击地图开始画线",
        cont: "继续选择",
        end: "双击完成绘制"
      }
    };
    L.drawLocal.draw.handlers.polygon = {
      tooltip: {
        start: "点击地图开始绘制多边形",
        cont: "继续选择",
        end: "点击第一个顶点完成绘制"
      }
    };

4.执行方法

		/**
         * 绘制多边形
         */
        drawPolygon() {
            let map = this.map;
            this.polygon = new L.Draw.Polygon(map, {
                shapeOptions: {
                weight: 1,
                color: "#ff0000",
                opacity: 0.8,
                fillColor: "#ff0000"
                }
            });
            this.polygon.enable();
        },
        /**
         * 绘制线段
         */
        drawPolyline() {
            let map = this.map;
            this.polyline = new L.Draw.Polyline(map, {
                shapeOptions: {
                weight: 1,
                color: "#ff0000",
                opacity: 0.8
                }
            });
            this.polyline.enable();
        },
        measureDistance() {
            // 距离
            this.isDrawLine = true;
            this.drawPolyline();
        },
        measureArea() {
            // 面
            this.isDrawPolygon = true;
            this.drawPolygon();
        },

5.监听函数

 getData(){
        this.drawGroupPolyline = L.featureGroup().addTo(this.map);
        this.drawGroupPolygon = L.featureGroup().addTo(this.map);
        //画图创建事件
      this.map.on(L.Draw.Event.CREATED, event => {
            const { layer, layerType } = event;
            if (layerType === "polygon") {
              //layer.getLatLngs()得到的多边形的经纬度集合，多边形得到的是一个二维数组，这里要取里面的数组，一定要注意
                let latlng = layer.getLatLngs()[0];
                //一个自定义的计算面积的函数
                let area = this.formatArea(latlng)+'';
                this.addMeasureMarker(area, [latlng[latlng.length - 1].lat, latlng[latlng.length - 1].lng], this.map); //把画图之后计算的结果添加到地图上
                this.drawGroupPolygon.addLayer(layer);

            } else if (layerType === "polyline") {
            //polyline得到的是一个一维数组，直接使用
              let latlng = layer.getLatLngs();
              //一个自定义的计算长度的函数
              let distance = this.formatLength(latlng) + '';
              this.addMeasureMarker(distance, [latlng[0].lat, latlng[0].lng],this.map);
              this.drawGroupPolyline.addLayer(layer);
            }
            // drawGroup,groupLayer,把画图的图层添加到图层组方便管理
            // this.drawGroup.addLayer(layer);
            
          });
          // 结束绘制监听
          this.map.on(L.Draw.Event.DRAWSTOP, function() {
            console.log('结束绘制')

          });
           //添加画图的提示信息
           L.drawLocal.draw.handlers.polyline = {
                tooltip: {
                    start: "点击地图开始画线",
                    cont: "继续选择",
                    end: "双击完成绘制"
                }
            };
            L.drawLocal.draw.handlers.polygon = {
                tooltip: {
                    start: "点击地图开始绘制多边形",
                    cont: "继续选择",
                    end: "点击第一个顶点完成绘制"
                }
            };
      },
      addMeasureMarker(text, latlng, groupLayer) {
            var myIcon = L.divIcon({
                html: text,
                className: 'my-div-icon',
                iconSize: [80, 26]
            });
            L.marker(latlng, {
                icon: myIcon
            }).addTo(groupLayer);
        },

6.计算面积和长度 L.GeometryUtil.geodesicArea，L.latLng().distanceTo()

// 获取面积
        formatArea(polygon) {
            //L.GeometryUtil.geodesicArea(),返回number类型的数据，单位是平方米，这里做了一下转化
            var seeArea = L.GeometryUtil.geodesicArea(polygon);
            let area = (seeArea.toFixed(0)) + "㎡";
            if (seeArea > 10e5) {
                area = ((seeArea / 10e5).toFixed(2)) + "k㎡";
            }
            console.log(area)
            return area;
        },

        // 获取长度
        formatLength(line) {
            let dis = 0;
            for (let i = 0; i < line.length - 1; i++) {
                let start = line[i];
                let end = line[i + 1];
                dis += L.latLng([start.lat, start.lng]).distanceTo([end.lat, end.lng]); //计算两个点之间的距离，并累加
            }
            //结果得到的也是number类型，单位是 米
            if (dis < 1000) {
                return dis.toFixed(2) + "m";
            }
            return (dis / 10e2).toFixed(2) + "km";
        },

7.清除线段和面积

  clearMeasureDistance() {
            // 距离
            this.isDrawLine = false;
            if(this.polyline){
                this.polyline.disable();
            }
            let obj = document.getElementsByClassName('my-div-icon');
            for(let i=0;i<obj.length;i++){
                obj[i].innerHTML = ''
            }
            if(this.drawGroupPolyline){
                this.drawGroupPolyline.clearLayers()
            }
        },
        clearMeasureArea() {
            // 面
            this.isDrawPolygon = false;
            if(this.polygon){
                this.polygon.disable();
            }
            let obj = document.getElementsByClassName('my-div-icon');
            for(let i=0;i<obj.length;i++){
                obj[i].innerHTML = ''
            }
            if(this.drawGroupPolygon){
                this.drawGroupPolygon.clearLayers()
            }
        },

8.转中文
新建leaflet.draw-cn.js 覆盖英文提示，并引入路径

  import "../../../../public/js/leaflet.draw-cn.js"

js内容如下：

L.drawLocal = {
	draw: {
		toolbar: {
			// #TODO: this should be reorganized where actions are nested in actions
			// ex: actions.undo  or actions.cancel
			actions: {
				title: '取消绘图',//'Cancel drawing',
				text: '',//'Cancel'
			},
			finish: {
				title: '完成绘图',//'Finish drawing',
				text: 'Finish'
			},
			undo: {
				title: '删除最后绘制的点',//'Delete last point drawn',
				text: '',//'Delete last point'
			},
			buttons: {
				polyline: '绘制一个多段线',//'Draw a polyline',
				polygon: '绘制一个多边形',//'Draw a polygon',
				rectangle: '绘制一个矩形',//'Draw a rectangle',
				circle: '绘制一个圆',//'Draw a circle',
				marker: '绘制一个标记',//'Draw a marker',
				circlemarker: '绘制一个圆形标记',//'Draw a circlemarker'
			}
		},
		handlers: {
			circle: {
				tooltip: {
					start: '单击并拖动以绘制圆',//'Click and drag to draw circle.'
				},
				radius: 'Radius'
			},
			circlemarker: {
				tooltip: {
					start: '单击“地图”以放置圆标记',//'Click map to place circle marker.'
				}
			},
			marker: {
				tooltip: {
					start: '单击“地图”以放置标记',//'Click map to place marker.'
				}
			},
			polygon: {
				tooltip: {
					start: '单击开始绘制形状',//'Click to start drawing shape.',
					cont: '单击继续绘制形状',//'Click to continue drawing shape.',
					end: '单击第一个点关闭此形状',//'Click first point to close this shape.'
				}
			},
			polyline: {
				error: '<strong>错误:</strong>形状边缘不能交叉！',//'<strong>Error:</strong> shape edges cannot cross!',
				tooltip: {
					start: '单击开始绘制线',//'Click to start drawing line.',
					cont: '单击以继续绘制线',//'Click to continue drawing line.',
					end: '单击“最后一点”以结束线',//'Click last point to finish line.'
				}
			},
			rectangle: {
				tooltip: {
					start: '单击并拖动以绘制矩形',//'Click and drag to draw rectangle.'
				}
			},
			simpleshape: {
				tooltip: {
					end: '释放鼠标完成绘图',//'Release mouse to finish drawing.'
				}
			}
		}
	},
	edit: {
		toolbar: {
			actions: {
				save: {
					title: '保存更改',//'Save changes',
					text: '保存',//'Save'
				},
				cancel: {
					title: '取消编辑，放弃所有更改',//'Cancel editing, discards all changes',
					text: '取消',//'Cancel'
				},
				clearAll: {
					title: '清除所有图层',//'Clear all layers',
					text: '清除所有',//'Clear All'
				}
			},
			buttons: {
				edit: '编辑图层',//'Edit layers',
				editDisabled: '无可编辑的图层',//'No layers to edit',
				remove: '删除图层',//'Delete layers',
				removeDisabled: '无可删除的图层',//'No layers to delete'
			}
		},
		handlers: {
			edit: {
				tooltip: {
					text: '拖动控制柄或标记以编辑要素',//'Drag handles or markers to edit features.',
					subtext: '单击“取消”撤消更改',//'Click cancel to undo changes.'
				}
			},
			remove: {
				tooltip: {
					text: '单击要删除的要素',//'Click on a feature to remove.'
				}
			}
		}
	}
};

全部代码如下：

<template>
	<div id="map">
        <div class="leftbg" style="z-index: 9999;">
            <div v-if="isDrawLine" class="lengthbg_select" @click="clearMeasureDistance"></div>
            <div v-else  class="lengthbg" @click="measureDistance"></div>
            <div v-if="isDrawPolygon" class="areabg_select"  @click="clearMeasureArea"></div>
            <div v-else class="areabg"  @click="measureArea"></div>
         </div>
    </div>
</template>

<script>
    import redMarker from "../../../assets/image/red-marker.png";
    import "leaflet-draw";
    import "leaflet-draw/dist/leaflet.draw.css";
    import "../../../../public/js/leaflet.draw-cn.js"
	export default {
		name: 'workSpace',
        components: {},
		data() {
			return {
                map:null,
                marker:'',
                lat:'',
                lng:'',
                polyline:null,
                polygon:null,
                drawGroupPolyline:null,
                drawGroupPolygon:null,
                isDrawLine:false,
                isDrawPolygon:false,
			};
		},
          //初始化方法
		watch: {
    	'$route' () {
            //  
    		}
		},
		created() { 
            this.$nextTick(()=>{
                if(!this.map){
                    this.getMap();
                }
            })
		},
		methods: {
            getMap(){
            this.map = L.map("map", {
                center: [30.551116,119.975995],
                // zoom: 16,
                zoomControl: false, //禁用 + - 按钮
                // doubleClickZoom: false, // 禁用双击放大
                attributionControl: false, // 移除右下角leaflet标识
                crs: L.CRS.EPSG4326,
            }).setView([30.551116,119.975995], 14);
            //添加电子地图影像
            var vector_map = L.tileLayer(
                "http://t1.tianditu.com/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=d4782516c98542ebc0bdc11ec86b68ca",
                {
                    maxZoom: 17,
                    tileSize: 256,
                    zoomOffset: 1,
                    minZoom: 3,
                }
            ).addTo(this.map);
            //添加注记
            var vector_note = L.tileLayer(
                "http://t1.tianditu.com/cva_c/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=d4782516c98542ebc0bdc11ec86b68ca",
                {
                maxZoom: 17,
                tileSize: 256,
                zoomOffset: 1,
                zIndex: 5,
                minZoom: 14,
                }
            ).addTo(this.map);
            var matrixIds = [];
            for (var i = 0; i < 22; ++i) {
                matrixIds[i] = {
                    identifier: "" + i,
                    topLeftCorner: new L.LatLng(90, -180)
                };
            }
            this.map.pm.setLang('zh');  //设置语言  en, de, it, ru, ro, es, fr, pt_br, zh , nl
            var that = this
            var redIcon = L.icon({
                    iconUrl:redMarker,//markerIcon  redMarker
                    iconSize: [35, 35],
                    iconAnchor: [17.5, 17.5]
                })
            if(that.lng&&that.lat){
                console.log("打印点的经纬度")
                 that.marker = L.marker([that.lat, that.lng],{
                    icon:redIcon,
                    riseOnHover:true
                    }).addTo(that.map) 
            }
            
                // // 点击地图进行打点
                // that.map.on('click', function(e) {
                //     // var content = '你点击了这个点：<br>';
                //     // content += e.latlng.toString();
                //     // console.log(content);
                //     // mypop.setLatLng(e.latlng).setContent(content).openOn(that.map);
                //     /** 点 */ 
                //     /**在这里进行处理数据，将在地图上打点的经纬度坐标通过接口上传服务器 */
                //     that.lat = e.latlng.lat;
                //     that.lng = e.latlng.lng;
                //     if(that.marker){
                //         //移除上次的marker点
                //         that.map.removeLayer(that.marker)
                //     }
                //     that.marker = L.marker([e.latlng.lat, e.latlng.lng],{
                //         icon:redIcon,
                //         riseOnHover:true
                //         }).addTo(that.map) 
                // });
                this.getData();
            
            },
    getData(){
        this.drawGroupPolyline = L.featureGroup().addTo(this.map);
        this.drawGroupPolygon = L.featureGroup().addTo(this.map);
        //画图创建事件
      this.map.on(L.Draw.Event.CREATED, event => {
            const { layer, layerType } = event;
            if (layerType === "polygon") {
              //layer.getLatLngs()得到的多边形的经纬度集合，多边形得到的是一个二维数组，这里要取里面的数组，一定要注意
                let latlng = layer.getLatLngs()[0];
                //一个自定义的计算面积的函数
                let area = this.formatArea(latlng)+'';
                this.addMeasureMarker(area, [latlng[latlng.length - 1].lat, latlng[latlng.length - 1].lng], this.map); //把画图之后计算的结果添加到地图上
                this.drawGroupPolygon.addLayer(layer);

            } else if (layerType === "polyline") {
            //polyline得到的是一个一维数组，直接使用
              let latlng = layer.getLatLngs();
              //一个自定义的计算长度的函数
              let distance = this.formatLength(latlng) + '';
              this.addMeasureMarker(distance, [latlng[0].lat, latlng[0].lng],this.map);
              this.drawGroupPolyline.addLayer(layer);
            }
            // drawGroup,groupLayer,把画图的图层添加到图层组方便管理
            // this.drawGroup.addLayer(layer);
            
          });
          // 结束绘制监听
          this.map.on(L.Draw.Event.DRAWSTOP, function() {
            console.log('结束绘制')

          });
           //添加画图的提示信息
           L.drawLocal.draw.handlers.polyline = {
                tooltip: {
                    start: "点击地图开始画线",
                    cont: "继续选择",
                    end: "双击完成绘制"
                }
            };
            L.drawLocal.draw.handlers.polygon = {
                tooltip: {
                    start: "点击地图开始绘制多边形",
                    cont: "继续选择",
                    end: "点击第一个顶点完成绘制"
                }
            };
      },
      addMeasureMarker(text, latlng, groupLayer) {
            var myIcon = L.divIcon({
                html: text,
                className: 'my-div-icon',
                iconSize: [80, 26]
            });
            L.marker(latlng, {
                icon: myIcon
            }).addTo(groupLayer);
        },
      // 获取面积
        formatArea(polygon) {
            //L.GeometryUtil.geodesicArea(),返回number类型的数据，单位是平方米，这里做了一下转化
            var seeArea = L.GeometryUtil.geodesicArea(polygon);
            let area = (seeArea.toFixed(0)) + "㎡";
            if (seeArea > 10e5) {
                area = ((seeArea / 10e5).toFixed(2)) + "k㎡";
            }
            console.log(area)
            return area;
        },

        // 获取长度
        formatLength(line) {
            let dis = 0;
            for (let i = 0; i < line.length - 1; i++) {
                let start = line[i];
                let end = line[i + 1];
                dis += L.latLng([start.lat, start.lng]).distanceTo([end.lat, end.lng]); //计算两个点之间的距离，并累加
            }
            //结果得到的也是number类型，单位是 米
            if (dis < 1000) {
                return dis.toFixed(2) + "m";
            }
            return (dis / 10e2).toFixed(2) + "km";
        },
      /**
         * 绘制多边形
         */
        drawPolygon() {
            let map = this.map;
            this.polygon = new L.Draw.Polygon(map, {
                shapeOptions: {
                weight: 1,
                color: "#ff0000",
                opacity: 0.8,
                fillColor: "#ff0000"
                }
            });
            this.polygon.enable();
        },
        /**
         * 绘制线段
         */
        drawPolyline() {
            let map = this.map;
            this.polyline = new L.Draw.Polyline(map, {
                shapeOptions: {
                weight: 1,
                color: "#ff0000",
                opacity: 0.8
                }
            });
            this.polyline.enable();
        },
        measureDistance() {
            // 距离
            this.isDrawLine = true;
            this.drawPolyline();
        },
        measureArea() {
            // 面
            this.isDrawPolygon = true;
            this.drawPolygon();
        },
        clearMeasureDistance() {
            // 距离
            this.isDrawLine = false;
            if(this.polyline){
                this.polyline.disable();
            }
            let obj = document.getElementsByClassName('my-div-icon');
            for(let i=0;i<obj.length;i++){
                obj[i].innerHTML = ''
            }
            if(this.drawGroupPolyline){
                this.drawGroupPolyline.clearLayers()
            }
        },
        clearMeasureArea() {
            // 面
            this.isDrawPolygon = false;
            if(this.polygon){
                this.polygon.disable();
            }
            let obj = document.getElementsByClassName('my-div-icon');
            for(let i=0;i<obj.length;i++){
                obj[i].innerHTML = ''
            }
            if(this.drawGroupPolygon){
                this.drawGroupPolygon.clearLayers()
            }
        },
		}
	};
</script>
<style>
    .my-div-icon {
        font-size:16px;
        color:#fff;
    }
</style>
<style scoped>
	.home{
        width: 100%;
        height: 100%;
        position: absolute;
      
    }
    #map {
        top: 0px;
        width: 100%;
        bottom: 0px;
        position: absolute;
    }
	

    .leftbg {
      width: 1rem;
      height: 2rem;
      bottom: 0rem;
      right: 4.6rem;
      position: absolute;
    }

    .lengthbg{
        width: 0.67rem;
        height: 0.67rem;
        background: url(../../../assets/image/measure_length.png) no-repeat;
        background-size: 100% 100%;
        margin-bottom: 0.19rem;
    }
    .areabg{
        width: 0.67rem;
        height: 0.67rem;
        background: url(../../../assets/image/measure_area.png) no-repeat;
        background-size: 100% 100%;
    }
    .lengthbg_select{
        width: 0.67rem;
        height: 0.67rem;
        background: url(../../../assets/image/measure_length_select.png) no-repeat;
        background-size: 100% 100%;
        margin-bottom: 0.19rem;
    }
    .areabg_select{
        width: 0.67rem;
        height: 0.67rem;
        background: url(../../../assets/image/measure_area_select.png) no-repeat;
        background-size: 100% 100%;
    }
</style>
零点七九
关注
  • 3
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
108：vue+leaflet 测量线段.圆形.多边形的长度面积，并控制显示隐藏
大剑师兰特的GIS世界
03-04 404
第108个本示例的目的是介绍演示如何在vue+leaflet中设置线段、圆形、矩形等可编辑状态，拖拽改变形状，点击测量，可以显示长度和面积的值，点击隐藏测量值，可以隐藏长度和面积的值。
leaflet 测距侧面.rar
08-20
leaflet地图加载 测距测面 Leaflet 是一个为移动设备设计的交互式地图的开源的 javascript库
SuperMap iClient for Leaflet+leaflet.polylinemeasure实现leaflet图上距离量测
qq_43334519的博客
12-29 1119
借助leaflet.polylinemeasure插件实现Leafllet图上距离量测功能
Leaflet基础:网络地图（一）
weixin_54685571的博客
06-19 727
网络地图通常由一个或多个组成。背景图层通常是静态的、非交互式的。相反，前景图层通常是动态的，与用户交互相关，例如通过单击要素来查询图层属性什么是图块层瓦片层是网络地图背后的一项基本技术。它们构成了大多数网络地图中的背景层，从而帮助查看者在地理空间中定位前景层。
Leaflet 叠加图片 使用draw插件 测量区域面积
weixin_43871535的博客
05-13 779
插件的下载地址：https://github.com/ProminentEdge/leaflet-measure-path 源码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Leaflet Measure Path - example</title> <link rel="stylesheet" href="https:
vue2使用leaflet结合其它插件实现webgis测面积测距离
qq_44647751的博客
01-25 839
最近处理了个webgis相关的功能(用的使用的是离线地图地图是谷歌二维瓦片数据。
Leaflet【六】绘制交互图形、测量、经纬度展示
共勉
07-05 1071
本文主要探讨了如何利用leaflet-draw插件在地图上绘制图形，以及通过leaflet-measure测量距离和面积，并将经纬度绘制到地图上。首先，我们使用leaflet-draw插件，该插件提供了一种简单而直观的方式来绘制各种形状（如点、线、多边形等）到地图上。然后，我们利用leaflet-measure插件，该插件可以测量地图上任意两点之间的距离，以及任意多边形的面积。最后，我们将经纬度数据绘制到地图上，以便于进行地理位置分析和可视化。这种方法为地理信息的收集、分析和可视化提供了一种有效的工具。
记录一次关于使用leaflet draw 插件叠加图层删除绘制层无法删除的问题
qq_28567547的博客
10-11 524
业务逻辑是这样的：再地图上已经绘制了一个多边形区域，然后需要再绘制的区域下再绘制下级区域，使用插件可以正常绘制并保存绘制数据，然后再回显编辑的时候，此时地图展示了上级多边形区域（该区域未追加到draw FeatureGroup 下）以及下级区域（该区域已经追加到draw FeatureGroup下）。当我使用draw的删除控件删除下级区域时候，发现下级区域无法删除。
leaflet、leaflet-draw、leaflet-toolbar、leaflet-draw-toolbar源码编译
wang_390486690的专栏
10-13 806
一、leaflet源码编译 1、安装cnpm npm install -g --registry=https://registry.npm.taobao.org cnpm 2、使用cnpm安装所需模块 cnpm install rollup rollup-plugin-git-version rollup-plugin-json git-rev-sync cnpm install -g uglify...
leaflet 插件使用
qq_37550440的博客
07-14 4937
效果图： 插件Leaflet.ChineseTmsProviders（中国底图底图）我代码中命名为china，放在leaflet.js 同级目录 L.TileLayer.ChinaProvider = L.TileLayer.extend({ initialize: function(type, options) { // (type, Object) var providers = L.TileLayer.ChinaProvider.providers; .
【Leaflet入门】vue使用leaflet插件--几何绘制
lishuyuli的博客
06-09 2288
上一篇文章我们介绍了Leaflet图层的创建方式和增加删除的方法,这一篇呢主要介绍一下在Leaflet中几何的编辑方式,以及一些小编在项目中跟几何有关的需求分享。小编的项目呢,用它自带的工具栏不太符合小编的项目需求,所以小编走得是自定义的按钮可以调用下面的方法开启绘制模式,第一个参数是你想绘制的图形,绘制完成后你需要关闭绘制方法,可以写在监听事件中里面的一些设置参数就不详细写啦,感兴趣的可以去文档查看以上就是我在项目中使用Leaflet-Geoman插件的方法,有什么问题欢迎大家随时交流。
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 649
JavaScript青少年简明教程：函数及其相关知识（下）
【React 】开发环境搭建详细指南
lph159的博客
07-24 1380
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 464
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 265
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
最新发布
努力做最接地气的编程干货分享，感谢关注
07-29 1295
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
vue el-select的下拉树形结构 带检索功能
Jokerxiuka的博客
07-26 214
【代码】vue el-select的下拉树形结构。
easyui 点击单元格的时候，获取该行另外一个字段的值
极客栈
07-29 320
通过绑定 DataGrid 的 ​​ 事件，可以轻松地在单击单元格时获取该行的其他字段值。这个方法适用于各种场景，比如在用户点击某个单元格时显示额外的信息、执行特定的操作等。希望这个示例能帮助你更好地理解和应用 EasyUI DataGrid 的事件处理。
leaflet.draw.js:9 Uncaught ReferenceError: radius is not defined at Proxy._resize 这段报错，是在编辑leaflet上编辑leaflet-draw插件种的圆的半径所引起的，这是什么原因
09-07
### 回答1： 这个错误提示表明你的代码中使用了 `radius` 变量，但该变量未被定义。因此，可能是以下几种原因导致的： 1. 圆的半径变量未被正确命名或声明； 2. 圆的半径值未被正确传递给函数或方法； 3. 圆的半径值未被正确计算或初始化。 你可以检查一下你的代码，尤其是涉及到圆的半径的部分，看看是否存在以上问题，从而找出具体的原因并进行修复。 ### 回答2： 这个报错是由于在编辑leaflet-draw插件中的圆时未定义圆的半径变量所导致的。在leaflet-draw插件中，当调用Proxy._resize函数时，会检查相应的变量是否已定义，如果没有定义，则会抛出这个报错。 可能的原因是在编辑圆时，未正确设置圆的半径变量。要解决这个问题，你需要确保在调用Proxy._resize函数之前，将圆的半径赋值给正确的变量。 例如，如果你使用leaflet的L.circle方法创建圆，则需要在创建圆时设置radius属性： ```javascript var circle = L.circle([lat, lng], { radius: 1000, // 设置圆的半径为1000米 // 其他圆的属性 }).addTo(map); ``` 如果你是在编辑现有的圆，则需要先获取圆的半径，然后将其赋值给正确的变量： ```javascript var circle = // 获取要编辑的圆 var radius = circle.getRadius(); // 获取圆的半径 // 将圆的半径赋值给正确的变量 ``` 确保正确设置圆的半径变量后，再次尝试编辑leaflet-draw插件中的圆，这个报错应该就会被解决。 ### 回答3： 这个错误是因为在编辑Leaflet上使用Leaflet-draw插件绘制圆形时，没有定义半径变量所导致的。 在使用Leaflet-draw插件绘制圆形时，需要指定圆形的半径。如果没有指定半径，就会出现这个错误。 要解决这个问题，需要在使用Leaflet-draw插件绘制圆形之前，先定义一个半径变量，并将其赋值给圆形的半径属性。例如： var radius = 10; // 定义半径变量为10 var circle = L.circle(map.getCenter(), { radius: radius // 将半径变量赋值给圆形的半径属性 }).addTo(map); 这样，在调用Leaflet-draw插件的编辑功能时，就不会出现"leaflet.draw.js:9 Uncaught ReferenceError: radius is not defined"的错误了。 需要注意的是，半径的值可以根据实际需求进行调整，具体数值可以根据地图的缩放级别和场景的要求进行设置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值