Leaflet【六】绘制交互图形、测量、经纬度展示

news2024/11/24 4:22:08

本文主要探讨了如何利用leaflet-draw插件在地图上绘制图形，以及通过leaflet-measure测量距离和面积，并将经纬度绘制到地图上。首先，我们使用leaflet-draw插件，该插件提供了一种简单而直观的方式来绘制各种形状（如点、线、多边形等）到地图上。然后，我们利用leaflet-measure插件，该插件可以测量地图上任意两点之间的距离，以及任意多边形的面积。最后，我们将经纬度数据绘制到地图上，以便于进行地理位置分析和可视化。这种方法为地理信息的收集、分析和可视化提供了一种有效的工具。

绘制图形

npm i leaflet-draw

简单使用

import '@luomus/leaflet-draw/dist/leaflet.draw';
import '@luomus/leaflet-draw/dist/leaflet.draw.css';

const drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
const drawControl = new L.Control.Draw({});
map.addControl(drawControl);

配置项说明

在L.Control.Draw当中可以添加一下配置项

配置项说明
position所处位置，取值：
draw绘制时配置
edit编辑时配置

其中在draw当中可以对点线面矩形圆灯进行对应的配置，部分配置如下：

其中对于这些配置在源码当中 L.Draw.Polyline 定义了对应的这些对象，所有的配置在option当中，下面只是稍微列举了一部分，源码位置在：node_modules/@luomus/leaflet-draw/dist/leaflet.draw-src.js

const drawControl = new L.Control.Draw({
  // 位置
  position: 'topright',
  // 绘制时候的配置
  draw: {
    polyline: {
      shapeOptions: {
        stroke: true,
        color: '#3388ff',
        weight: 4,
        opacity: 0.5,
        fill: false,
        clickable: true
      }
    },
    polygon: {
      allowIntersection: false,
      drawError: {
        color: '#f40',
        message: '请点击别的位置的点'
      },
      shapeOptions: {
        stroke: true,
        color: '#3388ff',
        weight: 4,
        opacity: 0.5,
        fill: false,
        fillColor: null,
        fillOpacity: 0.2,
        clickable: true
      }
    },
    circle: {},
    rectangle: {
      shapeOptions: {
        clickable: false
      }
    },
    marker: {
      // icon: new MyCustomMarker()
    }
  },
  // 编辑
  edit: {
    featureGroup: drawnItems
  }
});

同样的在插件当中还提供了一个修改绘制配置的方法setDrawingOptions，传递的是一个对象，和draw当中配置的对象是一样的。

drawControl.setDrawingOptions({
  rectangle: {
    shapeOptions: {
      color: '#0000FF'
    }
  }
});

中英文转换

在上面初始化了一个绘制对象之后，会发现展示的内容都是英文的，这对我们国内使用不是很方便，所以将其改为中文。这里直接把所有的都给替换掉了，将这段插入代码内即可。是因为在插件源码当中也是定义了一个L.drawLocal = {} 然后他里面都是英文，我们在外面重新定义的会直接取进行一个覆盖。

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: '完成'
      },
      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.'
        }
      }
    }
  }
};

事件

leaflet-draw插件的事件都是注册到map对象上的，到这里，可以了解一下Evented 事件

// map.fire 也就是 触发指定类型的事件。您可以选择提供一个数据对象——侦听器函数的第一个参数将包含其属性，事件可以选择性地传播到事件父级。
this._map.fire(L.Draw.Event.CREATED, {layer: layer, layerType: this.type});

也就是相当于自定义事件了，在他插件源码中相当于定义了一个map的L.Draw.Event.CREATED事件，然后在引入插件之后就可以通过map去使用这个事件了。

  • 由于前面通过fire将事件传播过来，并且传递过来了一个对象，这里通过一个event去接收
  • 同时也就是为什么会有event.layerType和event.layer这两个值，对于绘制不同面可以去取不同的值，拿到值之后还可以将这个layer图层给添加到前面定义好的一个drawnItems，之后的修改也是修改这里面的layer。
