如何绘制停留在leaflet.js地图中心的圆
如何绘制停留在leaflet.js地图中心的圆
提问于 2020-04-11 15:35:52
如何绘制停留在leaflet.js地图中心的圆圈？这个圆的半径是1公里。我想要绘制的圆圈和停留在图像的中心，无论用户如何平底。如果用户放大，圆圈应该相应地改变大小。
我想知道我是否必须在传单之外做，创造另一个画布，或者有一个简单的方法来实现这一点？
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-04-12 09:54:09
听地图上的move事件。
var circle = L.circleMarker(mymap.getCenter(), {
radius: 50,
color: 'red',
fillOpacity: 0.2,
}).addTo(mymap);
mymap.on('move',function(e){
circle.setLatLng(mymap.getCenter());
mymap._renderer._update();
});此外，您还可以添加scrollWheelZoom: 'center'来按圆圈缩放。
L.map('mapid',{scrollWheelZoom: 'center'})Stack Overflow用户
发布于 2020-04-12 10:01:22
Falke接受的答案很好，非常直接，但它使用的是L.Map私有方法(没有文档)。
一个更普遍的解决办法是：
- 在地图上方创建一个div以保持您的圆圈。每次缩放地图时，都会重新计算div的位置和大小(您需要为这些由div捕获的calculations).
- Mouse事件使用传单映射函数，需要将它们分派到地图上(因为中心div不是地图div的子程序)
。
下面是一个例子：https://yafred.github.io/leaflet-tests/20200412-draw-circle-in-the-middle-of-the-map/
以下是代码：
<!DOCTYPE html>
<html>
<head>
<title>Quick Start - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
<style>
#center {
visibility: hidden;
top: -215px;
left: 285px;
height: 30px;
width: 30px;
border-radius: 50%;
opacity: 0.4;
background-color: blue;
z-index: 650;
position: relative;
}
</style>
</head>
<body>
<div style="width: 600px; height: 400px; overflow: hidden">
<div id="map" style="width: 600px; height: 400px;"></div>
<div id="center"></div>
</div>
<p>Zoom in or out.</p>
<p>The circle is redrawn to have a 1km diameter.</p>
<div id="events">
</div>
<script>
var map = L.map('map').setView([48.858475, 2.338285], 13);
L.tileLayer('//a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="//www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.control.scale().addTo(map);
// Map event handlers
function zoomEnd(e) {
var widthMeters = map.distance(map.getBounds().getNorthWest(), map.getBounds().getNorthEast());
var widthPixels = map.getSize().x;
var heightPixels = map.getSize().y;
var radiusPixels = Math.round(1000 * widthPixels / widthMeters);
// change style
document.getElementById('center').style.height = 2*radiusPixels + 'px';
document.getElementById('center').style.width = 2*radiusPixels + 'px';
document.getElementById('center').style.left = (Math.round(widthPixels/2) - radiusPixels) + 'px';
document.getElementById('center').style.top = '-' + (Math.round(heightPixels/2) + radiusPixels) + 'px';
document.getElementById('center').style.visibility = "visible";
// log
document.getElementById('events').innerHTML += 'zoom ' + map.getZoom() + '<br/>';
document.getElementById('events').innerHTML += 'width in meters ' + Math.round(widthMeters) + '<br/>';
document.getElementById('events').innerHTML += 'width in pixels ' + widthPixels + '<br/>';
document.getElementById('events').innerHTML += 'radiusPixels ' + radiusPixels + '<br/>';
document.getElementById('events').innerHTML += 'top ' + (0 - Math.round(heightPixels/2) + radiusPixels) + '<br/>';
}
function zoomStart(e) {
document.getElementById('events').innerHTML = '';
document.getElementById('center').style.visibility = "hidden";
}
map.on('zoomstart', zoomStart);
map.on('zoomend', zoomEnd);
centerEventDispatcher = function(e) {
new_e = new e.constructor(e.type, e);
document.getElementById("map").dispatchEvent(new_e);
}
document.getElementById("center").addEventListener("mousedown", centerEventDispatcher);
document.getElementById("center").addEventListener("mouseup", centerEventDispatcher);
document.getElementById("center").addEventListener("mousemove", centerEventDispatcher);
// initial circle
zoomEnd();
</script>
<!-- analytics -->
<script>
if(window.location.hostname != "localhost") {
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-21317761-7', 'auto');
ga('send', 'pageview');
}
</script>
</body>
</html>Stack Overflow用户
发布于 2021-06-22 16:58:41
YaFred的方法很好，但是使用圆圈上新的pointer-events: none; css属性将鼠标事件通过圆圈传递到地图上要简单得多。
所以基本上：
- 绘制您的地图
- 在其下方添加一个圆形div，使用css，类似于.
.radius-circle {
border-radius: 50%;
opacity: 0.4;
background-color: blue;
z-index: 650;
position: relative;
height: 160px;
width: 158px;
left: 220px;
top: -280px;
pointer-events: none;
}注意负的上边框可以将其拉到地图上，指针事件设置可以使鼠标事件通过。
基本上这就是你要做的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61159376
复制相关文章
相似问题
腾讯云开发者
