时间戳

首页 > 解决方案 > 如何使用 Leaflet open street map in angular 将地图中心位置更改为顶部位置

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

问题描述

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

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

组件.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);

我是传单地图的新手，任何人都可以帮助我解决这个问题。

标签： leafletopenstreetmapleaflet.drawangular-leaflet-directiveleaflet.markercluster

解决方案

You can let the map fit the circle bounds, like:

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

map.fitBounds(circle.getBounds())

To show the circle on the left side of the map:

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

推荐阅读