Question

尝试从Angular 5应用程序中使用Leaflet。

地图可以正确显示并且可以平移。但是我可以缩放地图，以使图像超出地图元素的边界。

我有：

<div id="image-map"></div>

该地图有一个导入项：

import {control, MapOptions, LatLng, layerGroup, LayerGroup, Map, LatLngBounds, ImageOverlay} from 'leaflet';

，然后在ngOnInit中：

const w = 3376;
const h = 1768;

const themap = new Map('image-map', { minZoom: 0.2, maxZoom: 4,
  center: [0, 0], zoom: 1, attributionControl : false, 
  inertia : false, 
  zoomControl : true
   } );
const southWest = themap.unproject([0, h ], themap.getMaxZoom() - 1 );
const northEast = themap.unproject([w, 0], themap.getMaxZoom() - 1 );
const bounds = new LatLngBounds( southWest, northEast );

const overlayMap = new ImageOverlay( '/assets/images/theImage.jpg', bounds );

overlayMap.addTo( themap );

themap.setMaxBounds( bounds );
themap.fitBounds( bounds );

这是针对CSS的：

#image-map {
width : 900px;
height : 400px;
margin: 0 auto 10px auto;
border: 1px solid #ccc; 
background: #252A2E

}

想必我缺少地图或叠加层的选项，但是我无法确定哪个选项。

Answer 1

缺少的是任何遇到类似问题的人的Leaflet样式表。

哦！

打字稿和传单-地图在范围之外缩放

1 个答案: