OL3 - 故障检测功能点击

我的目标是在OpenLayers 3中为我的工作创建一个包含多个图层的地图。一个从OpenStreetMaps获取基本的源。另一个将是一个透明图层，显示区域轮廓（尚未完成）。第三个是我遇到的问题，它显示了一系列代表地图上感兴趣的个人站点的图标。我从包含在一个单独的脚本文件中的JS数据结构中加载这些站点。我设法让我的代码添加出现在正确纬度/经度上的功能。我的下一步是在点击图标时显示HTML框（div），以显示该地图的前面（以显示该网站的详细信息）。但是，我无法得到这个工作。对于我的noobish编码抱歉，但它真的让我难住，我非常感谢任何帮助。OL3 - 故障检测功能点击

<!doctype html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="ol.css" type="text/css"> 
    <link rel="stylesheet" href="map.css" type="text/css"> 
    <script src="ol.js" type="text/javascript"></script> 
    <script src="sites.js" type="text/javascript"></script> 
<script type="text/javascript"> 


function buildLayerFromSites(allSites) 
// allSites is just an array of data structures 
{ 
    var count, site; 
    // for each site in the array, make a feature 
    for (count=0;count<allSites.length;count++) 
    { 
    geom = new ol.geom.Point(ol.proj.fromLonLat([allSites[count].longitude,allSites[count].latitude])); 
    site = new ol.Feature(geom); 
    site.Name = allSites[count].siteName; // <-- can I assign further details in the structure like this? 


    var siteStyle = new ol.style.Style({ 
     image: new ol.style.Icon ({ 
     src: 'icon-blue.png', 
     scale: 0.1, 
     opacity: 0.9, 
     }) 
     }) 
    site.setStyle(siteStyle); 
    siteFeatures[count] = site; 
    } 
    siteSource = new ol.source.Vector ({ 
    features: siteFeatures 
    }) 
    siteLayer = new ol.layer.Vector({ 
    source: siteSource 
    }); 
    map.addLayer(siteLayer); 
} 

</script> 
    <title>Map</title> 
    </head><body> 
... 
<div id="map" class="map"> 
... 

<script type="text/javascript"> 


var map = new ol.Map({ 
    target: 'map', 
    layers: [ 
    new ol.layer.Tile({ 
     source: new ol.source.OSM() 
    }) 
    ], 
    view: new ol.View({ 
    center: ol.proj.fromLonLat([115.51, -31.57]), 
    zoom: 8 
    }) 
}); 
buildLayerFromSites(includeSites); // adds the second layer with the sites 


// click event handler, basically same as http://openlayers.org/en/v3.12.1/examples/icon.html 
map.on('click', function(evt) { 
    var feature = map.forEachFeatureAtPixel(evt.pixel, 
    function(feature,layer) { 
     return feature; 
    }); 
    if (feature) { 
    console.log("feature got clicked on"); // do stuff 
    } else { 
    console.log("didn't click a feature"); 
    } 
}); 
</script> 
</body> 
</html>

地图和图标的负载，但是当我点击的图标，无论怎么放大或缩小我，它没有检查出我点击图标匹配。事情是，事件处理程序代码与官方示例中的相同，这使我认为这是我创建功能的方式。另一方面，这些功能可以很好地显示为图标，只是点击事件看起来不起作用。从示例中更改鼠标光标会发生类似的奇怪事情。我猜这是因为我不明白数据/功能在OL中的结构方式，我发现文档没有完全解释它是如何工作的，所以我一直在写这样的代码片段试图看看：

var myLayers = map.getLayers(); 
console.log("keys - " + myLayers.getKeys); // prints out 'function(){return Object.keys(this.B)}' - what does that mean? 
var mySource = myLayers.getSource; 
console.log("source" + mySource.getProjection); // doesn't work 
var features = mySource.getFeatures; // says mySource is undefined

当然，它完全失败。

如何获取它以检测图标/功能上的点击，以便我可以告诉div出现并在正确的时间显示我的数据？我做对了吗？我对数据/函数的工作方式有什么不了解？我是一个很大的JS noob，所以我希望我不会做一些愚蠢的事情，但这会造成我很大的问题，我真的可以用你的帮助！谢谢大家！

来源

2016-01-05 HealthyCode

经过长时间的盯着我的屏幕，把我的头撞到桌子上，我偶然发现了解决问题的方法。这有点模糊，但头脑简单/愚蠢/愚蠢。我想我会在这里为其他人发布解决方案。

我写了几行代码来调整视图的大小，当页面加载时，再次调整窗口的大小时，地图会调整为可用用户的浏览器窗口空间。不幸的是，据我所知，OL并不知道它，所以图标和功能在调整大小后不再处于相同的位置。我不知道这一点，直到无数小时后，我随机点击并调整大小，才检测到功能点击。

幸运的是，有一个简单的方法来解决它，一旦你找出这是问题。基本上只需将map.updateSize（）添加到调整视口大小的部分代码中。目前为止，这似乎解决了这个问题。

来源

2016-01-06 05:02:10 HealthyCode

console.log（“keys - ”+ myLayers.getKeys）; //打印出'function（）{return Object.keys（this.B）}' - 这是什么意思？

这意味着你试图打印函数本身，而不是它的执行结果。应该

console.log("keys - " + myLayers.getKeys())

同样的，

mySource.getProjection(); 
mySource.getFeatures();

通常，如果属性名称以“get”和写在驼峰 - 这是一个功能。记住这个提示:)

来源

2016-01-05 08:52:52

感谢您的耐心解答。大规模的菜鸟错误！那么，我如何打印它返回的内容呢？先把它放在一个变量中？或者因为它不是简单的数据类型，我不能？ – HealthyCode

您可以使用console.log将其打印到控制台，只需先尝试一下，队友 –

OIC是的，现在我明白了。再次感谢耐心。它现在说myLayers.getSource不是一个函数，即使这个函数在文档中，但至少我更接近一个更少的noob错误！ – HealthyCode

OL3 - 故障检测功能点击

回答

相关问题