程序边界

5.0之后需要使用如下语句引入：import * as turf from '@turf/turf'https://github.com/Turfjs/turf/issues/1091

export function GetDistance1( lng1, lat1, lng2, lat2){ // 角度转弧度 let a = Math.PI / 180; let t1 = Math.sin(lat1 * a) * Math.sin(lat2 * a); let t2 = Math.cos(lat1 * a) * Math.cos(lat2 * a); let t3 = Math.cos(lng1 * a - lng2 * a); let t4 = t2 *

文章目录在使用 leaflet-geoman的时候，发现每次pm:cut之后还会触发pm:edit。。。不止别扭，还误事儿我之前使用的办法：由于在cut之后会生成一个新的layer（有新id和坐标数组），我们需要的正是新的layer所对应的坐标数组；而经过cut的edit拿到的还是旧的layer（旧id和坐标数组）因此可利用这个特点（找不到index会返回-1）：（省略部分代码）map.on('pm:create', ({ layer }) => { ... ids.push(

文章目录【笔记】Leaflet-MiniMap简单应用之前在项目中引入了minimap，后面在新加地图切换组件时发现需要minimap也保持联动，写好代码之后发现有bug：地图和minimap单独切换时一切正常，可是联动就报错：Cannot read property ‘parentNode’ of null 。。。于是猜想：难道layer不能共用？验证之后，果然。。。解决：layer分别定义两版：// 天地图 矢量图层vecLayer = L.tileLayer(...),mi

文章目录还是接着前面的，旋转和偏移问题已经解决，但是地图缩放后车辆方向被初始化，。。。事情发生在地图缩放，那一定是和缩放事件有关。果然，通过监听zoomstart和zoomend发现，地图在开始缩放前car._icon.style.transform的值还带有rotate，缩放后就没有了。。。看来是缩放后地图的相对坐标发生了变化(car._icon._leaflet_pos:{x,y})，因此只有transform，解决办法就是zoomend后修改transform旋转图标：map.on("zo

文章目录【已解决】获取L.motion.polyline过程中marker的实时坐标_云达阁-CSDN博客前面我们已经可以在车辆移动过程中获取它的实时坐标，那么车辆转向或是说车辆行进方向如何表示呢？实际按我之前的博客（链接在上面）操作过的仔细观察就会发现，实时坐标是latlng，还有一个oldLatLng，顾名思义，就是上一个坐标，那么两个坐标一定可以确定方向，我前面的博客多次使用到turf库，那么根据两点计算方向角的方法也一定有！！！果不其然被我找到了。一顿操作猛如虎：e.target

文章目录map.on("click", ({ latlng }) => { console.log("坐标：", Object.values(latlng));})水。。。over

文章目录使用横向放置方案一方案二https://leafletjs.com/reference-1.7.1.html#control-zoom使用可以直接使用：map的options中设置的zoomControl：let map = L.map("map", { ... zoomControl: false, // 禁用 + - 按钮});默认true，使用；可以切换 false ，禁用也可以使用L.control.zoom：L.control.zoom().add

文章目录https://leafletjs.com/reference-1.7.1.html#control-scaleL.control.scale() 是用来显示比例尺的，具体使用很简单，看文档就好，不多说。。。这里重点分享一下单位国际化（m：米、km：公里、ft：英尺、mi：英里）其实 m、km、ft、mi 已经很明确了，但总会有奇怪需求，需要"国际化"。。。文档并没有相关介绍，只能自己实现了。。。操控dom。。。：let scale = L.control.scale()s

文章目录leaflet.motion - npmhttps://github.com/Igor-Vladyka/leaflet.motion使用leaflet 搭配 插件leaflet.motion可以很好的实现轨迹动画的启停，可若要在动画轨迹过程中实时获取坐标，在文档中并没有找到相关记载。。。具体用法不多说，如何找到实时获取坐标的方法？接着看：let line = L.motion.polyline(...);console.log(line.getMarker())getMa

文章目录修改样式外部容器样式修改一个按钮两种状态，可相互切换：let layerButton = L.easyButton({ states: [{ stateName: 'zoom-to-forest', // name the state icon: 'fa-tree', // and define its properties title: 'zoom to a forest', //

文章目录安装设置Leaflet-MiniMap：一个用于Leaflet的小地图控件插件leaflet-minimap - npmhttps://leafletjs.com/reference-1.7.1.html#pathLeaflet-MiniMap，也就是我们常说的小地图或 鹰眼 ：安装npm i leaflet-minimap设置new L.Control.MiniMap(this.img, { zoomAnimation: true, // 动画缩放 a

文章目录搭配其他组件例如leaflet-geoman创建围网来控制marker的高亮报警时，一定会遇到报错：Cannot read property 'classList' of undefined试了好多种办法都没有奏效，只能通过try catch将更改高亮状态的语句包起来，以免影响下一条语句的执行（一定要单独包裹！！！）：this.markers.map( marker => { if(!marker.options.highlight) { try {

文章目录leaflet-geoman启用编辑模式时，map上所有（marker、polyline、Polygon等）元素处于编辑状态特别影响体验，尤其是使用了L.motion后，由于切割较碎导致数据量特别大，严重影响性能。。。：你没有看错，途中路径上蓝色的，看起来一层一层的，都是编辑节点，可想而知有多少。。。对性能的影响有多大。。。文档中查找无果，想到github的issue中应该也会有这种问题，果然被我找到了！Editing only one / two polygons · Issue

文章目录leaflet-geoman画的圆，半径不准？turf中没有判断点在圆内的方法？两个问题一起解决！首先来看画好的圆会有一个layer对象：可以看到里面有_mRadius、_radius、_radiusY可是经过验证，都不是以 米、千米、英里、海里 为单位。。。那怎么玩？在issue里也没有找到解决方案后来通过不懈努力，终于在layer的层层属性中找到了可以用的数据：圆周上的200个点的latlng值！！！这样不就更好了吗！！！绝对是精确的半径！！！layer.pm._h

文章目录使用leaflet-geoman的过程中发现，在触发pm:cut后无法继续触发pm:cut/edit/draped/remove，又想到这一系列事件触发的过程是这样的：pm:create{ pm:edit{} pm:draped{} pm:cut{} pm:remove{}}而pm:cut/draped/remove执行完毕会回调pm:edit通过下面实验可知想要后续触发pm:cut/edit/draped/remove需要拿到pm:cut后的layer对象：layer.o

popup元素在打开之前在dom树上不存在

文章目录问题分析解决问题分析两个项目合并时，由于两个不同的组件分别有一个L.map，而在组件切换时，未能正确销毁之前的L.map，因此报错Map container is already initialized.：解决第一步：在main.js中添加：Vue.prototype.$map = { _leaflet_id: -1 }第二步：两个组件都做如下处理：首次加载的组件初始化L.map并赋值到this.$map，后面再使用就直接调用this.$map，为不影响之前代码还是放在组件comp