map.on(L.Draw.Event.CREATED, function (event) {
  console.log(' =====', event);
  // 作为永久存储 取这几个值给后端存着，后面再拿出来进行渲染
  console.log('类型 =====', event.layerType);
  console.log('坐标 =====', event.layer._latlngs || event.layer._latlng);
  console.log('配置 =====', event.layer.options); // 圆的半径在配置当中
  const layer = event.layer;
  drawnItems.addLayer(layer);
});

事件说明

事件名说明反参
L.Draw.Event.CREATED创建完成layer、layerType
L.Draw.Event.EDITED编辑完成layers
L.Draw.Event.DELETED删除layers
L.Draw.Event.DRAWSTART开始绘制layerType
L.Draw.Event.DRAWSTOP停止绘制layerType
L.Draw.Event.DRAWVERTEX绘制顶点layers
L.Draw.Event.EDITSTART开始编辑handler
L.Draw.Event.EDITMOVE编辑移动layer
L.Draw.Event.EDITRESIZE编辑缩放layer
L.Draw.Event.EDITVERTEX编辑顶点layers、poly
L.Draw.Event.EDITSTOP完成编辑handler
L.Draw.Event.DELETESTART开始删除handler
L.Draw.Event.DELETESTOP完成删除handler
L.Draw.Event.TOOLBAROPENED点击了图标，触发绘制
L.Draw.Event.TOOLBARCLOSED取消绘制触发
L.Draw.Event.MARKERCONTEXT右键单击标记marker，layer，poly

测量

用来测量某两个或多个点之间的距离以及所围成的面积。

// 先执行npm按照插件
npm i leaflet-measure

import 'leaflet-measure/dist/leaflet-measure';
import 'leaflet-measure/dist/leaflet-measure.css';

const measureControl = new L.Control.Measure({
  position: 'topright',
  primaryLengthUnit: 'feet',
  secondaryLengthUnit: 'miles',
  activeColor: '#F40',
  completedColor: '#F40',
  popupOptions: {className: 'leaflet-measure-resultpopup', autoPanPadding: [10, 10]}
});
measureControl.addTo(map);

插件的配置说明

属性说明
position插件按钮所处位置，左上、右下等等
primaryLengthUnit主要单位
secondaryLengthUnit次要单位
activeColor主动执行测量时渲染的地图要素的基色
completedColor测量完成之后渲染的颜色
popupOptions弹出框配置，可以额外设置class类名进行自定义样式

经纬度标识

可以使用插件，插件可以在github，插件：leaflet.latlng-graticule 上进行下载获取，之后将插件引入，然后通过L.latlngGraticule进行实例化插件

// 引入刚才下载的插件js
import './plugin/leaflet.latlng-graticule';

L.latlngGraticule({
  weight: '2.0',
  color: '#f40',
  fontColor: '#fff',
  opacity: 1,
  showLabel: true,
  dashArray: [5, 5],
  sides: ['北', '南', '东', '西'],
  zoomInterval: [
    {start: 2, end: 3, interval: 30},
    {start: 4, end: 4, interval: 10},
    {start: 5, end: 7, interval: 5},
    {start: 8, end: 18, interval: 1}
  ]
}).addTo(map);

插件的配置

属性说明
weightnumber 表示
color颜色值 表示经纬度线的颜色
fontColor颜色值 表示经纬度文字的颜色
opacitynumber 表示透明度
showLabelboolean 是否显示经纬度文字
dashArrayArray[number] 表示经纬度线的分隔程度
sidesArray[string] 表示四个方向展示的内容
zoomInterval展示层级 地图在第start到第end层级时，每interval度画一条经纬线

在这里插入图片描述

插件源码解析

首先可以参考一下Leaflet【三】图层组 & geoJson & 热力图 这篇文章，里面有对leaflet-heat插件的源码分析，这里同时简单看一下这个绘制经纬度的源码。

初始化对象，他是从layer基类当中继承而来。这里面有两个属性，一个是includes这个下面说一下，另外一个是options，也就是对这个插件的配置对象。

