要获取MapTalks地图的状态,可以使用以下方法:
1. 使用`maptalks.getMapState()`函数获取地图状态。这个函数会返回一个包含地图状态信息的对象,例如地图的缩放级别、中心点坐标等。
示例代码:
var mapState = maptalks.getMapState(); console.log(mapState);
2. 使用`maptalks.getZoom()`和`maptalks.getCenter()`函数分别获取地图的缩放级别和中心点坐标。
示例代码:
var zoom = maptalks.getZoom(); var center = maptalks.getCenter(); console.log("缩放级别: " + zoom); console.log("中心点坐标: " + center);
注意:这些方法需要在MapTalks地图实例上调用。
<!DOCTYPE html> <html> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>地图 - 获取地图状态</title> <style type="text/css"> html,body{margin:0px;height:100%;width:100%} .container{width:100%;height:100%} #status{position:fixed;left:0px;top:0px;width:100%;height:140px;overflow:hidden} #status div{background-color:rgba(13, 13, 13, 0.5);width:100%;height:100%;padding:10px 10px 10px 10px;font:13px bold sans-serif;color:#fff} </style> <link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css"> <script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script> <body> <div id="map" class="container"></div> <div id="status"></div> <script> var map = new maptalks.Map('map', { center: [-0.113049,51.498568], zoom: 14, centerCross: true, baseLayer: new maptalks.TileLayer('base', { urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', subdomains: ['a','b','c','d'], attribution: '© <a href="http://osm.org">OpenStreetMap</a> contributors, © <a href="https://carto.com/">CARTO</a>' }) }); map.on('zoomend moving moveend', getStatus); getStatus(); function getStatus() { var extent = map.getExtent(), ex = [ '{', 'xmin:' + extent.xmin.toFixed(5), ', ymin:' + extent.ymin.toFixed(5), ', xmax:' + extent.xmax.toFixed(5), ', ymax:' + extent.xmax.toFixed(5), '}' ].join(''); var center = map.getCenter(); var mapStatus = [ 'Center : [' + [center.x.toFixed(5), center.y.toFixed(5)].join() + ']', 'Extent : ' + ex, 'Size : ' + map.getSize().toArray().join(), 'Zoom : ' + map.getZoom(), 'MinZoom : ' + map.getMinZoom(), 'MaxZoom : ' + map.getMaxZoom(), 'Projection : ' + map.getProjection().code ]; document.getElementById('status').innerHTML = '<div>' + mapStatus.join('<br>') + '</div>'; } </script> </body> </html>
此处为隐藏内容,请评论后查看隐藏内容,谢谢!
发表评论