![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
leaflet
fk129
这个作者很懒,什么都没留下…
展开
-
leaflet曲线2
获取两点间的贝塞尔曲线坐标集合,在结合动画绘制可实现leaflet动态曲线效果原创 2022-06-17 08:58:58 · 1107 阅读 · 1 评论 -
已知两点坐标,计算两点的方向角度
在已知两点坐标的情况,我们如果去计算两点的角度呢?在计算角度之前,先了解下会用到的函数Math.atan2Math.atan2()概述Math.atan2()返回从原点(0,0)到(x,y)点的线段与x轴正方向之间的平面角度(弧度值),也就是Math.atan2(y,x)语法Math.atan2(y, x) 参数y, x数值描述atan2方法返回一个 -pi 到 pi 之间的数值,表示点 (x, y) 对应的偏移角度。这是一个逆时针角度,以弧度为单位,正X轴和点 (原创 2022-04-13 15:08:01 · 2833 阅读 · 0 评论 -
leaflet 绘制可编辑圆形
Leaflet Draw页面引入 leaflet draw 文件首先在地图上绘制圆形,我们需要圆心坐标(latlng)和半径(radius)来确定需要绘制圆的位置和大小// latlng 圆心坐标点 ,radius 半径let circle = L.circle(latlng, radius);圆形绘制了,现在我们需要把状态改成编辑状态(可拖动、改变半径)circle.editing.enable();添加圆形图层到地图地图上circle.addTo(map)可通.原创 2022-03-31 11:03:22 · 1362 阅读 · 0 评论 -
Leaflet.MiniMap 切换地图
在项目中使用leaflet来实现地图的相关效果,其中就有容器地图(大地图)需要切换电子地图和卫星地图;当然这部分最后是实现了,但是发现我们右下角使用leaflet.minimap实现的鹰眼地图(小地图)的底图瓦片没有跟地图的底图瓦片切换对应;如大小地图都是初始化加载电子地图,结果大地图切换成卫星地图的时候,小地图还是电子地图到这里我们肯定是想把小地图也切换为跟大地图一样的底图瓦片,保持视图的统一;通过查看文档和源码我们知道可以使用changeLayer来实现改变底图瓦片图层的效果// 初始原创 2021-09-17 16:35:23 · 1591 阅读 · 0 评论 -
坐标系的转换 - 地图纠偏
了解下各个厂家使用的坐标系:国家测绘局规定国内的地理位置信息至少进过一次加密,发布GCJ-02加密算法,对真实坐标进行加密处理,称为火星坐标系/国测局坐标。高德地图使用的就火星坐标系(GCJ-02)百度地图在此基础上又进行了一次加密处理,称为百度坐标系(BD-09)世界标准地理坐标(WGS-84),又称原始坐标,一般国际的GPS使用的就是这种坐标系坐标转换的话,各个厂家都有提供,但是是不公开,得调用接口。下面用eviltransform来进行坐标转换,提供坐标系之间的转换,还提.原创 2021-04-27 14:29:57 · 467 阅读 · 0 评论 -
筛选直线一定范围内的坐标点
//经纬度转换成三角函数中度分表形式。rad:function(d) { return d * Math.PI / 180.0;},计算两点间的距离,也可以用leaflet提供的distance方法/*** 计算两个经纬度间的距离* @param lat1 纬度* @param lng1 经度* @param lat2 纬度* @param lng2 经度*/geoDistance:function(lat1, lng1, lat2, lng2) { let r原创 2021-01-26 14:21:55 · 457 阅读 · 1 评论 -
leaflet 绘制半圆扇形 饼图
插件Leaflet-semicircle示例demo http://jieter.github.io/Leaflet-semicircle/examples/semicircle.html/*** [] 坐标* radius 半径* startAngle 开始角度* endAngle 结束角度*/L.semiCircle([51.5, -0.09], { radius: 500, startAngle: 45, stopAngle: 135}).addTo(map);原创 2021-01-26 09:15:51 · 1795 阅读 · 1 评论 -
leaflet 曲线
项目开发过程中有绘制历史轨迹的功能,上面说直线绘制效果不是太好,想看看曲线绘制的效果。由于leaflet没有提供绘制曲线的方法,只能自己算出曲线的坐标点以直线相连,绘制成曲线算法部分https://blog.csdn.net/TarkuNi/article/details/99054036<!DOCTYPE html><html><head> ......原创 2020-04-21 09:10:34 · 2586 阅读 · 2 评论 -
leaflet 大数据处理 点聚合功能
官方文档:https://github.com/SINTEF-9012/PruneCluster引入文件;<link rel="stylesheet" href="static/leaflet/leaflet.css" /><script src="static/leaflet/leaflet.js" type="text/javascript"></scrip...原创 2020-03-20 10:42:24 · 1397 阅读 · 0 评论 -
leaflet 绘制轨迹
// 轨迹 var gjtc = {layers:[]}; var londonBrusselFrankfurtAmsterdamLondon = [[51.507222, -0.1275], [50.85, 4.35],[50.116667, 8.683333], [52.366667, 4.9], [51.507222, -0.1275]]; // 轨迹形式1 // 初始绘制轨迹线,以...原创 2019-08-19 09:56:35 · 8316 阅读 · 2 评论 -
判断给定坐标点是否规定区域内
之前一个项目设计到GIS方面,使用的是leaflet;要求功能:是在地图上可以动态绘制图形,并筛选展示该图形区域内的标记点;首先,绘制图形的功能使用了leaflet.draw http://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html调用地图监听事件// 监听绘制完成 map.on(L.Draw.Event.CR...原创 2019-06-13 13:56:22 · 4127 阅读 · 2 评论 -
leaflet调用谷歌 天地图 高德地图
Leaflet调用各种地图的功能十分复杂,幸好有leaflet.ChineseTmsProviders这个插件,这四种地图直接就可以加载进来,十分方便。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试</title>...转载 2019-04-24 10:23:52 · 3557 阅读 · 0 评论 -
leaflet 自定义marker图标
// 添加当前位置 标注 var icon = new L.Icon({ iconUrl: 'leaflet/images/marker-icon.png', shadowUrl: 'leaflet/images/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], popupAnch...原创 2019-02-13 11:29:05 · 2163 阅读 · 0 评论