includes是Class基类当中的一个属性，是一个特殊的类属性，它将所有指定的对象合并到类中（这样的对象被称为mixins。）理解成vue2当中的混入就好了。那么这里就是通过继承L.Evented基类或L.Mixin.Events，该类获得了事件处理功能

L.LatLngGraticule = L.Layer.extend({
  includes: (L.Evented.prototype || L.Mixin.Events),
  options:{}  // 配置，这里省略了
});

initialize初始化，这里面没什么，就是将传递过来的options配置重新设置一下，以及将配置组装给到对应的样式。

initialize: function (options) {
  L.setOptions(this, options);
  // 。。。。样式组装，省略
}

onAdd方法，添加图层到map上会执行，这个方法基本上都大同小异，先初始化canvas，将canvas加到html当中，然后把需要监听的事件都监听上，最后绘制。这个内容有点多，简单概括一下。

  • 首先拿到canvas的宽高以及地图的当前层级，然后根据zoomInterval当中的start和end和地图层级比较拿到对应的interval
  • 已当前地图层级时6为例，这个时候拿到的interval是5，那么绘制的时候会从canvas左上开始绘制，取对应的经纬度，然后往右往下进行绘制，每过了5度就绘制下一条破折线
  • 并且绘制的时候将对应的文本一起绘制上去，这样也就完成了绘制
  • 之后的地图移动事件会重新执行_reset方法，那么也就会重新__redraw。
onAdd: function (map) {
  this._map = map;

  if (!this._canvas) {
    this._initCanvas();
  }

  map._panes.overlayPane.appendChild(this._canvas);

  map.on('viewreset', this._reset, this);
  map.on('move', this._reset, this);
  map.on('moveend', this._reset, this);

  if (map.options.zoomAnimation && L.Browser.any3d) {
    map.on('zoomanim', this._animateZoom, this);
  }

  this._reset();
},

直接看他绘制的方法，这里的initcanvas初始化一个canvas对象，然后_reset会将canvas大小设置一下，然后执行__draw绘制方法。

