خطأ غريب مع OpenLayers + CloudMade
-
22-09-2019 - |
سؤال
أحاول شيئًا بسيطًا إلى حد ما ، يمكنك رؤية عرض تجريبي هنا:http://www.jsfiddle.net/vve8x/19/
يظهر هذا الخطأ فقط في Firefox ، لذلك لرؤيته اضغط على أحد الروابط مرة واحدة (سوف يأخذك إما إلى NY أو Israel) ثم اضغط على الرابط الآخر. الأخطاء هو أنه لن يريني البلاط في هذا الموقع ، وبدلاً من ذلك سيظهر لي خلفية Div.
PS في Chrome هذا يعمل بلا عيب.
لا أعرف ما إذا كانت هذه فكرة أو قد تربكك ، إذا كان بين الضغط على NY أو إسرائيل ، فإنك تضغط على رابط "عرض العالم" الذي سيسمح لك بعد ذلك برؤية الموقع الآخر ..
المصدر بالكامل للرجوع إليه
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
<a href="#" onclick="javascript:show1()">show me NY</a>
<a href="#" onclick="javascript:show2()">show me TLV</a>
<a href="#" onclick="javascript:map.zoomToExtent(map.getMaxExtent());">show world map(a "workaround"</a>
<div id='myMap' style="height: 600px; width: 600px; position: relative"></div>
<script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
<script src="http://developers.cloudmade.com/attachments/download/58/cloudmade.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
map = new OpenLayers.Map("myMap", {
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar()
]
});
var cloudmade = new OpenLayers.Layer.CloudMade("CloudMade", {
key: 'd5da652e33e6486ba62fca3d18ba70c9'
});
map.addLayer(cloudmade);
var epsg4326 = new OpenLayers.Projection("EPSG:4326");
map.setCenter(new OpenLayers.LonLat(40, 32), 2);
show1 = function(){
var bound1 = new OpenLayers.Bounds(-8236567.917898,4972686.066032,-8236148.409989,4972889.624407);
map.zoomToExtent(bound1); // to NY
};
show2 = function(e){
var bound2 = new OpenLayers.Bounds(3874818.203389,3773932.267033,3875217.305962,3774226.370443);
map.zoomToExtent(bound2); // to Israel
return false;
};
</script>
</body>
</html>
المحلول
يحتوي mymap_openlayers_container على CSS التالية عندما تكون البلاط غير مرئية:
الموقف: مطلق ؛ Z-index: 749 ؛ اليسار: -2.02815e+7px ؛ أعلى: -2007340px ؛
إذا قمت بتغييرها من حولك ، فيمكنك أن ترى أنه تم تحميل البلاط الصحيحة ، لذلك من المحتمل أن يكون JSfiddle العبث بها. البلاط CSS عندما لا تظهر أيضا لها قيم غريبة.
تحديث:
ينتج عن الاختبار محليًا المشكلة ، بحيث يستبعد JSFIDDLE.
سيكون الإصلاح هو تعيين هذه القيمة بعد التكبير عن طريق استدعاء وظيفة مثل:
updateCSS = function(){
OpenLayers_Container = document.getElementById("myMap_OpenLayers_Container").style.left = "0px";
}
هذا يبدو وكأنه خطأ ، على الرغم من أنه إذا كان في OpenLayers أو من الصعب معرفة خصائص الطبقة السحابية - أتصور أن الأخير ، أو سيكون خطأً على نطاق واسع. يبدو أن الكود ذي الصلة في OpenLayers.js هو:
centerLayerContainer: function(lonlat){
var originPx = this.getViewPortPxFromLonLat(this.layerContainerOrigin);
var newPx = this.getViewPortPxFromLonLat(lonlat);
if ((originPx != null) && (newPx != null)) {
this.layerContainerDiv.style.left = Math.round(originPx.x - newPx.x) + "px";
this.layerContainerDiv.style.top = Math.round(originPx.y - newPx.y) + "px";
}
نصائح أخرى
كنت أواجه هذه المشكلة أيضًا ، واتضح أنني لم أكن أقوم بتعيين مركز الخريطة كما اعتقدت. تختفي المشكلة إذا قمت بالاتصال أولاً بـ map.setCenter (). فمثلا:
var newCenter = new OpenLayers.Lonlat(longitude, latitude)
.transform(new OpenLayers.Projection('ESPG:4326'),
this.map.getProjectionObject());
this.map.setCenter(newCenter);
آمل أن يساعد هذا من لديه مشكلة.