如何使用 angular 中的 Leaflet 打开街道地图将地图中心位置更改为顶部

Question

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

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

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);

我是传单地图的新手，谁能帮我解决这个问题。

Answer 1

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

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,map.getZoom(),{animate: true})

如何使用 angular 中的 Leaflet 打开街道地图将地图中心位置更改为顶部

How to change the map center position to top place using Leaflet open street map in angular

openstreetmap

leaflet

angular-leaflet-directive

leaflet.draw

leaflet.markercluster