__draw: function (label) {
  function _parse_px_to_int(txt) {
    if (txt.length > 2) {
      if (txt.charAt(txt.length - 2) == 'p') {
        txt = txt.substr(0, txt.length - 2);
      }
    }
    try {
      return parseInt(txt, 10);
    } catch (e) {
    }
    return 0;
  };

  var self = this,
    canvas = this._canvas,
    map = this._map,
    curvedLon = this.options.lngLineCurved,
    curvedLat = this.options.latLineCurved;

  if (L.Browser.canvas && map) {

    var latInterval = this._currLatInterval,
      lngInterval = this._currLngInterval;


    // 获取canvas对象，设置对应的宽高样式等
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.lineWidth = this.options.weight;
    ctx.strokeStyle = this.options.color;
    ctx.fillStyle = this.options.fontColor;
    ctx.setLineDash(this.options.dashArray);

    if (this.options.font) {
      ctx.font = this.options.font;
    }
    var txtWidth = ctx.measureText('0').width;
    var txtHeight = 12;
    try {
      var _font_size = ctx.font.trim().split(' ')[0];
      txtHeight = _parse_px_to_int(_font_size);
    } catch (e) {
    }

    var ww = canvas.width,
      hh = canvas.height;

    var lt = map.containerPointToLatLng(L.point(0, 0));
    var rt = map.containerPointToLatLng(L.point(ww, 0));
    var rb = map.containerPointToLatLng(L.point(ww, hh));

    var _lat_b = rb.lat,
      _lat_t = lt.lat;
    var _lon_l = lt.lng,
      _lon_r = rt.lng;

    var _point_per_lat = (_lat_t - _lat_b) / (hh * 0.2);

    _point_per_lat = _point_per_lat < 1 ? 1 : _point_per_lat;

    _lat_b = _lat_b < -90 ? -90 : parseInt(_lat_b - _point_per_lat, 10);

    _lat_t = _lat_t > 90 ? 90 : parseInt(_lat_t - _point_per_lat, 10);

    var _point_per_lon = (_lon_r - _lon_l) / (ww * 0.2);

    _point_per_lon = _point_per_lon < 1 ? 1 : _point_per_lon;

    if (_lon_l > 0 && _lon_r < 0) {
      _lon_r += 360;
    }
    _lon_r = parseInt(_lon_r + _point_per_lon, 10);
    _lon_l = parseInt(_lon_l - _point_per_lon, 10);

    var ll, latstr, lngstr, _lon_delta = 0.5;

    function __draw_lat_line(self, lat_tick) {
      ll = self._latLngToCanvasPoint(L.latLng(lat_tick, _lon_l));
      latstr = self.__format_lat(lat_tick);
      txtWidth = ctx.measureText(latstr).width;
      var spacer = self.options.showLabel && label ? txtWidth + 10 : 0;

      if (curvedLat) {
        if (typeof (curvedLat) == 'number') {
          _lon_delta = curvedLat;
        }

        var __lon_left = _lon_l, __lon_right = _lon_r;
        if (ll.x > 0) {
          var __lon_left = map.containerPointToLatLng(L.point(0, ll.y));
          __lon_left = __lon_left.lng - _point_per_lon;
          ll.x = 0;
        }
        var rr = self._latLngToCanvasPoint(L.latLng(lat_tick, __lon_right));
        if (rr.x < ww) {
          __lon_right = map.containerPointToLatLng(L.point(ww, rr.y));
          __lon_right = __lon_right.lng + _point_per_lon;
          if (__lon_left > 0 && __lon_right < 0) {
            __lon_right += 360;
          }
        }

        ctx.beginPath();
        ctx.moveTo(ll.x + spacer, ll.y);
        var _prev_p = null;
        for (var j = __lon_left; j <= __lon_right; j += _lon_delta) {
          rr = self._latLngToCanvasPoint(L.latLng(lat_tick, j));
          ctx.lineTo(rr.x - spacer, rr.y);

          if (self.options.showLabel && label && _prev_p != null) {
            if (_prev_p.x < 0 && rr.x >= 0) {
              var _s = (rr.x - 0) / (rr.x - _prev_p.x);
              var _y = rr.y - ((rr.y - _prev_p.y) * _s);
              ctx.fillText(latstr, 0, _y + (txtHeight / 2));
            } else if (_prev_p.x <= (ww - txtWidth) && rr.x > (ww - txtWidth)) {
              var _s = (rr.x - ww) / (rr.x - _prev_p.x);
              var _y = rr.y - ((rr.y - _prev_p.y) * _s);
              ctx.fillText(latstr, ww - txtWidth, _y + (txtHeight / 2) - 2);
            }
          }

          _prev_p = {x: rr.x, y: rr.y, lon: j, lat: i};
        }
        ctx.stroke();
      } else {
        var __lon_right = _lon_r;
        var rr = self._latLngToCanvasPoint(L.latLng(lat_tick, __lon_right));
        if (curvedLon) {
          __lon_right = map.containerPointToLatLng(L.point(0, rr.y));
          __lon_right = __lon_right.lng;
          rr = self._latLngToCanvasPoint(L.latLng(lat_tick, __lon_right));

          var __lon_left = map.containerPointToLatLng(L.point(ww, rr.y));
          __lon_left = __lon_left.lng;
          ll = self._latLngToCanvasPoint(L.latLng(lat_tick, __lon_left));
        }

        ctx.beginPath();
        ctx.moveTo(1 + spacer, ll.y);
        ctx.lineTo(rr.x - 1 - spacer, rr.y);
        ctx.stroke();
        if (self.options.showLabel && label) {
          var _yy = ll.y + (txtHeight / 2) - 2;
          ctx.fillText(latstr, 0, _yy);
          ctx.fillText(latstr, ww - txtWidth, _yy);
        }
      }
    };

    if (latInterval > 0) {
      for (var i = latInterval; i <= _lat_t; i += latInterval) {
        if (i >= _lat_b) {
          __draw_lat_line(this, i);
        }
      }
      for (var i = 0; i >= _lat_b; i -= latInterval) {
        if (i <= _lat_t) {
          __draw_lat_line(this, i);
        }
      }
    }

    function __draw_lon_line(self, lon_tick) {
      lngstr = self.__format_lng(lon_tick);
      txtWidth = ctx.measureText(lngstr).width;
      var bb = self._latLngToCanvasPoint(L.latLng(_lat_b, lon_tick));
      var spacer = self.options.showLabel && label ? txtHeight + 5 : 0;

      if (curvedLon) {
        if (typeof (curvedLon) == 'number') {
          _lat_delta = curvedLon;
        }

        ctx.beginPath();
        ctx.moveTo(bb.x, 5 + spacer);
        var _prev_p = null;
        for (var j = _lat_b; j < _lat_t; j += _lat_delta) {
          var tt = self._latLngToCanvasPoint(L.latLng(j, lon_tick));
          ctx.lineTo(tt.x, tt.y - spacer);

          if (self.options.showLabel && label && _prev_p != null) {
            if (_prev_p.y > 8 && tt.y <= 8) {
              ctx.fillText(lngstr, tt.x - (txtWidth / 2), txtHeight + 5);
            } else if (_prev_p.y >= hh && tt.y < hh) {
              ctx.fillText(lngstr, tt.x - (txtWidth / 2), hh - 2);
            }
          }

          _prev_p = {x: tt.x, y: tt.y, lon: lon_tick, lat: j};
        }
        ctx.stroke();
      } else {
        var __lat_top = _lat_t;
        var tt = self._latLngToCanvasPoint(L.latLng(__lat_top, lon_tick));
        if (curvedLat) {
          __lat_top = map.containerPointToLatLng(L.point(tt.x, 0));
          __lat_top = __lat_top.lat;
          if (__lat_top > 90) {
            __lat_top = 90;
          }
          tt = self._latLngToCanvasPoint(L.latLng(__lat_top, lon_tick));

          var __lat_bottom = map.containerPointToLatLng(L.point(bb.x, hh));
          __lat_bottom = __lat_bottom.lat;
          if (__lat_bottom < -90) {
            __lat_bottom = -90;
          }
          bb = self._latLngToCanvasPoint(L.latLng(__lat_bottom, lon_tick));
        }

        ctx.beginPath();
        ctx.moveTo(tt.x, 5 + spacer);
        ctx.lineTo(bb.x, hh - 1 - spacer);
        ctx.stroke();

        if (self.options.showLabel && label) {
          ctx.fillText(lngstr, tt.x - (txtWidth / 2), txtHeight + 5);
          ctx.fillText(lngstr, bb.x - (txtWidth / 2), hh - 3);
        }
      }
    };

    if (lngInterval > 0) {
      for (var i = lngInterval; i <= _lon_r; i += lngInterval) {
        if (i >= _lon_l) {
          __draw_lon_line(this, i);
        }
      }
      for (var i = 0; i >= _lon_l; i -= lngInterval) {
        if (i <= _lon_r) {
          __draw_lon_line(this, i);
        }
      }
    }
  }
},

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1899083.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【K8s】专题六（4）：Kubernetes 稳定性之初始化容器

