【发布时间】：2014-07-22 14:39:40
【问题描述】：
我正在使用 Openlayers.mobile.js 库将 OSM 嵌入到 Android 应用程序中。
屏幕尺寸问题
我遇到的第一个问题是，当我缩放到 0 级时，例如纵向，而不是显示整个星球地图并在屏幕的额外顶部和底部填充黑色，看起来它做的相反: 垂直缩放到最大范围并剪切地图的额外水平边。
如果我设置 maxExtent(-180,-90,180,90) 地图与屏幕的相对位置相同，并且它不允许我移动地图，因此无法访问额外的两个边。
就像如果它正在考虑屏幕尺寸是相反的，但如果我在横向上这样做，我只会在屏幕上得到地图的中心部分。
我的理想愿望是将所有地图都显示在屏幕上，并用黑色填充所有额外的屏幕。在这两种情况下，横向和纵向。
重复问题
由于我无法正确修复地图的 maxExtent，因此在水平平移时它会开始重复。我使用动态绘制多边形的矢量图层。当用户移动地图时，有时它会将多边形的一些点移动到 x+360º，因此，当关闭多边形时，它会显示出奇怪的形状。 （它用 x 点和 x+360 点的混合来闭合多边形。
有没有办法告诉矢量图层我希望所有点都是最接近的点，然后他可以决定整个多边形应该在 x 还是 x+360？ 有没有办法阻止地图重复或以与地图重复相同的方式重复矢量图层（允许在地图的两个位置（x 和 x+360º）显示相同的国家/多边形？
注意：当多边形位于两个地图之间时，点只会移动，如果不是，则移动整个多边形。我需要告诉构造函数 Polygon，多边形是通过邻近度而不是单个地图中的点来关闭的。因此，点 p1=(-179,0) 和 p2=(179,0) 应该关闭而不经过点 (0,0) 但经过点 (180,0)=(-180,0) .
一些代码
Mobile.js：
// initialize map when page ready
var map;
// Get rid of address bar on iphone/ipod
var fixSize = function() {
window.scrollTo(0,0);
document.body.style.height = '100%';
if (!(/(iphone|ipod)/.test(navigator.userAgent.toLowerCase()))) {
if (document.body.parentNode) {
document.body.parentNode.style.height = '100%';
}
}
};
setTimeout(fixSize, 700);
setTimeout(fixSize, 1500);
var init = function () {
// create map
map = new OpenLayers.Map({
div: "map",
theme: null,
numZoomLevels: 18,
controls: [
new OpenLayers.Control.TouchNavigation({
dragPanOptions: {
enableKinetic: true
}
})
],
layers: [
new OpenLayers.Layer.OSM("OpenStreetMap", null, {
transitionEffect: 'resize'
})
],
center: new OpenLayers.LonLat(0, 0),
zoom: 0
});
};
index.html->周期绘制函数：
//Stations
if(Math.abs(sc_altitude-sc_altitude_tmp)>sc_altitude_step){
stations_area_layer.removeAllFeatures();
for (var arrayIndex in station_areas){
/*
var radius = Rt*Math.sin(Math.acos(Rt/(Rt+sc_altitude-stations[arrayIndex].ellipsoid_elevation)));
var circle = OpenLayers.Geometry.Polygon.createRegularPolygon(
new OpenLayers.Geometry.Point(stations[arrayIndex].longitude, stations[arrayIndex].latitude).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()),
radius,
30
);
//circle.transform(new OpenLayers.Projection("EPSG:4258"), map.getProjectionObject());
var station_feature = new OpenLayers.Feature.Vector(circle, null, station_area_style);
stations_area_layer.addFeatures([station_feature]);
*/
var areaPoints = [];
for (var i in station_areas[arrayIndex].points) {
var coord = station_areas[arrayIndex].points[i];
var point = new OpenLayers.Geometry.Point(coord.longitude, coord.latitude);
// transform from WGS 1984 to Spherical Mercator
point.transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
areaPoints.push(point);
}
areaPoints.push(areaPoints[0]);
var linearRing = new OpenLayers.Geometry.LinearRing(areaPoints);
var geometry = new OpenLayers.Geometry.Polygon([linearRing]);
var polygonFeature = new OpenLayers.Feature.Vector(geometry, null, station_area_style);
stations_area_layer.addFeatures([polygonFeature]);
}
sc_altitude_tmp = sc_altitude;
}
index.html->head:
<head>
<title>OpenLayers Mobile</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="theme/default/style.css" type="text/css">
<link rel="stylesheet" href="theme/default/style.mobile.css" type="text/css">
<script type='text/javascript' src="interface.js"></script>
<!--<script src="http://www.openlayers.org/api/OpenLayers.js"></script>-->
<script src="OpenLayers.mobile.js"></script>
<script src="mobile.js"></script>
<script type="text/javascript" src="proj4js/proj4.js"></script>
<script type="text/javascript" src="greatCircle.js"></script>
<script type="text/javascript" src="greatcirclemod.js"></script>
<SCRIPT type="text/javascript" src="proj4js/data/tmerc.js"></SCRIPT>
<SCRIPT type="text/javascript" src="proj4js/data/merc.js"></SCRIPT>
<SCRIPT type="text/javascript" src="proj4js/data/EPSG31466.js"></SCRIPT>
<SCRIPT type="text/javascript" src="proj4js/data/EPSG31467.js"></SCRIPT>
<SCRIPT type="text/javascript" src="proj4js/data/EPSG900913.js"></SCRIPT>
<!--<script type="text/javascript" src="javascript/counter_orthodrome.js"></script>-->
<style>
html, body {
margin : 0;
padding : 0;
height : 100%;
width : 100%;
}
@media only screen and (max-width: 600px) {
html, body {
height : 117%;
}
}
#map {
width : 100%;
position : absolute;
height : 100%;
}
.olControlAttribution {
position : absolute;
font-size : 10px;
bottom : 0 !important;
right : 0 !important;
background : rgba(0,0,0,0.1);
font-family : Arial;
padding : 2px 4px;
border-radius : 5px 0 0 0;
}
#title, #tags, #shortdesc {
display: none;
}
</style>
</head>
【问题讨论】：
标签： android openlayers openstreetmap