如何使用Angle的Leaflet Open Street Map将地图中心位置更改为最高位置

问题描述

在我的角度应用程序中，我创建了传单地图，并在传单地图上以重叠的方式创建了另外两个面板数据，并且在地图上创建了半径为5 km的圆。但是我的问题是面板覆盖了传单地图上的圆圈

所以我的要求是将地图的中心位置（即圆圈）移动到顶部位置（顶部中间），而不是只有圆圈可见，否则它将被地图上的面板覆盖。

component.ts

 map = L.map('map').setView([13.0827,80.2707],12);
   
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
      attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);


    L.control.zoom({
      position: 'bottomright',}).addTo(map);

我是传单地图的新手，有人可以帮我吗？

解决方法

您可以让地图适合圆形边界，例如：

var circle = L.circle() // Your circle

map.fitBounds(circle.getBounds())

要在地图左侧显示圆圈，请执行以下操作：

map.setView(circle.getLatLng(),map.getZoom(),{animate: false})

sw = map.getBounds().getSouthWest();
psw = map.latLngToContainerPoint(sw);
center = map.getCenter();

pc = map.latLngToContainerPoint(center);
dis = pc.x - psw.x;
middle = dis / 2

pnewCenter = L.point(pc.x+middle,pc.y)
center2 = map.containerPointToLatLng(pnewCenter);
map.setView(center2,{animate: true})