【K8s】专题六（4）：Kubernetes 稳定性之初始化容器

以下内容均来自个人笔记并重新梳理&#xff0c;如有错误欢迎指正&#xff01;如果对您有帮助&#xff0c;烦请点赞、关注、转发&#xff01;欢迎扫码关注个人公众号&#xff01; 目录 一、基本介绍 二、主要特点 三、资源清单&#xff08;示例&#xff09; 一、基本介绍 初…
阅读更多...
C电池 和 D 电池的作用和类型详解及其之间的区别

C电池 和 D 电池的作用和类型详解及其之间的区别

C 和 D 电池是我们日常生活中必不可少的部件。它们通常用于高功率设备。例如手电筒和玩具。 D 型电池和 C 型电池是两种常见的电池类型。它们是一次性圆柱形电池。您可以在很多设备上使用它们。虽然它们有很多相似之处&#xff0c;但它们也有不同的特点。这些特点使它们适合某…
阅读更多...
Redis 多数据源自定义配置 Spring Boot 升级版

Redis 多数据源自定义配置 Spring Boot 升级版

文章目录 1.前言2.git 示例地址3.需求4.代码实现4.1 application.properties 配置文件4.2 获取 application.properties 中的 redis 配置4.2.1 Environment 对象来获取自定义 redis 配置 4.3 初始化 RedisTemplate 对象&#xff0c;并注册到 Spring IOC 容器4.3.1 初始化方法4.…
阅读更多...
Python函数语法详解（与C++对比学习）【未完】

