Leaflet中使用Leaflet.Path.Transform插件实现旋转图形

已于 2022-04-07 15:31:28 修改
阅读量1.9k 收藏 3
点赞数 1
分类专栏： GIS相关 文章标签： leaflet
于 2022-04-07 15:29:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/124017952
版权

场景

Leaflet快速入门与加载OSM显示地图：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 

在上面的基础上，实现对图形进行旋转。

 

Leaflet的L.Path.Transform插件实现了图形了旋转、拖拽、比例缩放等功能。

插件地址：

https://github.com/w8r/Leaflet.Path.Transform

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、下载插件并引入css

    <link rel="stylesheet" href="./css/transform/style.css" />
    <link rel="stylesheet" href="./css/transform/topcoat-desktop-light.css" />

 

2、引入bundle.js

<script src="./js/transform/bundle.js" type="text/javascript"></script>

并且修改bundle.js中地图相关参数为自己对应的参数

3、新建html代码

​
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>leaflet旋转图形</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <link rel="stylesheet" href="./css/transform/style.css" />
    <link rel="stylesheet" href="./css/transform/topcoat-desktop-light.css" />
</head>

<body >
    <div id="map"></div>
    <div id="controls">
        <div class="wrapper">
            <p>
                <ul>
                    <li>
                        <label class="topcoat-checkbox">
                            <input type="checkbox" id="scaling" checked />
                            <div class="topcoat-checkbox__checkmark"></div>
                            Scale
                        </label>
                    </li>
                    <li>
                        <label class="topcoat-checkbox">
                            <input type="checkbox" id="rotation" checked />
                            <div class="topcoat-checkbox__checkmark"></div>
                            Rotate
                        </label>
                    </li>
                    <li>
                        <label class="topcoat-checkbox">
                            <input type="checkbox" id="dragging" checked />
                            <div class="topcoat-checkbox__checkmark"></div>
                            Drag
                        </label>
                    </li>
                    <li><br></li>
                    <li>
                        <label class="topcoat-checkbox">
                            <input type="checkbox" id="uniform" checked />
                            <div class="topcoat-checkbox__checkmark"></div>
                            Uniform scaling
                        </label>
                    </li>
                </ul>
            </p>
        </div>
    </div>
    <!-- 引入图形旋转脚本库-->
    <script src="./js/transform/bundle.js" type="text/javascript"></script>
</body>

</html>

​

