如何使用 Leaflet open street map in angular 将地图中心位置更改为顶部位置答案

【问题标题】：How to change the map center position to top place using Leaflet open street map in angular如何使用 Leaflet open street map in angular 将地图中心位置更改为顶部位置
【发布时间】：2021-02-05 09:45:03
【问题描述】：

在我的角度应用程序中，我创建了传单地图，在传单地图上，我以重叠的方式创建了另外两个面板数据，并且我在地图上创建了半径为 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);

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

【问题讨论】：

标签： leaflet openstreetmap leaflet.draw angular-leaflet-directive leaflet.markercluster

【解决方案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})

【讨论】：

谢谢，但是它显示在地图的中心并且尺寸很大。但我想要左边的圆圈。你能帮我解决这个问题吗
@Haritha 你能创建一个应该是什么样子的图像吗？您希望圆圈显示在地图的左侧并且地图不缩放，对吗？
是的，我希望圆圈显示在地图的左侧而不是中心