Python函数语法详解（与C++对比学习）【未完】

一、Python函数的形式 def function_name (参数, ...) -> return value_type:# 函数体return value# 看具体需求# 如果没有return语句&#xff0c;函数执行完毕后也会返回结果# 只是结果为None。return None可以简写为return 1. Python的返回值 在Python3中&#xff0c;提…
阅读更多...
新手教师经常会遇到的问题

新手教师经常会遇到的问题

教育是塑造未来的关键力量&#xff0c;而教师则是这一过程中不可或缺的角色。然而&#xff0c;对于新手教师来说&#xff0c;步入教育行业往往伴随着一系列挑战。本文将探讨新手教师在职业生涯初期可能遇到的一些常见困难&#xff0c;并提供一些应对策略。 教学准备的挑战 新手…
阅读更多...
improved-diffusion-main代码理解

improved-diffusion-main代码理解

目录 一、 TimestepEmbedSequential二、PyTorch之Checkpoint机制三、AttentionBlock四、use_scale_shift_norm 和nanoDiffusion-main相比&#xff0c;improved-diffusion-main代码是相似的&#xff0c;但有几个不是很好理解的地方记录一下。 一、 TimestepEmbedSequential 代码…
阅读更多...
栈复用（覆盖栈上的有用数据）

栈复用（覆盖栈上的有用数据）

栈复用&#xff08;覆盖栈上的有用数据&#xff09; 程序给的输入长度&#xff0c;不够溢出 到返回值&#xff0c;甚至都 不到bp位置 &#xff0c;这是要考虑覆盖之前函数(或当前函数)的栈上的有用数据&#xff0c;任何利用 程序后续函数调用 时要利用该位置上的数据&#xff…
阅读更多...
机器人具身智能Embodied AI

机器人具身智能Embodied AI

强调智能体&#xff08;如机器人&#xff09;通过物理身体在物理世界中的实时感知、交互和学习来执行任务。 通过物理交互来完成任务的智能系统。它由“本体”&#xff08;即物理身体&#xff09;和“智能体”&#xff08;即智能核心&#xff09;耦合而成&#xff0c;能够在复…
阅读更多...
《HIRI-ViT: Scaling Vision Transformer with High Resolution Inputs》解读

《HIRI-ViT: Scaling Vision Transformer with High Resolution Inputs》解读

期刊&#xff1a;TPAMI 年份&#xff1a;2024 摘要 视觉Transformer(ViT)和卷积神经网络(CNN)的混合深度模型已经成为一类强大的视觉任务骨干。扩大这种混合主干网的输入分辨率自然会增强模型的能力&#xff0c;但不可避免地要承受二次扩展的沉重计算成本。相反&#xff0c;…
阅读更多...
SQL索引事务

SQL索引事务

SQL索引事务 索引 创建主键约束(primary key),唯一约束(unique),外键约束(foreign key)时,会自动创建对应列的索引 1.1 查看索引 show index from 表名 现在这个表中没有索引,那么我们现在将这几个表删除之后创建新表 我们现在建立一个班级表一个学生表,并且学生表与班级表存…
阅读更多...
高速PCB设计Tips

高速PCB设计Tips

在进行原理图输入过程中&#xff0c;需要注意将设计分解为功能块&#xff0c;将所有相关组件放在同一页。例如&#xff0c;以太网相关的组件&#xff0c;通常运行在50MHz或更高频率&#xff0c;在原理图设计中应集中在同一页。清晰标记高速连接和电源连接。差分信号和单端阻抗控…
阅读更多...
免费分享：中国三级及以上河流（附下载方法）

免费分享：中国三级及以上河流（附下载方法）

