传单贴图并不总是加载在同一个WMS图层的中心
Leaflet map doesn't always load centered the same WMS Tile Layer
我正在使用Ionic框架与AngularJS和LeafletJS库开发一个应用程序。
当我第一次加载地图时,它显示正确居中
但是,当我切换到应用程序的另一个视图并返回到地图视图时,WMS Tile Layer的显示位置偏离了中心,只有一小部分在地图的左上角可以看到。
下面是代码片段,用于创建地图并加载WMS平铺层:
function crearPlano($scope, $http, infoService, sharedProperties, poisService, createModal) {
var building = localStorage.building,
floor = localStorage.planta,
floor_id = building + floor,
building_id = floor_id.replace(/'./g,"_").toLowerCase();
var parameters =
[
'proyecto/ows',
'service=WFS',
'version=1.0.0',
'request=GetFeature',
'typeName=proyecto:'+building_id,
'srsName=epsg:4326',
'outputFormat=application/json'
]
var url = APP_CONSTANTS.URI_Geoserver_1 + 'proyecto/ows?' + parameters.join('&');
$.ajax({
url : url,
type: 'GET',
dataType : 'json',
crossDomain: true,
headers: { 'Access-Control-Allow-Origin': '*' },
success: function(data) {
handleJson(data, sharedProperties, poisService, createModal, function(map){
sharedProperties.setMap(map);
});
}
});
function handleJson(data, floor_id, sharedProperties, poisService, createModal, callback) {
console.log("handleJson", data, floor_id);
var map = sharedProperties.getMap(),
coordinates = data.features[0].geometry.coordinates[0][0][0],
floorCoordinates = new L.latLng(coordinates[1], coordinates[0]);
//Remove previous plan layers
if(!(typeof map == 'undefined')) { map.remove(); }
var imageLayer = new L.tileLayer.wms(APP_CONSTANTS.URI_Geoserver_2 + "sigeuz/wms",
{
layers: 'sigeuz:vista_plantas',
maxZoom: 25,
zIndex: 5,
viewparams : 'PLANTA:'+floor_id,
format: 'image/png', transparent: true, attribution: floor_id
});
console.log("Before create map --> Center", JSON.stringify(floorCoordinates));
console.log("Before create map --> MaxBounds", JSON.stringify(L.geoJson(data).getBounds()));
map= new L.map('plan'
,{
crs: L.CRS.EPSG3857,
layers: [imageLayer]
}
).setView(floorCoordinates, 20);
console.log("After create map --> Center", JSON.stringify(plano.getCenter()));
console.log("After create map --> Bounds", JSON.stringify(plano.getBounds()));
callback(map);
}
}
为什么地图只在第一次加载时居中,而在第一次加载后就会移位?
我在代码中添加了一些控制台日志,以便调试作为参数传递给映射创建和映射创建后的数据的数据。这样我就可以比较在前面描述的两种情况下是否发生了变化。结果如下:
Before create map --> Center {"lat":41.64063807836347,"lng":-0.90146666131869}
Before create map --> MaxBounds {"_southWest":{"lat":41.64061302810611,"lng":-0.9015017606364195},"_northEast":{"lat":41.64079735418267,"lng":-0.9012732012812255}}
After create map --> Center {"lat":41.6406381751715,"lng":-0.9014656782889374}
After create map --> Bounds {"_southWest":{"lat":41.64032848115259,"lng":-0.9017432869219788},"_northEast":{"lat":41.640947867702096,"lng":-0.9011880696558963}}
Before create map --> Center {"lat":41.64063807836347,"lng":-0.90146666131869}
Before create map --> MaxBounds {"_southWest":{"lat":41.64061302810611,"lng":-0.9015017606364195},"_northEast":{"lat":41.64079735418267,"lng":-0.9012732012812255}}
After create map --> Center {"lat":41.64063807836347,"lng":-0.90146666131869}
After create map --> Bounds {"_southWest":{"lat":41.640637639043334,"lng":-0.9014663100242616},"_northEast":{"lat":41.640637639043334,"lng":-0.9014663100242616}}
可以看到,在这两种情况下,作为中心点和最大边界传递给地图创建的数据是相同的,但是一旦地图被创建,从第一种情况到第二种情况,地图坐标的中心和边界有一点不同。
我不太明白为什么会变
每次映射容器可能改变大小时运行invalidateSize()
。这包括通过jquery、ionic等来隐藏/显示它。
相关文章:
- 在同一个服务工作者中处理service-worker.js有任何影响吗
- 为什么 .focus() 不起作用,而 .css(“color”,“red”) 在同一个选择器上起作用
- 在同一个javascript事件处理程序中调用不同的函数
- 按下一个HTML按钮,该按钮使用一个功能在同一个新窗口中打开URL
- 单击和dblclick在同一个html上传递不同的parentNodes.为什么?
- JSON.stringify和Object.keys在同一个对象上产生不同的结果
- 在同一个圆环图中使用不同的数据
- 回流:让多个组件访问同一个Store
- 如何限制同一个字符连续使用
- 内容脚本是在同一个孤立的世界中运行,还是在不同的孤立世界中运行
- Redux:为什么不把操作和reducer放在同一个文件中呢
- Github上的流星,我怎么能和朋友一起做同一个项目
- 有可能让两个变量指向同一个对象吗?(javascript)
- Angular2-*ngFor和*ngIf在同一个元素上产生错误
- 是否可以使用不同投影的另一个WMS层显示OSM数据
- 如何使用YouTube js API在同一个嵌入式播放器中背靠背播放多个视频
- AngularJs:多次点击同一个按钮不起作用
- 通过javascript在同一个打开的选项卡中重新加载新的网页内容
- HTML/CSS/JS切换不同的谷歌日历是同一个框架
- 传单贴图并不总是加载在同一个WMS图层的中心