Leaflet GeoJSON 是否可以在到达目的地之前裁剪线要素?

2023-12-01

有没有一种简单的方法可以缩短 GeoJSON 图层上的线条?

我有一条线,它从 A 点到 B 点。我希望这条线在标记的半径附近停止。那可能吗?有点像从线路终点/起点的偏移量。

这是一个例子:

我有 50 x 50 的图标,但半透明(参见图片),并且有通往图标纬度/经度的线条,但我想在线条进入图标之前尝试裁剪或偏移线条,这样您就可以看不到图标下方的线。这可能吗?

如果这个问题不清楚,请评论。

enter image description here


这可以使用dashArray and dashOffset选项:

var map = new L.Map('leaflet', {
    center: [0, 0],
    zoom: 0
});

new L.CircleMarker([0, 90], {radius: 30}).addTo(map);
new L.CircleMarker([0, -90], {radius: 30}).addTo(map);

var polyline = new L.Polyline([[0, -90], [0, 90]]).addTo(map);

// Get length of the line
var totalLength = polyline.getElement().getTotalLength();

polyline.setStyle({
    // Set dashArray to the length of the line minus radius * 2
    dashArray: totalLength - 60,
    // Offset by radius
    dashOffset: -30
});
body {
    margin: 0;
}

html, body, #leaflet {
    height: 100%;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Leaflet 1.2.0</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link type="text/css" rel="stylesheet" href="//unpkg.com/[email protected]/dist/leaflet.css" />
    </head>
    <body>
        <div id="leaflet"></div>
        <script src="//unpkg.com/[email protected]/dist/leaflet.js"></script>
    </body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Leaflet GeoJSON 是否可以在到达目的地之前裁剪线要素? 的相关文章

随机推荐

  • Laravel 4 表单生成器自定义字段宏

    我正在尝试创建一个自定义 HTML 5 日期字段以在 laravel 4 框架视图中使用 Form macro datetime function field name return Form label event start Event
  • (Facebook C# SDK) 获取访问令牌时出现问题

    我对 Facebook C SDK 5 0 3 很陌生 这可能就是这个问题的原因 基本上 我试图获取当前用户的个人资料 电子邮件 照片等 在下面您将找到我的两个页面 MyLogin aspx 和landpage aspx 的代码 我使用网络
  • 在嵌套类中声明固定长度的数组

    我有一个 A 类 它有一个嵌套的 B 类 A 类将创建 B 类的 n 个 运行时参数 实例 在 A 的构造函数中 在需要在运行时进行计算之后 我计算一个大小 假设为 s 现在 每个 B 类都会保存一个大小为 s 的数组 但是 我不允许使用
  • Django Rest 框架和 JSONField

    给定一个 Django 模型JSON字段 使用序列化和反序列化它的正确方法是什么Django 休息框架 我已经尝试过创建自定义serializers WritableField并压倒一切to native and from native f
  • 在数字字符串中添加逗号[重复]

    这个问题在这里已经有答案了 我的程序中运行一个值 该值最后会四舍五入到小数点后两位 如下所示 print Total cost is 0 2f format TotalAmount 有没有办法在小数点左边每 3 位插入一个逗号值 e g 1
  • 如何停止“setInterval”[重复]

    这个问题在这里已经有答案了 我该如何停止和开始setInterval 假设我有一个textarea 我想停下来setInterval聚焦并重新启动setInterval模糊 使用 jQuery 你必须存储timer id启动它时的时间间隔
  • 在 SwiftUI 中一一叠加视图

    我有以下带有一个结构和两个视图的代码 点击第一个屏幕覆盖按钮时 我想显示第二个屏幕覆盖并隐藏前一个 依此类推 任何帮助表示赞赏 import SwiftUI struct ContentView View var body some Vie
  • 将向量转换为具有多列的数据框

    我有一个向量 如下所示 99 Hershey 6 7 B 7 4 7 B 562 M Consumer Packaged Goods 100 Costco 6 7 B 14 117 3 B Retail 为了简单起见 我只提到了 700 个
  • 为静态Web应用程序购买域名

    I have deployed a static web application Gatsby now I want purchase a domain If the web was deployed to Azure App Servic
  • 如何选择/取消选择所有复选框?

    我有一个带有图像视图 文本视图和复选框的适配器 以及用于选择所有复选框的 全选 按钮 我搜索了很多关于如何执行此操作 选择所有复选框 的信息 但它不起作用 谁能解释更多我应该做什么 拜托 我必须做这件事紧急 这是我的适配器 Public c
  • 将 SQL 转换为 HQL [关闭]

    Closed 这个问题是无关 目前不接受答案 我正在尝试将以下 SQL 查询转换为 HQL 但遇到了一些问题 逐行直线转换不起作用 我想知道是否应该在 HQL 中使用 Inner Join SELECT UNIX TIMESTAMP cos
  • 为什么在安装 .NET Core 2.1.3 时出现 HTTP 错误 502.5

    我为运行 Windows Server 2016 的新计算机安装了 NET Core 版本 2 1 3 我将其托管在 IIS 10 中 但它给了我错误 502 HTTP 错误 502 5 进程失败 此问题的常见原因 申请进程无法启动 申请流
  • TYPO3 StoragePid 和当前

    我构建了一个简单的注释 extbase 扩展 我想将其与打字稿一起包含在项目扩展 也是 extbase 中 项目扩展中的流畅代码如下所示
  • UITableViewCell 重用良好实践

    UITableViewCell tableView UITableView tableView cellForRowAtIndexPath NSIndexPath indexPath static NSString CellIdentifi
  • React.js 中刷新时丢失 useState 值

    我正在发送一个id from ProductListing组件 我收到了id using useParams in ProductDetail成分 在ProductDetail组件我正在使用 find 方法查找一个对象 然后将其设置为sin
  • 如何测量图像中的环境光水平?

    我正在考虑制作一个应用程序 使用相机来测量拍摄图像时存在的光量 一些条件行为会根据存在的光线量而发生 即 如果看起来很黑 则显示一条消息 看起来像睡觉时间 我知道这对于由于曝光等原因而存在的实际光量来说是一个相当糟糕的测量 但它不需要非常准
  • ReactJS - 使用重定向组件传递道具

    你应该如何传递 propsRedirect组件而不将它们暴露在 url 中 像这样
  • SFU 的特殊 CUDA 双精度三角函数

    我想知道我将如何使用 cos x 和分别 sin x 在带有 CUDA 的内核代码中 我在 CUDA 手册中查找到有这样一个设备函数 但是当我实现它时 编译器只是说我无法调用设备中的主机函数 然而我发现有两个姐妹函数cosf x and c
  • Nodejs多列独特mongoose的组合

    客观的 为两列创建唯一性 我尝试了什么 这是我的架构 var mongoose require mongoose location table Schema var locationSchema new mongoose Schema lo
  • Leaflet GeoJSON 是否可以在到达目的地之前裁剪线要素?

    有没有一种简单的方法可以缩短 GeoJSON 图层上的线条 我有一条线 它从 A 点到 B 点 我希望这条线在标记的半径附近停止 那可能吗 有点像从线路终点 起点的偏移量 这是一个例子 我有 50 x 50 的图标 但半透明 参见图片 并且