leaflet 控制扇形的旋转角度

最新推荐文章于 2023-06-29 09:30:00 发布
最新推荐文章于 2023-06-29 09:30:00 发布
阅读量614 收藏 2
点赞数
分类专栏： leaflet 文章标签： leaflet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37550440/article/details/123820607
版权

需求是控制摄像头获取摄像头的视角

方案一：存在圆有扁

<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: Cookie
 * @Date: 2022-03-19 16:28:57
 * @LastEditors: Zhang
 * @LastEditTime: 2022-03-19 16:52:59
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin="" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="./leaflet.rotatedMarker.js"></script>
<script src="./semicircle.js"></script>
<style>
  .box {
    position: absolute;
    left: 200px;
    top:50px;
    z-index: 10000;
  }
  button {
    width: 100px;
  }
  .red {
    color: red;
  }
</style>
<div id="map" style="width: 100vw; height: 90vh;"></div>
<div class="box">
  <button onclick="init('add')">向左</button></button>
  <button onclick="init('minus')">向右</button>
</div>

</head>
<body>
 <script>
var map = L.map('map').setView([31.869952349588598, 117.21450805664062], 14);
var wpUrl = 'http://rt0.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0';

L.tileLayer(wpUrl, {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);


let ctx;
var deg = 0
var mylayerGroup;
function init(type='add') {
    if(type==='add') {
      deg+=30
    }else {
      deg-=30
    }
    console.log(deg)
    if(mylayerGroup) {
        mylayerGroup.clearLayers()
    }
    
    var clon = 117.21450805664062;
    var clat = 31.869952349588598;
    var points = getPoints([clat, clon], 0.019, 0, 360, 5000);
    points[points.length] = points[0];
    let layer1 = L.polygon(points,{color: 'rgba(0,0,0,...1)'}).addTo(map)
    var points = getPoints([clat, clon], 0.019, 45+deg, 90+deg, 50000);
    points[points.length] = points[0];
    let layer2 = L.polygon(points,{color: 'rgba(0,0,0,.5)',fillColor: '#323030'})
    mylayerGroup = L.layerGroup([layer1,layer2])
    map.addLayer(mylayerGroup)
    map.flyTo([clat, clon])
}
init()

function getPoints(center, radius, startAngle, endAngle,pointNum) {
    var sin;
    var cos;
    var x;
    var y;
    var angle;
    var points = new Array();
    points.push(center);
    for (var i = 0; i <= pointNum; i++) {
        angle = startAngle + (endAngle - startAngle) * i / pointNum;
        sin = Math.sin(angle * Math.PI / 180);
        cos = Math.cos(angle * Math.PI / 180);
        y = center[0] + radius * cos;
        x = center[1] + radius * sin;
        points[i] = [y, x];
    }
    var point = points;
    point.push(center);
    return point;
}

 
</script>
</body>
</html>

方案一效果图：

方案二：借助插件Leaflet-semicircle实现 

插件地址：GitHub - jieter/Leaflet-semicircle: Extend Leaflet's circle class to display semicircles.

<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: Cookie
 * @Date: 2022-03-19 16:28:57
 * @LastEditors: Zhang
 * @LastEditTime: 2022-03-19 16:52:59
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin="" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="./leaflet.rotatedMarker.js"></script>
<script src="./semicircle.js"></script>
<style>
  .box {
    position: absolute;
    left: 200px;
    top:50px;
    z-index: 10000;
  }
  button {
    width: 100px;
  }
  .red {
    color: red;
  }
</style>
<div id="map" style="width: 100vw; height: 90vh;"></div>
<div class="box">
  <button onclick="init('add')">向左</button></button>
  <button onclick="init('minus')">向右</button>
</div>

</head>
<body>
 <script>
var map = L.map('map').setView([31.869952349588598, 117.21450805664062], 14);
var wpUrl = 'http://rt0.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0';

L.tileLayer(wpUrl, {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);


var mylayerGroup;
var deg = 0
L.semiCircle([31.869952349588598, 117.21450805664062], {
  radius: 500,
	startAngle: 0,
	stopAngle: 360
}).addTo(map)
init1()
function init1(type='add'){
  if(mylayerGroup) {
        mylayerGroup.clearLayers()
    }
  if(type==='add') {
      deg+=30
    }else {
      deg-=30
    }
  console.log(Number(95) + Number(deg));
  
  let layer = L.semiCircle([31.869952349588598, 117.21450805664062], {
    radius: 500,
    startAngle: 95+deg,
    stopAngle: 135+deg
  })
  mylayerGroup = L.layerGroup([layer])
  map.addLayer(mylayerGroup)
}
</script>
</body>
</html>

方案二效果图：

流氓也是种气质 _Cookie
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于Leaflet实现图标旋转角度的效果(附源代码下载)
liu2004051957的博客
12-14 1645
本文将详细描述如何基于Leaflet开发库实现Marker图标旋转角度的应用效果
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' 旋转
web前端笔记
m0_74148715的博客
02-28 1047
html、css
零基础最详细html和css
qq_38698753的博客
05-12 1031
1.除IE外通用写法 类名或标签名::placeholder {color: red;} 2.加兼容前缀写法 css超出一行显示省略号： 给定宽度(width:100px)、 超出隐藏（overflow:hidden）、 强制在同一行显示（white-space: nowrap）、 省略号（text-overflow:ellipsis） ——常见字体单位—— 1.em 移动端常用的字体尺寸单位，相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前di
Canvans：绘制饼图和玫瑰饼图
席木木的博客
08-06 1030
Canvas是HTML5提供的一个新标签，默认是一块矩形的画布，Canvas本身是没有绘图能力的，但是通过JavaScript语言，可以在Canvas画布上绘制各种各样的效果。 常用的ECharts图表库就是基于Canvas绘图技术实现的，例如：常用的饼图样式如下，通过查看浏览器控制台可发现，这些图表都是被绘制在一个叫做canvas的HTML标签内，于是，接下来就尝试利用canvas+JavaScript进行绘图，来模仿实现饼图和玫瑰饼图。...
网页HTML到8.20前
weixin_30493321的博客
06-04 258
2015.6.4 HTML：超文本标记语言 CSS：样式表 JavaScript：脚本 HTML标签---成对儿出现的是双标签元素，单个儿出现的是单标签元素 一、通用标签 1.格式控制标签 <font></font>文字 color-文字颜色face-文字字体size-文字大小 <b></b>加粗 <i>&...
vue + leaflet实现图标指定方向随机旋转
最新发布
qq_40920553的博客
06-29 1223
vue + leaflet实现图标指定方向随机旋转
leaflet 绘制半圆扇形 饼图
fk129
01-26 1682
插件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);
Leaflet地图标记旋转角度、线条方向箭头示例
lihefei_coder的博客
11-03 2087
标记旋转角度 <!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" />
leaflet 画扇形
qq_26990355的博客
06-06 3196
1.生成扇形点的方法 /** * * @param center 中心点 数组 * @param radius 半径 * @param startAngle 起始角度 * @param endAngle 终止角度 * @param pointNum 圆弧上点的个数 */ function getPoints(center, radius, startAngle, endAngle...
基于Leaflet实现图标旋转角度效果的源代码
12-14
内容摘要:本源代码主要实现基于Leaflet开发库实现Marker图标旋转角度的效果 适用人群: WebGIS开发技术人员、设计人员等
Leaflet.piechartcluster
07-08
Leaflet.piechartcluster 将饼图放在地图上。 灵感来自
leaflet-rotate：Leaflet插件，允许添加旋转功能以映射图块
02-13
单张旋转一个Leaflet插件，允许向地图图块添加旋转功能有关工作示例，请参见以下 最初基于IvánSánchezOrtega的（请参阅： ） 旁注： 请注意，这是一个概念证明，显示了如何更改核心传单库以及如何将旋转功能用作...
leaflet子图层控制.rar
10-30
SuperMap iClient for Leaflet子图层控制的范例代码，直接运行html即可看到效果
HTML5新特性
weixin_69821704的博客
03-09 514
HTML5新特性之画布和百度地图的入门
leaflet实现自定义线、矩形和扇形的绘制
liuchao的博客
11-27 2098
采用原生的leaflet的API实现自定义线、矩形和扇形的绘制。完成自定义线、矩形、扇形的绘制。
vue中使用leaflet并对icon进行旋转
m0_74145101的博客
10-19 1385
在supermap中使用leaflet并对icon进行旋转操作
canvas绘制扇形，可以改变数量、扇形角度、扇形方向
z_blackbear的博客
05-07 1421
canvas绘制扇形，支持调整扇形角度，扇形方向 createCanvas() { // 创建一个canvas标签，你也可以在html直接插入，通过document.getElementById(id)的方式获取 this.ele = document.createElement('canvas'); // 设置canvas标签的 id 属性 this.ele.id = 'myCanvas' // 设置c
Fabric.js 自定义对象操作方式，自对应边框、边框角等
徊忆羽菲
10-09 1635
自定义选框风格(鼠标框选时) 自定义边界, 控制角 透明控制角 选中后自定义背景色 没有边框 没有控制角 没有边框，没有控制角 自定义光标在对象悬停 元素移动状态 不允许框选 部分元素不能选中(选不到圆) 自定义画布背景色 自定义画布背景图 重叠影象 禁止元素旋转 禁止元素缩放 禁止元素横向移动 禁止元素纵向移动
leaflet 通过矩形某个点旋转角度
06-03
如果要在Leaflet中通过矩形某个点旋转角度，可以使用leaflet-imageoverlay-rotated插件。这个插件可以让我们在leaflet地图上添加一个可旋转的图片覆盖层，并且可以通过指定旋转中心点的坐标和旋转角度来实现旋转。 以下是大致的实现步骤： 1. 引入leaflet-imageoverlay-rotated插件 在HTML文件中引入leaflet-imageoverlay-rotated插件： ```html <script src="./leaflet-imageoverlay-rotated.js"></script> ``` 2. 创建一个图片覆盖层 在JavaScript中创建一个图片覆盖层： ```javascript var imageUrl = 'path/to/image.jpg'; var imageBounds = [[lat1, lng1], [lat2, lng2]]; // 矩形的两个顶点 var imageOverlay = L.imageOverlay(imageUrl, imageBounds); ``` 3. 将覆盖层添加到地图上 ```javascript imageOverlay.addTo(map); ``` 4. 指定旋转中心点和旋转角度 ```javascript var rotationCenter = [lat, lng]; // 旋转中心点的坐标 var angle = 45; // 旋转角度，单位是度数 imageOverlay.setRotationOrigin(rotationCenter); imageOverlay.setRotationAngle(angle); ``` 注意：旋转中心点的坐标应该是矩形的某一个顶点。 5. 更新旋转角度 如果需要更新旋转角度，可以使用以下代码： ```javascript var newAngle = 90; // 新的旋转角度，单位是度数 imageOverlay.setRotationAngle(newAngle); ``` 6. 更新旋转中心点 如果需要更新旋转中心点，可以使用以下代码： ```javascript var newRotationCenter = [newLat, newLng]; // 新的旋转中心点的坐标 imageOverlay.setRotationOrigin(newRotationCenter); ``` 注意：更新旋转中心点时，应该使用当前矩形的某一个顶点作为旋转中心点。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值