需求是控制摄像头获取摄像头的视角
方案一：存在圆有扁
<!--* @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: '© <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: '© <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>方案二效果图：
