![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Leaflet 基础知识点
原生 Leaflet 学习与记录
AvatarGiser
这个作者很懒,什么都没留下…
展开
-
《Leaflet 基础知识点》- 图层循环(小技巧)
点此进入API使用场景,如关闭全部打开的popup框// 关闭全部Popupmap.eachLayer((layer) => { layer.closePopup();});原创 2021-12-10 17:31:30 · 683 阅读 · 0 评论 -
《Leaflet 基础知识点》- 图层添加与删除(两种方式)
方式一通过 L.Map 对象的方法添加 L.Layer 对象。点此进入API方式二通过L.Layer 对象的方法添加 L.Map对象中。点此进入API原创 2021-12-10 17:24:03 · 1580 阅读 · 0 评论 -
《Leaflet 基础知识点》- 原生控件 - 缩放控件、属性控件、图层控件、比例尺控件
官网写此文章时,使用的 1.7.1一、缩放控件Control.Zoom option.zoomcontrol在初始化 L.map 时,默认显示 true。效果在 属性控件 中有。二、属性控件Control.Attribution option.attributioncontrol在初始化 L.map 时,默认显示 true。三、图层控件Control.Layers未多使用,可查看官方示例四、比例尺控件Control.Scale...原创 2021-08-19 17:43:32 · 2321 阅读 · 0 评论 -
《Leaflet 基础知识点》- 自定义控件 - 鼠标坐标信息
一、说明使用L.Control 对象做扩展(API 地址)二、控件这里取名为MyMousePosition.js// 鼠标坐标位置信息L.Control.MyMousePosition = L.Control.extend({ options: { position: 'bottomleft', emptyString: '经度: 0 纬度: 0',//默认信息 lngFirst: true, numDi...原创 2021-08-19 14:03:27 · 942 阅读 · 1 评论 -
《Leaflet 基础知识点》- 自定义控件 - 图层级别
一、说明使用L.Control 对象做扩展(API 地址)二、控件这里取名为MyZoomLevel.js// 图层级别L.Control.MyZoomLevel = L.Control.extend({ options: { position: 'bottomleft' }, onAdd: function (map) {// L.Control原生方法 this._container = L.DomUtil.crea...原创 2021-08-18 18:32:30 · 988 阅读 · 0 评论 -
《Leaflet 基础知识点》- 设置图层顺序
setZIndex设置指定图层顺序。 适用L.imageOverlay、L.layerGroup、L.GridLayer// 从 0 开始,表示最底层layer.setZIndex(0); bringToFront 和bringToBackbringToFront 设置到最上。 bringToBack 设置到最下。 适用L.popup、L.imageOverlay、L.Path、L.featureGroup、L.GridLayer// 最上layer.bringToFr...原创 2021-07-20 18:39:57 · 3272 阅读 · 4 评论 -
《Leaflet 基础知识点》- 投影坐标与经纬度坐标互转 L.CRS
官网 API 链接使用 L.CRS,此示例的场景是使用 L.map 的 options.crs 属性,且 crs 已被设置为自定义坐标系。// 经纬度 -> 投影坐标系let latLng = L.latLng([31.16805008228939, 121.6205847571635]);map.options.crs.project(latLng);// 投影坐标系 -> 经纬度map.options.crs.unproject({x: 14707.156411458原创 2021-07-19 16:03:19 · 3531 阅读 · 1 评论 -
《Leaflet 基础知识点》- 绘制圆、线、矩形和多边形
前言注意绘制的都是矢量图层,所以在 Vector Layers 分类下:绘制圆官网API示例// 圆:半径 radius 的单位为米var circle = L.circle([31.537628173828125,121.190185546875], {radius: 2000}).addTo(map);// 跳到圆的范围map.fitBounds(circle.getBounds());效果线官网API示例// 线:坐标点var la...原创 2021-07-14 15:51:55 · 4252 阅读 · 0 评论 -
《Leaflet 基础知识点》- 监听鼠标缩放获取地图级别
map.on('zoomend', (e) => { //获取当前放大或者缩小的等级 let scale = e.target.getZoom();});原创 2021-06-18 11:35:04 · 2707 阅读 · 0 评论 -
《Leaflet 基础知识点》- 开启/禁止鼠标移动、双击缩放和滚动事件
移动//开启map.dragging.enable() //禁止map.dragging.disable() 双击缩放原创 2021-05-31 17:56:08 · 2171 阅读 · 0 评论 -
《Leaflet 基础知识点》- 绘制点(两种方式)
前言Leaflet 官方 API,有一个 L.point,但这并不是我们想要的。与L.circle、L.rectangle 和L.polygon 不一样。从下图的 API 目录结构就能看出差异,L.point 在 Basic Types 中。但...我们依旧能绘制出点,有两种方式:一、L.circleMarker 方式说明API 地址 半径 radius 默认值是 10,缩放时不会改变它的大小,也是与 L.circle 有所区别; 默认样式是,带有蓝色实心边框且蓝色半透...原创 2021-05-07 17:21:08 · 3758 阅读 · 4 评论 -
《Leaflet 基础知识点》- 长度与经纬度互相转换
背景圆查询时,中心点是经纬度,半径单位也应该是经纬度。设置为米是错的,这样数据会很大。每次都查询出了全部数据。公式一、长度转经纬度degree = meter / (2* Math.PI *6371004) *360;二、经纬度转长度meter = degree / 360 * 2 * (2* Math.PI *6371004);注意长度的单位是米。...原创 2021-03-12 11:36:31 · 1443 阅读 · 1 评论 -
《Leaflet 基础知识点》- 天地图添加、删除和透明度设置
一、地图容器初始化let map = L.map('map', { //参考坐标系 crs: L.CRS.EPSG4326, // 中心点(这里是武汉) center: [30.59, 114.32], //最小显示等级 minZoom: 1, //最大显示等级 maxZoom: 18, //当前显示等级 zoom: 10, //不添加属性说明控件 attributionControl: false,原创 2021-03-09 14:31:58 · 3068 阅读 · 2 评论 -
《Leaflet 基础知识点》- 添加图形标注
添加// 图片import waterRemarkIcon from '@/assets/images/redflag.png';let waterIcon = L.icon({ iconUrl: waterRemarkIcon, iconSize: [16, 16],//icon大小 iconAnchor: [1, 1]//位移});let waterRemark = L.marker(this.curLatlng,{ icon: waterIcon }).addT原创 2021-01-28 14:19:03 · 2672 阅读 · 1 评论 -
《Leaflet 基础知识点》- 设置图层透明度
layer.setZIndex(0);原创 2021-01-28 13:44:46 · 2337 阅读 · 1 评论 -
《Leaflet 基础知识点》- 鼠标点击事件获取坐标点
监听// 监听 mouseup 事件map.on('mouseup', (e) => { let latlng = e.latlng;});取消监听// 取消 mouseup 事件,注意第二个参数可以是 on 的第二个参数,如果不设置,就删除全部的 mouseup 事件map.off('mouseup');...原创 2021-01-28 10:57:50 · 3626 阅读 · 2 评论 -
《Leaflet 基础知识点》- Map 交互事件详细说明
目录一、事件类型二、添加事件监听API说明示例三、取消事件监听API说明示例四、应用场景一、事件类型L.Map 交互事件有如下多种,主要为鼠标和键盘交互。二、添加事件监听API说明有两种监听方式1. on <String>可同时添加一个或多个事件,多个事件用空格分开,共同一个方法。可用回调参数 e.type 判断是哪个事件。 同一类型事件,可多次监听,方法按照监听顺序执行。2. on <Object&g..原创 2021-01-28 10:45:23 · 3341 阅读 · 1 评论 -
《Leaflet 基础知识点》- 鼠标移动事件显示实时坐标
mousemove原创 2021-01-28 11:05:23 · 2879 阅读 · 0 评论 -
《Leaflet 基础知识点》- 地图定位、跳转和缩放
指定坐标let lat = 38.43;// 纬度let lng = 106.35;// 经度// 注意这里的级数是当前地图级数map.setView([lat, lng], map.getZoom());原创 2021-01-27 17:32:50 · 10054 阅读 · 2 评论 -
《Leaflet 基础知识点》- 在 Vue 中如何使用
一、安装npm i leaflet二、引入main.js 中全局引入// 引入 leaflet 样式import 'leaflet/dist/leaflet.css'// 引入 leaflet js 文件import * as L from 'leaflet/dist/leaflet'三、地图容器初始化//初始化地图容器let map = L.map('map', { //参考坐标系 crs: L.CRS.EPSG4326, //不添加属性说明控原创 2021-01-27 15:28:54 · 1094 阅读 · 6 评论 -
《Leaflet 基础知识点》- 计算两点距离
注意这是经纬度var latlng = L.latLng(38.8235, 106.3955);// 距离(m)var distance = latlng.distanceTo(L.latLng(38.1235, 106.1955));原创 2021-01-27 16:09:38 · 2070 阅读 · 0 评论