霸道流氓气质
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
基于Leaflet实现图标旋转角度的效果(附源代码下载)
liu2004051957的博客
12-14 1645
本文将详细描述如何基于Leaflet开发库实现Marker图标旋转角度的应用效果
Leaflet基础入门教程（一）
lz5211314121的博客
03-03 1966
leaflet加载天地图有两个地方需要特别注意，第一个是坐标系问题，需要先给leaflet指定坐标系，你可以指定4326 的地理坐标系，也可以是3857 的墨卡托投影坐标系。举个例子现在需要加载经纬度为单位的地图，那就要指定crs为EPSG4326，同样申请的天地图的服务为img_c如果是crs为EPSG3857那就需要加载img_w.我们有这样几种方式引入leaflet，第一种是cdn的形式，也就是在线的资源库，如果你是学生和小白为了测试和学习可以采用这种方式。leaflet默认是支持两种坐标系的。
leaflet-rotate：Leaflet插件，允许添加旋转功能以映射图块
02-13
单张旋转 一个Leaflet插件，允许向地图图块添加旋转功能 有关工作示例，请参见以下 最初基于IvánSánchezOrtega的（请参阅： ） 旁注： 请注意，这是一个概念证明，显示了如何更改核心传单库以及如何将旋转功能用作独立插件。 如果您想使用更稳定和可靠的解决方案，请查看fnicollet的分支。 与以下项目相比，已对该项目的最新更改进行了更新： : : （参考： ） 兼容： 贡献者： ， ， ，
leaflet关于旋转地图问题
黄-小智的博客
02-12 2787
leaflet关于旋转地图问题 openLayers支持地图旋转，但要满足其他的功能需求，其文档和使用方式都相对比较复杂 据官网leaflet是无法支持地图在web端旋转的，但是可以借助大佬的改造，添加了setBearing方法，可以完成 leaflet-rotate地址 第一步：引用leaflet和大佬的leaflet-rotate（上面链接获取） 第二步：调用setBearing方法或地图初始化是使用bearing 在源码中方法的位置（./dist/leaflet-rotate-src.js）：
记录在使用leaflet-rotate-src.js时遇到的旋转拖动问题
最新发布
n2726213998_zxc的博客
03-22 225
设置开启旋转时双指缩放旋转后添加的图层无法跟着缩放和移动，比如geoGSON数据层。方法把*this.fire(‘rotate’);*方法注释掉问题解决。蓝色的是添加的geoJSON数据，双指移动中并没有跟着移动、缩放。只有底图瓦片可以移动和缩放了，除非手指离开屏幕。
vue + leaflet实现图标指定方向随机旋转
qq_40920553的博客
06-29 1225
vue + leaflet实现图标指定方向随机旋转
Leaflet：CanvasLayer
Lekia的博客
11-13 2428
Leaflet：CanvasLayer /* Generic Canvas Layer for leaflet 0.7 and 1.0-rc, 1.2, 1.3 copyright Stanislav Sumbera, 2016-2018, sumbera.com , license MIT originally created and motivated by L.Canvas...
leaflet-ant-path.zip
09-18
leaflet-ant-path.js leaflet-ant-path.js
leaflet小用途 --旋转覆盖、蒙版、分屏叠加图层、裁剪
小武的博客
03-15 4981
1.  plugins  --Tile/image display2. 旋转覆盖是从后台请求图片数据覆盖到请求数据绘制不规则图形（只有三个点，如下5可以裁剪得出所有的）中：用的是        Leaflet.ImageOverlay.Rotate方法，详细做法请查看leaflet官网中3. 蒙版，是底图是一个图层，鼠标移上去又是一个图层：        Leaflet.TileLayer.Mas...
Leaflet地图标记旋转角度、线条方向箭头示例
lihefei_coder的博客
11-03 2088
标记旋转角度 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
LeafletCustomedPopups:创建以更好地了解如何自定义传单弹出窗口，尤其是动态内容
05-23
LeafletCustomedPopups 创建以更好地了解如何自定义传单弹出窗口，尤其是动态内容
Leaflet.LabelTextCollision:Leaflet.LabelTextCollision是一个LeafletJS插件，用于在矢量数据上显示标签，同时避免标签冲突
05-22
Leaflet.LabelTextCollision Leaflet.LabelTextCollision是一个插件，用于在矢量数据上显示标签，同时避免标签冲突。 支持Leaflet 1.0.0+分支。 为避免标签重叠，此插件隐藏了一些标签。 首先定义的标签将优先于最后定义的标签，因此请从最重要的标签到最不重要的标签进行排列。 L.LabelTextCollision实现了一个L.Renderer基于L.Canvas ，以不产生过量可能减慢渲染的浏览器的DOM元素。 演示 查看 用法示例 创建一个新的L.LabelTextCollision实例，指定碰撞标志选项。 使用地图的renderer选项强制使用该实例渲染矢量数据 var labelTextCollision = new L.LabelTextCollision({ collisionFlg : true }); v
leaflet-compass:显示旋转指南针的传单插件！
07-23
传单.控制.指南针 一个传单控制插件，用于制作简单的旋转罗盘 在传单 0.7 和 1.2 中测试 在移动设备上需要 HTML5 API！ 测试平台： 安卓上的 Chrome iOS 上的 Safari 在线演示： 用法 将指南针控件添加到地图： map.addControl( new L.Control.Compass() ); 选项 选项 默认 描述 自动激活 错误的 启动时激活控制 显示数字 错误的 显示角度值底部罗盘 文本错误 '' 警报通知上的错误消息 调用错误 无效的 在指南针错误激活上运行的功能 角度偏移 2 旋转前的最小角度偏差，需要大角度偏移，因为设备在方向传感器中有噪声 位置 '右上' 地图内控制的位置 方法 方法 参数 描述 自动激活 错误的 启动时激活控制 获取角度 返回方位角 设置角度 角度 设置旋转指南针 启用 运行时主动跟踪 停用 运行时的非
Leaflet.AnimatedMarker-master.zip
06-12
Leaflet.AnimatedMarker-master.zip
ember-leaflet-rotated-marker:扩展标记层以支持旋转
05-26
余烬小叶旋转标记 该插件扩展了的<layers>组件以支持旋转。 这使用来完成。 不适用于IE <9 xss=removed xss=removed xss=removed> < layers xss=removed xss=removed xss=removed xss=removed> </ LeafletMap> 争论 类型 默认 描述 @rotationAngle Number 0 顺时针旋转角度（以度为单位）。 @rotationOrigin String 'bottom center' 旋转
Leaflet.Path.Transform:用于小叶矢量特征的Dragrotateresize处理程序
05-06
Leaflet.Path.Transform 矢量特征的拖动/旋转/调整大小处理程序。 包含 ，因此您无需再次包含它。 要求 传单1.0+ 原料药 npm install leaflet-path-transform --save 或包含dist/L.Path.Transform.js文件 require...
leaflet-ant-path.js
05-26
leaflet中动态路线资源
Leaflet 自定义Popup弹窗
Banterise的博客
03-11 8919
首先感谢 Leaflet - 自定义弹出框（popup）提供的扩展 但是实际结合组件化的使用过程中，对于弹窗内元素的高宽存在不确定性（即初始化时不传入容器的宽高），所以需要进一步对Popup组件进行拓展，以便适应更自由的窗体组件 稍微解读了下Leaflet对于popup组件的源代码，其实popup对于整体的地图容器来说，也只是地图上根据像素位置定位的元素之一，因此对其的控制也和其它图层一样，对初始...
leaflet-wmts.min.js下载
08-01
leaflet-wmts.min.js 是一个用于 Leaflet 地图库的 WMTS （ Web Map Tile Service ） 插件的 JavaScript 文件。 WMTS 是一种用于在 Web 上显示地图瓦片的服务规范。通过 WMTS 服务，可以将大量的地图数据切分成小块的瓦片，然后通过网络传输到客户端，最终在 Web 上以地图的形式展示。 leaflet-wmts.min.js 文件是用于支持 WMTS 服务的 JavaScript 插件。通过将该文件包含到 Leaflet 的项目中，就可以利用 Leaflet 库的功能来加载和显示 WMTS 服务提供的地图瓦片。 在使用 leaflet-wmts.min.js 之前，需要确保已经引入了 Leaflet 地图库的核心文件。接下来，可以通过在 HTML 文件中添加一个 script 标签来引入 leaflet-wmts.min.js 文件。例如： ```html <!DOCTYPE html> <html> <head> <!-- 引入 Leaflet 地图库核心文件 --> <link rel="stylesheet" href="https://unpkg.com/leaflet@^1.7.1/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@^1.7.1/dist/leaflet.js"></script> <!-- 引入 leaflet-wmts.min.js 文件 --> <script src="path/to/leaflet-wmts.min.js"></script> <style> #map { height: 400px; } </style> </head> <body> <div id="map"></div> <script> // 创建 Leaflet 地图对象 var map = L.map('map').setView([51.505, -0.09], 13); // 创建 WMTS 图层对象 var wmtsLayer = L.tileLayer.wmts('http://example.com/wmts', { layer: 'layer_name', tilematrixSet: 'matrix_set', format: 'image/png', transparent: true, attribution: 'Map data © <a href="http://example.com">Example</a>' }).addTo(map); </script> </body> </html> ``` 通过以上代码，就可以在 Leaflet 地图上加载并显示 WMTS 服务提供的地图瓦片了。 总结起来，leaflet-wmts.min.js 是一个支持 WMTS 服务的插件，用于在 Leaflet 地图库上加载和显示 WMTS 服务提供的地图瓦片。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

霸道流氓气质

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值