Mapbox.js API自动缩放为GeoJSON
Mapbox .js API Auto Zoom to GeoJSON
我有一个简单的页面,其中有一个基于mapbox的映射,使用GeoJSON填充所需的LineStrings。我正在寻找一种在每次加载地图时自动设置范围的方法。目前,我正在计算最大和最小纬度/经度,并以这种方式设置视图,但在这样做时,我仍然需要定义缩放级别。我已经看到了一些与设置边界有关的函数,但在仍然使用GeoJSON的情况下,我似乎无法做到这一点。有什么建议吗?
<script>
L.mapbox.accessToken = '[removed]';
var geojson = [
{
"type": "Feature",
"properties": {
"stroke": "#0324a7",
"stroke-width": 2,
"stroke-opacity": 1
},
"geometry": {
"type": "LineString",
"coordinates": [ [-123.116589,49.209164],[-123.117103,49.208972],[...removed for clarity...],[-123.111908,49.284047] ]
},
"properties": {
"title": "10 DOWNTOWN",
"stroke": "#0324a7",
"stroke-width": 5,
"stroke-opacity": 1
}
},
{
"type": "Feature",
"properties": {
"stroke": "#0324a7",
"stroke-width": 2,
"stroke-opacity": 1
},
"geometry": {
"type": "LineString",
"coordinates": [ [-123.134782,49.203239],[-123.135147,49.203328],[-123.135894,49.203637],[-123.136782,49.203951],[-123.138169,49.204423],[-123.138759,49.20457],[-123.139587,49.204862],[-123.140005,49.205046],[-123.140243,49.205186],[-123.140395,49.205325],[-123.140532,49.205506],[-123.140631,49.205792],[-123.140586,49.20707],[-123.140534,49.208535],[-123.140463,49.210515],[-123.140448,49.210886],[-123.140432,49.211372],[-123.140401,49.212256],[-123.14037,49.213145],[-123.140369,49.213145],[-123.14036,49.213735],[-123.140355,49.213998],[-123.140776,49.214006],[-123.140789,49.213746] ]
},
"properties": {
"title": "10 GRANVILLE TO 63RD",
"stroke": "#0324a7",
"stroke-width": 5,
"stroke-opacity": 1
}
},
{
"type": "Feature",
"properties": {
"stroke": "#0324a7",
"stroke-width": 2,
"stroke-opacity": 1
},
"geometry": {
"type": "LineString",
"coordinates": [ [-123.134782,49.203239],[-123.135147,49.203328],[...removed for clarity...],[-123.127194,49.277803],[-123.128135,49.278406] ]
},
"properties": {
"title": "10 TO DAVIE",
"stroke": "#0324a7",
"stroke-width": 5,
"stroke-opacity": 1
}
},
{
"type": "Feature",
"properties": {
"stroke": "#0324a7",
"stroke-width": 2,
"stroke-opacity": 1
},
"geometry": {
"type": "LineString",
"coordinates": [ [-123.134782,49.203239],[-123.135147,49.203328],[...removed for clarity...],[-123.116191,49.281213],[-123.117871,49.280109],[-123.118797,49.280722],[-123.119815,49.281368] ]
},
"properties": {
"title": "10 TO ROBSON",
"stroke": "#0324a7",
"stroke-width": 5,
"stroke-opacity": 1
}
},
{
"type": "Feature",
"properties": {
"stroke": "#0324a7",
"stroke-width": 2,
"stroke-opacity": 1
},
"geometry": {
"type": "LineString",
"coordinates": [ [-123.110919,49.284708],[-123.111908,49.284047],[-123.112864,49.283416],[...removed for clarity...],[-123.116589,49.209164] ]
},
"properties": {
"title": "10 GRANVILLE",
"stroke": "#0324a7",
"stroke-width": 2,
"stroke-opacity": 1
}
},
{
"type": "Feature",
"properties": {
"stroke": "#0324a7",
"stroke-width": 2,
"stroke-opacity": 1
},
"geometry": {
"type": "LineString",
"coordinates": [ [-123.110919,49.284708],[-123.111908,49.284047],[...removed for clarity...],[-123.134852,49.202151] ]
},
"properties": {
"title": "10 TO MARPOLE",
"stroke": "#0324a7",
"stroke-width": 2,
"stroke-opacity": 1
}
}];
var map = L.mapbox.map('map', 'mapbox.streets');
map.setView([49.2437385, -123.1258535], 12);
L.geoJson(geojson, { style: L.mapbox.simplestyle.style }).addTo(map);
</script>
提前感谢!
L.GeoJSON
从L.FeatureGroup
继承了getBounds
方法。你可以用它来获取你的层的边界:
返回要素组的LatLngBounds(根据其子对象的边界和坐标创建)。
http://leafletjs.com/reference.html#featuregroup-获取边界
var geojsonLayer = L.geoJson(geojson, {
style: L.mapbox.simplestyle.style
}).addTo(map);
var bounds = geojsonLayer.getBounds();
您可以将这些边界与L.mapbox.map(L.map)实例的fitBounds
方法一起使用:
设置一个地图视图,该视图包含具有最大缩放级别的给定地理边界。
http://leafletjs.com/reference.html#map-fitbounds
map.fitBounds(bounds);
相关文章:
- 更改高贴图的缩放级别
- 在不阻止默认行为的情况下检测IE10中的缩放
- 单击超链接时,如何使用Google Maps API v3缩放地图
- 缩放Raphael/SVG容器以适应所有内容
- 传单缩放控制位置错误
- 在不移动内部文本的情况下缩放元素的效果
- 调整缩放窗口高度提升缩放
- 计算CSS3缩放框在另一个框中的最高位置
- D3.JS向rect添加缩放和列表项
- 当我在节点上拖动鼠标时,我如何防止使用d3.ehavior.zoom().on(“缩放”,重绘)
- 将直流图表库中的折线图缩放限制为小时
- 为什么缩放按钮不会显示在照片擦除中
- 动态设置谷歌地图缩放
- 如何缩放像图像一样的元素
- 使用KineticJS变换(移动/缩放/旋转)形状
- 在手机上缩小/缩放滚动图像
- 将时间缩放添加到折线图(Chart.js)
- 当涉及css缩放时,如何获得页面上的点击位置
- Mapbox.js API自动缩放为GeoJSON
- react-传单:如何基于geojson设置缩放