河流分级法的分级方法是从源头最小河流开始,称为一级河流;两条一级河流汇合成二级河流;以此类推,三级河流等等;最后是干流。本文将介绍中国三级及以上河流数据。 数据简介 1:100万中国三级及以上河流矢量数据是涵盖了全国范围内三级及以上级别河流的详细地理信息和空间分布。这…
阅读更多...
5百多本分章节古籍内容大全ACCESS\EXCEL数据库

5百多本分章节古籍内容大全ACCESS\EXCEL数据库

很多明清小说现在越来越不容易查看其内容&#xff0c;虽然之前搞到过一份《3万8千多古代文学大全ACCESS数据库》&#xff0c;但简体中文总让我感觉有删减、非原版的印象&#xff0c;今天正好遇到一个好的古籍网站&#xff0c;繁体字繁体文&#xff0c;感觉非常不错&#xff0c;…
阅读更多...
期权学习必看圣书：《3小时快学期权》要在哪里看？

期权学习必看圣书：《3小时快学期权》要在哪里看？

今天带你了解期权学习必看圣书&#xff1a;《3小时快学期权》要在哪里看&#xff1f;《3小时快学期权》是一本关于股票期权基础知识的书籍。 它旨在通过简明、易懂的语言和实用的案例&#xff0c;让读者在短时间内掌握股票期权的基本概念、操作方法和投资策略。通过这本书&…
阅读更多...
LeetCode刷题记录：（15）三角形最小路径和

LeetCode刷题记录：（15）三角形最小路径和

知识点&#xff1a;倒叙的动态规划 题目传送 解法一&#xff1a;二维动态规划【容易理解】 class Solution {public int minimumTotal(List<List<Integer>> triangle) {int n triangle.size();if (n 1) {return triangle.get(0).get(0);}// dp[i][j]:走到第i层第…
阅读更多...
Gemini for China 大更新，现已上架 Android APP！

Gemini for China 大更新，现已上架 Android APP！

官网&#xff1a;https://gemini.fostmar.online/ Android APP&#xff1a;https://gemini.fostmar.online/gemini_1.0.apk 一、Android APP 如果是 Android 设备&#xff0c;则会直接识别到并给下载链接。PC 直接对话即可。 二、聊天记录 现在 Gemini for China&#xff…
阅读更多...
QWidget成员函数功能和使用详细说明（四）（文字+用例+代码+效果图）

QWidget成员函数功能和使用详细说明（四）（文字+用例+代码+效果图）

文章目录 1.测试工程配置2.成员函数2.1 void setParent(QWidget *parent)2.2 void setMouseTracking(bool enable)2.3 bool hasMouseTracking() const2.4 void setPalette(const QPalette &)2.5 const QPalette &palette() const2.6 int QWidget::grabShortcut(const Q…
阅读更多...
gradle构建工具

gradle构建工具

setting.gradle // settings.gradle rootProject.name my-project // 指定根项目名称include subproject1, subproject2 // 指定子项目名称&#xff0c;可选jar包名称 方式一 jar {archiveBaseName my-application // 设置 JAR 文件的基本名称archiveVersion 1.0 // 设置…
阅读更多...
实验四 图像增强—灰度变换之直方图变换

实验四 图像增强—灰度变换之直方图变换

一&#xff0e;实验目的 1&#xff0e;掌握灰度直方图的概念及其计算方法&#xff1b; 2&#xff0e;熟练掌握直方图均衡化计算过程&#xff1b;了解直方图规定化的计算过程&#xff1b; 3&#xff0e;了解色彩直方图的概念和计算方法 二&#xff0e;实验内容&#xff1a; …
阅读更多...
泰迪智能科技企业项目试岗实训——数据分析类型

泰迪智能科技企业项目试岗实训——数据分析类型

当今社会&#xff0c;就业技能的瞩目度正与日俱增。在竞争激烈的就业市场中&#xff0c;重视技能的培养和提升&#xff0c;通过学习与实践&#xff0c;增强自己的竞争力&#xff0c;为未来的职业发展打下坚实的基础&#xff0c;不仅有助于解决各类工作技能问题&#xff0c;更能…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023